javascript - 将多个 codemirror 脚本应用于一个 iframe

Question

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

有谁知道怎么做？

Answer 1

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

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

希望能帮助到你。