Question

我正在努力让语法高亮显示工作但是在更改模式时它不起作用

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/monokai.js"></script>
    <script="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/mode-javascript.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script>
    <script src="scripts.js"></script>

scripts.js中

var html = ace.edit("htmlEditor");
var css = ace.edit("cssEditor");
var js = ace.edit("jsEditor");

html.setTheme("ace/theme/monokai");
css.setTheme("ace/theme/monokai");
js.setTheme("ace/theme/monokai");

var JavaScriptMode = ace.require("ace/mode/javascript").Mode;
js.session.setMode(new JavaScriptMode());

Answer 1

你的html <script="中有拼写错误。在ace.js之后还必须插入主题和模式的脚本

最好将名称传递给ace并让它自己加载模式和主题

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script>
<div id="htmlEditor">&lt;html&gt;</div>
<div id="cssEditor">.css { color: red }</div>
<div id="jsEditor">var js</div>
<style>
html, body {
    height: 100%;
}
#htmlEditor, #cssEditor, #jsEditor  {
height:30%
}
</style>
<script>

var html = ace.edit("htmlEditor");
var css = ace.edit("cssEditor");
var js = ace.edit("jsEditor");

html.setTheme("ace/theme/monokai");
css.setTheme("ace/theme/monokai");
js.setTheme("ace/theme/monokai");

html.session.setMode("ace/mode/html");
css.session.setMode("ace/mode/css");
js.session.setMode("ace/mode/javascript");

</script>

＆＃13;

Answer 2

让我问这个问题的是，我打电话给404时遇到了setMode错误

我遍历了代码以查看发生了什么，Ace尝试identify where Ace library并且其文件为located，并且它在页面内的by looking处执行了script tags ，因此if拥有一个lock finding the lib location，并将其设置为basePath，

但是如果Ace是一个缩小的主js文件bundled中的 main.js ，它将失败并返回404

解决此问题

if (window.ace) {
    configureAce();
    //....
}

function configureAce() {
    // this is important in case of bundling , to have Ace knows where
    // its files are located (like themes, workers and modes)
    // and get them from that path
    window.ace.config.set("basePath", "/resources/js/lib/ace");
}

Ace编辑器模式不起作用

2 个答案: