回调可编辑IFrame对Codemirror的更改

我一直在尝试使用Codemirror ，今天我决定使iframe可编辑，但还没有找到一种方法来回调我通过更改对iframe所做的更改并将这些更改直接应用于Codemirror。

这可能吗？

JavaScript / JQuery ：

var delay; // Initialize CodeMirror editor var editor = CodeMirror.fromTextArea(document.getElementById('code'), { mode: 'text/html', tabMode: 'indent', styleActiveLine: true, lineNumbers: true, lineWrapping: true, autoCloseTags: true }); // Live preview editor.on("change", function() { clearTimeout(delay); delay = setTimeout(updatePreview, 300); }); function updatePreview() { var previewFrame = document.getElementById('preview'); var preview = previewFrame.contentDocument || previewFrame.contentWindow.document; preview.open(); preview.write(editor.getValue()); preview.close(); } setTimeout(updatePreview, 300); // Make the preview editable window.onload = function() { preview.document.designMode = 'On'; }; // Update the Editor Code from Preview Edit preview.on('change', function() { clearTimeout(delay); delay = setTimeout(updateEditor, 300); }); function updateEditor() { var previewFrame = document.getElementById('preview'); var preview = previewFrame.contentDocument || previewFrame.contentWindow.document; preview.open(); editor.setValue(preview.body.innerHTML()); preview.close(); } setTimeout(updateEditor, 300); 

HTML ：

     <title>HTML5 canvas demo</title> p {font-family: monospace;}   <p>Canvas pane goes here:</p>   var canvas = document.getElementById('pane'); var context = canvas.getContext('2d'); context.fillStyle = 'rgb(250,0,0)'; context.fillRect(10, 10, 55, 50); context.fillStyle = 'rgba(0, 0, 250, 0.5)'; context.fillRect(30, 30, 55, 50);     

Answer 1

通过https://developer.mozilla.org/en-US/docs/Web/API/Window.frames

我几乎没有使用codemirror的经验，但是原始DOM允许使用Window.frames[]访问iframe。 如果使用.addEventListener("onchange",function)通过dom拉回数据，则应该可以使用它。

如果这个答案不够具体（或者超出范围，因为我不知道在你的框架内做到这一点的方法），请告诉我你究竟想要撤回的内容，我会做更多的研究。

Answer 2

http://jsbin.com/aNirEnUB/4/edit

这是我能做的最好的。
我摆脱了Codemirror，并使用了常规文本框/ textarea。
我将其设置为一个表单以便于回调。
我无法弄清楚如何为iframe回调onchange或onkeyup事件。 所以我通过切换文本框来调用它。

 window.onload = function() { preview.document.designMode = 'On'; preview.document.execCommand("enableObjectResizing", false, "false"); preview.document.execCommand("enableInlineTableEditing", false, "false"); }; // Calls code from preview to textbox function submit_form() { var theForm = document.getElementById("container"); theForm.elements.code.value = window.frames.preview.document.body.innerHTML; theForm.onclick(); } $(document).ready(function() { var code = $('#code'), preview = $('[ID$=preview]'); // Live Debugging code.keyup(IntPrev); function IntPrev(e) { preview.contents().find('body').html(code.val()); } // Toggle between Designer and Code $("#design-n-code").click(function() { preview.toggle(); code.toggle(); }); code.hide(); });