XML、JSON 的 Ace 模式有效，但不流畅

Question

将 ACE 编辑器实例设置为 JSON 或 XML 语言模式效果很好。

但是我的声明

LiquidMode = ace.require("ace/mode/liquid").Mode,
// fails, ace.require("ace/mode/liquid") returns undefined

然而ace/mode/liquid文件在cdn上定义并由其返回。

感谢您提供任何想法或替代方案。

cdn调用及更多：

<script    src="https://cdn.jsdelivr.net/g/ace@1.2.6(noconflict/ace.js+noconflict/mode-hjson.js+noconflict/mode-liquid.js+noconflict/mode-xml.js+noconflict/theme-chrome.js)">
</script>

// Javascript file
var XMLMode = ace.require("ace/mode/xml").Mode,
    JSONMode = ace.require("ace/mode/json").Mode,
    LiquidMode = ace.require("ace/mode/liquid").Mode; // fails, 
        // ace.require("ace/mode/liquid") returns undefined

...
ace_session.setMode(new JSONMode()); // works great
...
ace_session.setMode(new LiquidMode());

Answer 1

当您使用多文件语法加载 ace.js 时，动态加载不起作用，因为 ace 无法确定从中加载它的 url。

作为解决方法，您可以使用

var url = "https://cdn.jsdelivr.net/ace/1.2.6/noconflict/"
ace.config.set("basePath", url)

见https://github.com/ajaxorg/ace/blob/v1.2.6/lib/ace/config.js#L185

请注意，您不需要传递模式对象，setMode("ace/mode/liquid") 也可以。

<script    src="https://cdn.jsdelivr.net/g/ace@1.2.6(noconflict/ace.js+noconflict/mode-json.js+noconflict/mode-liquid.js+noconflict/mode-xml.js+noconflict/theme-chrome.js)">
</script>

<script >
// Javascript file
var XMLMode = ace.require("ace/mode/xml").Mode,
    JSONMode = ace.require("ace/mode/json").Mode,
    LiquidMode = ace.require("ace/mode/liquid").Mode; 
  debugger  
var editor = ace.edit()   
var url = "https://cdn.jsdelivr.net/ace/1.2.6/noconflict/";
ace.config.set("basePath", url)

editor.setValue("use core::rand::RngUtil;\n\nfn main() {\n    \n}", -1)
editor.setOptions({
    autoScrollEditorIntoView: true,
    maxLines: 15,
});
document.body.appendChild(editor.container)
editor.session.setMode("ace/mode/rust");

</script>

XML、JSON 的 Ace 模式有效，但不流畅

Ace modes for XML, JSON work, but not liquid

ace-editor