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>
            <h4>多媒体中心图片</h4>
            <div class="input-group">
                <input type="text" class="form-control" placeholder="请选择图片后复制地址到相应位置" id='selectedImageUrl'>
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button" id='mediaButton'>选择</button>
                </span>
            </div>
        </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>
                                |
                <a href="<?php echo site_url('apps/htmlcompressor'); ?>" target="_blank">调试</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>
                    <option value="2" <?php echo get_meta($information->ic_id, 'AMP_STATUS') === '2' ? 'selected' : FALSE; ?> >
                        发布-手动管理
                    </option>
                </select>
            </div>

            <div class="col-sm-4">
                
                <div class="btn-group">
<button type="button" class="btn btn-primary" onclick="submit_amp_editor();">保存</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li role="separator" class="divider"></li>
     <li><a href="javascript(0);" onclick="meta('delete', '<?php echo $information->ic_id; ?>', 'AMP', ''); meta('delete', '<?php echo $information->ic_id; ?>', 'AMP_STATUS', '');">删除</a></li>
  </ul>
</div>
                
                <?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 ?>" class="btn btn-primary"
                       target="_blank">看看</a>
                   <?php } ?>
                
                
            </div>

            <div class="col-sm-4">
                <button type="button" class="btn btn-primary" onclick="show_cache_refresh_modal('<?php echo $information->ic_url ?>');">更新静态页面</button>
            </div>
        </div>
    </form>
            <div id="amp_error">
            
        </div>
    <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>
    function openKCFinder_Root() {
    var site_url = '<?php echo $this->config->item('site_url') ?>';
    var weburl = encodeURI(site_url + '<?php echo $information->ic_url ?>');
    window.CallBack = openKCFinder_Root_callback;
    window.open('/media/popselectpicture.php?site_code=cht&site_lgc=1&WebUrl=' + weburl, 'kcfinder_textbox', 'status=0, toolbar=0, location=0, menubar=0, directories=0,resizable=1, scrollbars=0, width=800, height=600');
  }

  function openKCFinder_Root_callback(result) {
    var site_image_url = '<?php echo $this->config->item('site_image_url') ?>';
    if (result != null && result.Pinfo[0]) {
      var imageUrl = site_image_url + result.Pinfo[0].PUrl;
      $("#selectedImageUrl").val(imageUrl);
    }
  }


    $(function() {
        $('#mediaButton').click(function() {
            openKCFinder_Root();
        });
    });
                            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() {
                                $('#amp_error').html('');
                                $('#textarea_htmlcode').text(editor.getValue()).html();
                                $("#form_amp_code").ajaxSubmit({
                                    success: function (responseText, statusText, xhr, form) {
                                        if (responseText.name === 'no') {
                                            error_msg='<h3>AMP validation FAIL</h3>';
                                            $.each(responseText.value, function (index, element) {
                                               error_msg=error_msg+'<p>line '+element.line+' col '+element.col+' :'+element.message+'</p>';
                                            });
                                            $.modaldialog.error('AMP语法错误，请看下方错误详情');
                                            $('#amp_error').html(error_msg);
                                        } else {
                                            $.modaldialog.success('保存成功!');
                                        }
                                    },
                                    error: function (responseText, statusText, xhr, form) {
                                        $.modaldialog.error("Action unsuccessful. Try again later.");
                                    },
                                    dataType: "json",
                                    timeout: 30000
                                });
                                return false
                            }

                            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>