我已经在我的网站上安装了 Codemirror,我几乎可以在我想要的地方找到它我可以用 html 编写代码并在 iframe 中预览它但是我希望能够将 CSS 文本区域和 Javascript 文本区域应用到同一个 iframe? ??
有谁知道怎么做?
我已经在我的网站上安装了 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>
希望能帮助到你。