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>

希望有帮助。

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

2 个答案: