将多个 codemirror 脚本应用于一个 iframe答案

【问题标题】：Applying multiple codemirror scripts to one iframe将多个 codemirror 脚本应用于一个 iframe
【发布时间】：2013-08-05 05:18:51
【问题描述】：

我已经在我的网站上安装了 Codemirror，我几乎可以在我想要的地方找到它我可以用 html 编写代码并在 iframe 中预览它但是我希望能够将 CSS 文本区域和 Javascript 文本区域应用到同一个iframe？？？

有人知道怎么做吗？

【问题讨论】：

标签： javascript html css iframe codemirror

【解决方案1】：

只需加载两种模式并为不同的 CodeMirror 实例提供不同的mode 选项。

【讨论】：

但是如何组合 HTML+CSS+JavaScript 实例的结果并在 iframe 中显示组合结果？我认为 Otis 所说的与 jsBin 所做的非常相似。
啊，我明白了。嗯，以巧妙的方式连接它们并将它们写入框架？另请参阅 jsbin，它是这样做的，并且在 github.com/remy/jsbin 上是开源的

【解决方案2】：

这是一个适合我的想法

<script>
var delay;

// HTML MODE
var html = CodeMirror.fromTextArea(document.getElementById("html"), {
    lineNumbers: true,
    lineWrapping: true,
    mode: 'text/html'
});
html.on("change", function() {
clearTimeout(delay);
delay = setTimeout(updatePreview, 300);
});

// CSS MODE
var css = CodeMirror.fromTextArea(document.getElementById("css"), {
    lineNumbers: true,
    lineWrapping: true,
    mode: 'text/css'
});
css.on("change", function() {
clearTimeout(delay);
delay = setTimeout(updatePreview, 300);
});

// Javascript MODE
var js = CodeMirror.fromTextArea(document.getElementById("js"), {
    lineNumbers: true,
    lineWrapping: true,
    mode: 'text/javascript'
});
js.on("change", function() {
clearTimeout(delay);
delay = setTimeout(updatePreview, 300);
});

function updatePreview() {
var previewFrame = document.getElementById('preview');
var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;

// Preview
preview.open();
preview.write('<style type="text/css">' + css.getValue() + '</style>');
preview.write(html.getValue());
preview.write(js.getValue());
preview.close();

}
setTimeout(updatePreview, 300);
</script>

希望对您有所帮助。

【讨论】：

这就像一个魅力。非常感谢。