将多个代码镜像脚本应用于一个iframe

Applying multiple codemirror scripts to one iframe

本文关键字：一个 iframe 脚本 代码 镜像 应用于      更新时间：2023-09-26

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

有人知道怎么做吗？

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

这是一个对我有用的想法

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

希望有帮助

相关文章：