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;"></textarea>
        <input type="hidden" name="ic_id" value="<?php echo $information->ic_id; ?>"/>

        <div class="row">
            <div class="col-sm-10">
                <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>
                |
                <a href="http://tool.oschina.net/codeformat/css" target="_blank">CSS格式化</a>
            </div>
            <div class="col-sm-3">
                <button type="button" class="btn btn-info" onclick="auto_create_amp(this);">
                    自动转换
                </button>
            </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>
                <?php if($this->config->item('site_code')=='cht'){ ?>
                <a href="http://192.155.224.195:8080/guide-use.php/amp_loader/test/?info_url=<?php echo $information->ic_url ?>"
                   target="_blank">看看</a>
                <?php } ?>
            </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 type="text/x-template" id="amp_html">
    <?php echo htmlentities(get_meta($information->ic_id, 'AMP')); ?>
</script>
<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();
    });

    var temp_div = document.createElement("div");
    temp_div.innerHTML = $('#amp_html').html();
    editor.session.setValue(temp_div.textContent);

    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');
    }

    function auto_create_amp(obj) {
        $(obj).text('转换中...');
        $(obj).enable(false);
        $.getJSON("<?php echo site_url('amp/auto_create/' . $information->ic_id) ?>", function (result) {
            $.each(result, function (i, field) {
                if (i == 'data') {
                    editor.setValue(field.amp);
                }
            });
            $(obj).text('转换完成!');
            $(obj).enable(true);
        });

    }
</script>