带有 2 个文本编辑器和实时预览的 CodeMirror？

Question

我正在尝试创建一个像 jsfiddle 这样的实时编辑器，用户可以在其中将 html 放入 html box (textarea) 并将 css 放入 css box(textarea) 并预览更改实时在 iframe 中。

我正在使用codemirror 作为编辑器。

到目前为止，我只能在我的 iframe 中获得其中一个 textareas 的预览，我无法弄清楚如何获取两个 textareas (css/html) 的值并将它们显示在我的 iframe 中，就像 jsfiddle 一样。

这是我目前所拥有的：

http://jsfiddle.net/vwqgtznv/

这是我的 javascript 代码：

   <script>
      var delay;
      // Initialize CodeMirror editor with a nice html5 canvas demo.
      var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
    lineNumbers: true,
    styleActiveLine: true,
    matchBrackets: true,
        mode: 'text/html'
      });
      editor.on("change", function() {
        clearTimeout(delay);
        //alert("hellooooo");



        delay = setTimeout(updatePreview, 300);
      });

      function updatePreview() {
        var previewFrame = document.getElementById('preview');
        var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
        preview.open();
        preview.write(editor.getValue());
        preview.close();
      }
      setTimeout(updatePreview, 300);
    </script>

        <script>
      var delay2;
      // Initialize CodeMirror editor with a nice html5 canvas demo.
      var editor2 = CodeMirror.fromTextArea(document.getElementById('codert'), {
    lineNumbers: true,
    styleActiveLine: true,
    matchBrackets: true,
        mode: 'text/html'
      });
      editor2.on("change", function() {
        clearTimeout(delay2);
        //alert("hellooooo");



        delay2 = setTimeout(updatePreview2, 300);
      });

      function updatePreview2() {
        var previewFrame2 = document.getElementById('preview');
        var preview2 =  previewFrame2.contentDocument ||  previewFrame2.contentWindow.document;
        preview2.open();
        preview2.write(editor2.getValue());
        preview2.close();
      }
      setTimeout(updatePreview2, 300);
    </script>

有人可以帮我解决这个问题吗？

提前致谢。

Answer 1

您的问题是将 CSS 附加到 iframe 头部。使用下面的代码为 CSS 更新 iframe 头部。

function loadCSS() {
    var $head = $("#preview").contents().find("head");                
    $head.html("<style>" + editor.getValue() + "</style>");
}; 

HTML 文本区域应使用 CSS 进行更新。将loadCSS() 添加到您的updatePreview2()（html textarea 更新函数）。

function updatePreview2() {
    var previewFrame2 = document.getElementById('preview');
    var preview2 =  previewFrame2.contentDocument ||  previewFrame2.contentWindow.document;
    preview2.open();
    preview2.write(editor2.getValue());
    preview2.close();

    // added this line
    loadCSS(); 
}

并且当你的 CSS textarea 发生变化时，预览内容将由updatePreview()（CSS textarea 更新功能）与 CSS 内容一起更新。它应该只更新 head。

function updatePreview() {
    loadCSS();
}

这里是Jsfiddle，请在这里进行演示。

顺便说一句，尽量准确地命名你的变量和函数会让更多人帮助你。

更新

一个干净的JsFiddle 版本。

Answer 2

基于@North 的回答和指导，我提出了这个答案。如果您对此答案 +1，请也给 North 的答案 +1。这是 North 的 anwser 的优化和扩展，构建了一个 jsfiddle-clone。因此，它演示了对当前页面问题的回答。

• Jsfiddle -- 更丰富的代码让我们走得更远
• Blogpost -- 与其他一些助手的中型帖子。

在 .html 中：

 <!-- load the relevant dependencies via script and style/link tags. -->
 <textarea class="code" id="editor-html">
 <textarea class="code" id="editor-css">
 <textarea class="code" id="editor-js">

在 .js 文件中：

var editorsSettings = {
  lineWrapping: true,
  lint: true,
  lineNumbers: true,
  foldGutter: true,
  gutters: ["CodeMirror-lint-markers","CodeMirror-linenumbers", "CodeMirror-foldgutter"],
  tabSize: 2,
  indentUnit: 2,
  matchBrackets: true
}

// Editors HTML, CSS, JS : init, bind, define settings.
let editorHTML = CodeMirror.fromTextArea(document.querySelector('#editor-html'), {
  mode : "htmlmixed", // require modes for xml, css, js.
  htmlMode: true,
  ...editorsSettings
});
let editorCSS = CodeMirror.fromTextArea(document.querySelector('#editor-css'), {
  mode: 'text/css',
  ...editorsSettings
});
let editorJS = CodeMirror.fromTextArea(document.querySelector('#editor-js'), {
  mode: 'text/javascript',
  ...editorsSettings
});

// Fetch and organize into results
let updatePreview = function() {
  let preview = document.querySelector('#preview');
  let previewDocument = preview.contentDocument || preview.contentWindow.document;
  previewDocument.open();
  previewDocument.write(editorHTML.getValue());
  previewDocument.write("<script>"+editorJS.getValue()+"<"+"/script>");
  previewDocument.close();
  previewDocument.querySelector('head').innerHTML = '<style>' + editorCSS.getValue() + '</style>';
}