解决AMP编辑器TEXTAREA的错误

application/views/amp_editor.php

@@ -12,7 +12,6 @@
     }
 </style>
 
-
 <div class="container-fluid">
     <div class="row">
         <div class="preview_box" id="iframe_box" ></div>
@@ -20,7 +19,7 @@
     </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>
+        <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">
@@ -48,45 +47,47 @@
     <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");
+    var editor = ace.edit("editor");
-                editor.setTheme("ace/theme/eclipse");
+    editor.setTheme("ace/theme/eclipse");
-                editor.session.setMode("ace/mode/html");
+    editor.session.setMode("ace/mode/html");
-                editor.setOptions({
+    editor.setOptions({
-                    autoScrollEditorIntoView: true,
+        autoScrollEditorIntoView: true,
-                    wrap: true
+        wrap: true
-                });
+    });
+
+    editor.getSession().on('change', function (e) {
+        update_preview();
+    });
 
-                editor.getSession().on('change', function (e) {
+    var temp_div = document.createElement("div");
-                    update_preview();
+    temp_div.innerHTML = $('#amp_html').html();
-                });
+    editor.session.setValue(temp_div.textContent);
-                editor.session.setValue($('#textarea_htmlcode').html($('#textarea_htmlcode').html()).text());
 
-                function update_preview() {
+    function update_preview() {
-                    //考虑做成异步操作，降低页面卡顿
+        //考虑做成异步操作，降低页面卡顿
-                    var iframe = document.createElement('iframe');
+        var iframe = document.createElement('iframe');
-                    iframe.setAttribute('frameBorder', '0');
+        iframe.setAttribute('frameBorder', '0');
-                    iframe.setAttribute('id', 'previewIframe');
+        iframe.setAttribute('id', 'previewIframe');
-                    iframe.setAttribute('height', '100%');
+        iframe.setAttribute('height', '100%');
-                    iframe.setAttribute('width', '100%');
+        iframe.setAttribute('width', '100%');
-                    iframe.setAttribute('name', 'AMP Playground Output');
+        iframe.setAttribute('name', 'AMP Playground Output');
-                    $('#iframe_box').html('');
+        $('#iframe_box').html('');
-                    $('#iframe_box').append(iframe);
+        $('#iframe_box').append(iframe);
-                    var doc = iframe.contentDocument || iframe.document;
+        var doc = iframe.contentDocument || iframe.document;
-                    doc.open();
+        doc.open();
-                    doc.write(editor.getValue());
+        doc.write(editor.getValue());
-                    doc.close();
+        doc.close();
-                }
+    }
 
-                function submit_amp_editor() {
+    function submit_amp_editor() {
-                    $('#textarea_htmlcode').text(editor.getValue()).html();
+        $('#textarea_htmlcode').text(editor.getValue()).html();
-                    submitForm('form_amp_code');
+        submitForm('form_amp_code');
-                }
+    }
 </script>