给定文件扩展名，如何为 Ace Editor 自动选择“模式”

Posted 2023-05-07

【中文标题】给定文件扩展名，如何为 Ace Editor 自动选择“模式”

【英文标题】：How to automatically pick a "mode" for Ace Editor, given a file extension

【发布时间】：2013-03-31 22:58:02

【问题描述】：

我正在开发一个使用 java/scala 后端的项目（准确地说是Lift，尽管这不应该影响这个问题），作为前端的一部分，我们使用Ace Editor。我已经在谷歌上搜索了一段时间，但还没有找到这个问题的答案：

给定一个文件扩展名（例如js、c、cpp、h、java、rb 等），我如何自动选择适当语言的 Ace“模式” ?

我希望避免手动创建地图，例如 js -> javascript, c -> c_cpp, java -> java。是否有可用的 java/scala 库？或者更好的是，Ace 是否以某种方式内置了此功能？

【参考方案1】：

Ace 现在提供了 modelist 扩展来执行此操作。

var modelist = ace.require("ace/ext/modelist")
var filePath = "blahblah/weee/some.js"
var mode = modelist.getModeForPath(filePath).mode
editor.session.setMode(mode) // mode now contains "ace/mode/javascript".

请注意，如果您使用的是 prebuilt 版本的 ace，您需要在页面中包含 ace.js 和 ext-modelist.js 文件。 使用源码版本，需要将ace.require替换为require，require.js会自动加载所有依赖。

有关如何使用它的示例，请参阅 https://github.com/ajaxorg/ace/blob/master/demo/modelist.html 和 https://github.com/ajaxorg/ace-builds/blob/master/demo/modelist.html

【讨论】：

合并了吗？现在怎么用？

更新了答案以包含指向 ace 演示页面的链接。

谢谢先生！这是你的赞成票。在答案中添加了确切的命令，以便于查找。

对我不起作用 Uncaught TypeError: Cannot read property 'getModeForPath' of undefined - ace.require 返回 undefined :(

你是否在演示中包含了ext-modelist.js 文件？

【参考方案2】：

这是我解决它的方法。这是我在 Django 项目中使用的更新版本。

    <script src="% static 'ace/src-noconflict/ace.js' %" type="text/javascript" charset="utf-8"></script>
<script src="% static 'ace/src-noconflict/ext-modelist.js' %"></script>
<script src="% static 'ace/src-noconflict/ext-language_tools.js' %"></script>

<script>
    var modelist = ace.require("ace/ext/modelist");
    var editor = ace.edit("editor");
    editor.renderer.setScrollMargin(40, 150)
    document.getElementById('editor').style.fontSize = '15px';
    editor.setTheme("ace/theme/dracula");

    var full_path = " file.directory_path ";
    document.getElementById("demo").innerHTML = full_path
    var mode = modelist.getModeForPath(full_path);//mode
    console.log(mode);
    editor.session.setMode(mode.mode);
    //Ace editor autocompletion
    editor.setOptions(
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
    );

</script>

【讨论】：

完整路径 = /folder/otherFolder/file.conf

editor.setOptions( enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true );

【参考方案3】：

关键是editor.session.setMode(mode.mode);

<!-- ace editor -->
<script src="/ace/v1_4_11/ace.js"></script>
<script src="/ace/v1_4_11/ext-modelist.js"></script>
<script src="/ace/v1_4_11/ext-language_tools.js"></script>

let editor = null;      // reference to the Ace editor
let aceModeList = null; // used by the Ace editor

function initializeAceEditor() 
    aceModeList = ace.require("ace/ext/modelist");
    editor = ace.edit("aceEditorDiv");


// load the file and set the file-extension specific mode
let mode = aceModeList.getModeForPath(fileName); // detects for example .xml - or any other file extebsion
console.log(`Ace: selected mode = $mode.mode`);
try 
    editor.session.setMode(mode.mode);
 catch (e) 
    console.log("Ace: No specific mode available for file extension");


editor.getSession().setValue(Base64.decode(fileContentB64));

无需在浏览器中预加载特定模式 *.js 文件，例如“mode-xml.js”。相应的模式文件会按需自动加载。

【讨论】：

为了更有帮助，您可以根据要求提供一个基于文件扩展名设置模式的示例。

在这个例子中，模式是根据“fileName”的文件扩展名自动检测的。支持任何文件扩展名，并自动设置相应的模式。 aceModeList.getModeForPath(fileName) 执行此任务 - 您可以查看 Ace 源代码。