Ace编辑器中对/mode.html有什么要求



我可以让mode/javascript与一起工作

JS
https://github.com/ajaxorg/ace-builds/blob/master/src-noconflict/ace.js

主题
https://github.com/ajaxorg/ace-builds/blob/master/src-noconflict/theme-tomorrow.js

模式
https://github.com/ajaxorg/ace-builds/blob/master/src-noconflict/mode-javascript.js

工人
https://raw.github.com/ajaxorg/ace-builds/master/src-noconflict/worker-javascript.js

HTML

<script src="/static/js/ace/ace.js"></script>
<div class="my_ace_editor">
function foo(items) {
var x = "All this is syntax highlighted";
return x;
}
</div>

CSS

#my_ace_editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

jQuery

$(document).ready(function() {
var editor = ace.edit("my_ace_editor");
editor.setTheme("ace/theme/tomorrow");
editor.getSession().setMode("ace/mode/javascript");
});

但是当我尝试用显示HTML时没有任何运气

HTML

<div id="my_ace_editor"><p>test</p></div>

jQuery

$(document).ready(function() {
var editor = ace.edit("my_ace_editor");
editor.setTheme("ace/theme/tomorrow");
editor.getSession().setMode("ace/mode/html");
});

并添加了:

https://raw.github.com/ajaxorg/ace-builds/master/src-noconflict/mode-html.js

如果我在HTML编辑器中键入,标记和内容将应用语法高亮显示。

但它在加载时并没有显示实际的HTML——它只显示test

没有Firebug错误,我可以看到应该在Firebug中突出显示的实际HTML。

是否需要其他文件或设置?

编辑:如果我使用,我可以在Ace编辑器中正确显示HTML内容

editor.setValue("<html>test</html>",-1);

但我需要能够从HTML本身而不是在jQuery中设置值。

内容是从数据库加载的(即它是"动态内容"),我不确定这是否有区别?

您需要转义html,而不是

<div id="my_ace_editor"><p>html&test</p></div>

应该是

<div id="my_ace_editor">&lt;p>html&amp;test&lt;/p></div>

这适用于所有模式,而不仅仅是html

如果您不想转义HTML代码,只需使用具有以下类型和样式集的script标记

<script type="text/plain" style="display: block;" id="ace-1">
<a href="test.html">hello world</a>
test test
</script> 

相关内容

  • 没有找到相关文章

最新更新