Question

我已经尝试了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 ：

<textarea id="code" name="code"><!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>HTML5 canvas demo</title>
<style>p {font-family: monospace;}</style>
</head>
<body>
  <p>Canvas pane goes here:</p>
  <canvas id=pane width=300 height=200></canvas>

  <script>
    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);
  </script>
</body>
</html></textarea>

<iframe id="preview"></iframe>

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();

});

回调可编辑IFrame对Codemirror的更改

2 个答案: