Codemirror 和 iFrame 问题答案

【问题标题】：Codemirror and iFrame issueCodemirror 和 iFrame 问题
【发布时间】：2012-09-28 18:07:55
【问题描述】：

我在我的一个项目中使用 Codemirror。代码如下：

<script>
window.onload = function() {
var te = document.getElementById("js");
var te_html = document.getElementById("html");
var te_css = document.getElementById("css");

window.editor = CodeMirror.fromTextArea(te, {
mode: "javascript",
    lineWrapping: true,
    });

 window.editor_css = CodeMirror.fromTextArea(te_css, {
    mode: "css",
    lineWrapping: true,
    });

  window.editor_html = CodeMirror.fromTextArea(te_html, {
    mode: "text/html",
    lineWrapping: true,
  })
};
</script>

我还使用 Jeffrey Way 的“如何将自定义 HTML 和 CSS 注入 iframe”脚本来构建类似于 Tinkerbin 或 JSFiddle 的东西。

这是我的那部分代码：

<script type="text/javascript">
(function() {
    $('.grid').height( $(window).height() );    

    var contents = $('iframe').contents(),
    body = contents.find('body'),
    styleTag = $('<style></style>').appendTo(contents.find('head'));

    $('textarea').keyup(function() {
        var $this = $(this);
        if ( $this.attr('id') === 'html') 
        {
        body.html( $this.val() );
        } 
        else 
        {
        styleTag.html( $this.val() );
        }

    });

})();
</script>

一切都很好，除了激活 CodeMirror 脚本后，RESULT 选项卡中没有显示任何内容。如果我删除 CodeMirror 代码部分，它可以正常工作。

这是我的项目链接：

http://mediodesign.ca/cms-test/

有人知道冲突在哪里吗？

谢谢！

【问题讨论】：

标签： javascript jquery html css iframe

【解决方案1】：

确保你已经加载了所有的 javascripts

mode/javascript.js
mode/css.js
mode/xml.js

如果您在 xhtml 文件中使用此脚本。使用单引号（'）而不是双引号（"）

例如

<script>
window.onload = function() {
var te = document.getElementById('js');
var te_html = document.getElementById('html');
var te_css = document.getElementById('css');

window.editor = CodeMirror.fromTextArea(te, {
mode: 'javascript',
    lineWrapping: true,
    });

 window.editor_css = CodeMirror.fromTextArea(te_css, {
    mode: 'css',
    lineWrapping: true,
    });

  window.editor_html = CodeMirror.fromTextArea(te_html, {
    mode: 'text/html',
    lineWrapping: true,
  })
};
</script>

Jeffrey Way 的 How to Inject Custom HTML and CSS into an iframe... 与加载 codemirror 脚本无关

【讨论】：