我在我的一个元素中使用 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 注入(inject) 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/
有人知道冲突在哪里吗?
谢谢!
最佳答案
确保你已经加载了所有的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 的如何将自定义 HTML 和 CSS 注入(inject) iframe...与加载 codemirror 脚本无关
关于javascript - Codemirror 和 iFrame 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10499727/