Ace編輯器模式不起作用

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，並讓它自己加載模式和主題

 <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> 

Answer 2

讓我問這個問題的是，我調用setMode時遇到404錯誤

我遍歷代碼以查看發生了什么情況，Ace嘗試identify where Ace library及其文件located identify where Ace library ，並by looking頁面中的script tags做到這一點，因此， if它具有lock finding the lib location的lock finding the lib location ，則會進行設置作為它的基本basePath ，

但是如果Ace bundled在一個縮小的主js文件main.js ，它將失敗並返回404 main.js

解決這個

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");
}