Javascript 将可编辑的iFrame更改回调到Codemirror_Javascript_Jquery

Javascript 将可编辑的iFrame更改回调到Codemirror

javascript jquery

Javascript 将可编辑的iFrame更改回调到Codemirror,javascript,jquery,Javascript,Jquery,我已经尝试了一段时间，今天我决定让iframe可编辑，但还没有找到一种方法通过更改回调我对iframe所做的更改，并将这些更改直接应用到Codemirror 这可能吗 JavaScript/JQuery： var delay; // Initialize CodeMirror editor var editor = CodeMirror.fromTextArea(document.getElementById('code'), { mode: 'text/html', tabM

我已经尝试了一段时间，今天我决定让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);

<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>

HTML：

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

<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>


HTML5画布演示
p{font-family:monospace；}
画布窗格位于此处：
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,0250,0.5）'；
context.fillRect（30,30,55,50）；

通过

我几乎没有使用codemirror的经验，但是原始DOM允许使用

Window.frames[]

访问iframes。如果您使用

.addEventListener（“onchange”，function）

通过dom将数据拉回，您应该能够使用它

如果这个答案不够具体（或者超出范围，因为我不知道在您的框架内如何做），请告诉我您到底想收回什么，我会做更多的研究。

这是我能做的最好的了。
我去掉了Codemirror，使用了一个普通的文本框/文本区。
我将其全部设置为一种形式，以便更轻松地进行回调。
我不知道如何为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中更改html代码，您会有什么期望？我只是在尝试。在文档被更改后，我还无法确定如何将代码从iframe定向到codemirr。