如何根据文件的文件扩展名设置ACE编辑器模式

Ace是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime, Vim和TextMate等本机编辑器的功能和性能相匹配。它可以轻松地嵌入任何网页和JavaScript应用程序中。毫无疑问, ACE是许多开发人员最喜欢用Javascript编写的代码编辑器, 它们希望提供在其应用程序中即时编辑代码文件的功能。当有人选择要加载到ACE中的文件时, 你需要做的一个非常平常的事情是你需要启用正确的模式以提供更好的用户体验(错误检查, 突出显示等)。

但是, 此任务不会单独完成, 因为ACE不会分析代码以检查Provided文本的编程语言。在本文中, 你将学习如何自动设置模式

实现

如果你不想使用使事情变得更容易的内置模块来完成此任务, 则以下实现将很好地工作：

function autoImplementedMode(filename){
    var ext = filename.split('.').pop();
    var prefix = "ace/mode/";

    if(!ext){
        return prefix + "text";
    }

    /**
     *  Functional, but inefficient if you want to write it by yourself ....
     */
    switch (ext) {
        case "js":
        return prefix + "javascript";
        case "cs":
        return prefix + "csharp";
        case "php":
        return prefix + "php";
        case "rb":
        return prefix + "ruby";
    }
}


var filename = "myfile.js";
// In this case "ace/mode/javascript"
var mode = autoImplementedMode(filename);
editor.getSession().setMode(mode);

但是, 你需要创建一个庞大的列表以涵盖所有可能的扩展和编程语言(如果你确实要自己实现此功能, 可以在Github中检查ext-modelist文件的源代码以进行检索扩展程序的完整列表)。那么, 正确(简便)的方法是什么？只需使用ACE编辑器的建模专家扩展程序, 该扩展程序已经为ACE编写了所有可能的文件扩展名和模式, 你就可以开始使用。

modelist.js文件通常位于src / ext-modelist.js中, 因此你需要在文档中添加带有script标记的文件：

<script src="./ace/src/ext-modelist.js"></script>

然后, 你可以根据所使用的ACE版本使用require(” ace / ext / modelist”)或ace.require(” ace / ext / modelist”)进行要求：

/**
 * Returns the correct mode for ace editor according to the file extension of a filename.
 * 
 * @param path {String} filename or extension (.js, .txt)
 */
function getModeByFileExtension(path){
    var modelist = ace.require("ace/ext/modelist");
    return modelist.getModeForPath(path).mode;
}


var filename = "myfile.js";
// In this case "ace/mode/javascript"
var mode = getModeByFileExtension(filename);
editor.getSession().setMode(mode);

如果以前的代码片段不足以满足你的需求, 请使用Github中的modelist扩展查看演示的源代码。编码愉快！