information-system/application/views/amp_editor.php

<style>
    .preview_box {
        float: left;
        width:375px;
        height:600px;
        margin-top:8px;
    }
    .code_editor {
        overflow: hidden;
        height:600px;
        margin-top:8px;
    }
</style>


<div class="container-fluid">
    <div class="row">
        <div class="preview_box" id="iframe_box" ></div>
        <div class="code_editor" id="editor"></div>
    </div>
    <hr/>
    <form name="form_amp_code" id="form_amp_code" method="post" action="<?php echo site_url('amp/edit_save') ?>">
        <textarea id="textarea_htmlcode" name="textarea_htmlcode" style="display: none;"><?php echo get_meta($information->ic_id, 'AMP'); ?></textarea>
        <input type="hidden" name="ic_id" value="<?php echo $information->ic_id; ?>" />

        <div class="row">
            <div class="col-sm-13" >
			<a href="http://ampvalidator.mycht.cn/" target="_blank">AMP代码验证</a>
			|
			<a href="https://uncss-online.com/" target="_blank">CSS精简</a>
			|
			<a href="http://tool.oschina.net/jscompress" target="_blank">CSS压缩</a>
			</div>
            <div class="col-sm-3">

                <select name="amp_status" id="amp_status" class="form-control" >
                    <option value="0" <?php echo get_meta($information->ic_id, 'AMP_STATUS') === '0' ? 'selected' : FALSE; ?> >不发布</option>
                    <option value="1" <?php echo get_meta($information->ic_id, 'AMP_STATUS') === '1' ? 'selected' : FALSE; ?> >发布</option>
                </select>
            </div>
            <div class="col-sm-4">
                <button type="button" class="btn btn-primary" onclick="submit_amp_editor();">保存</button>
			    <a href="http://192.155.224.195:8080/guide-use.php/amp_loader/test/?info_url=<?php echo $information->ic_url ?>" target="_blank">看看</a>
            </div>
            <div class="col-sm-4"> <button type="button" class="btn btn-default" onclick="meta('delete', '<?php echo $information->ic_id; ?>', 'AMP', ''); meta('delete', '<?php echo $information->ic_id; ?>', 'AMP_STATUS', '');">删除</button> </div>
        </div>
    </form>
    <hr/>
</div>





<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
                var editor = ace.edit("editor");
                editor.setTheme("ace/theme/eclipse");
                editor.session.setMode("ace/mode/html");
                editor.setOptions({
                    autoScrollEditorIntoView: true,
                    wrap: true
                });

                editor.getSession().on('change', function (e) {
                    update_preview();
                });
                editor.session.setValue($('#textarea_htmlcode').html($('#textarea_htmlcode').html()).text());

                function update_preview() {
                    //考虑做成异步操作，降低页面卡顿
                    var iframe = document.createElement('iframe');
                    iframe.setAttribute('frameBorder', '0');
                    iframe.setAttribute('id', 'previewIframe');
                    iframe.setAttribute('height', '100%');
                    iframe.setAttribute('width', '100%');
                    iframe.setAttribute('name', 'AMP Playground Output');
                    $('#iframe_box').html('');
                    $('#iframe_box').append(iframe);
                    var doc = iframe.contentDocument || iframe.document;
                    doc.open();
                    doc.write(editor.getValue());
                    doc.close();
                }

                function submit_amp_editor() {
                    $('#textarea_htmlcode').text(editor.getValue()).html();
                    submitForm('form_amp_code');
                }
</script>