Question

我尝试创建一个像jsfiddle这样的实时编辑器，用户可以在html box (textarea)中放置html，在css box(textarea)中放置css，并在iframe中预览直播

我使用codemirror作为编辑。

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

这是我到目前为止所做的：

这是我的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>");
};

应该使用CSS更新HTML textarea。将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内容。它应该只更新头。

function updatePreview() {
    loadCSS();
}

以下是Jsfiddle，请在此处进行演示。

顺便说一句，尝试命名你的变量和功能会让更多人帮助你。

Answer 2

我以@North的答案和指导为基础，提出了这个答案。如果您为此答案+1，也请给North的答案+1。这是对North的答案的优化和扩展，建立了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>';
}

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

2 个答案: