Ace — это встраиваемый редактор кода, написанный на JavaScript. Он соответствует функциям и производительности встроенных редакторов, таких как Sublime, Vim и TextMate. Он может быть легко встроен в любую веб-страницу и приложение JavaScript. Без сомнения, ACE — это любимый редактор кода, написанный на Javascript многими разработчиками, которые хотят предоставить возможность редактировать файлы кода на лету в своих приложениях. Очень обычная вещь, которую вам нужно сделать, когда кто-то выбирает файл для загрузки в ACE, это то, что вам нужно включить правильный режим, чтобы обеспечить лучший пользовательский опыт (проверка ошибок, выделение и т. Д.).
Однако эта задача не будет выполнена в одиночку, поскольку ACE не будет анализировать код для проверки языка программирования предоставленного текста. В этой статье вы узнаете, как установить режим автоматически
Реализация
Следующая реализация будет работать хорошо, если вы не хотите использовать встроенный модуль, который облегчает задачу, для решения этой задачи:
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);Однако вам нужно будет создать огромный список, чтобы охватить все возможные расширения и языки программирования (если вы действительно хотите реализовать это самостоятельно, вы можете проверьте исходный код файла ext-modelist в Github, чтобы получить полный список расширений). Итак, как правильно (и легко) сделать это? Просто используйте расширение моделиста редактора ACE, в котором уже записаны все возможные расширения файлов и режим для ACE, и все готово.
modelist.js файл обычно находится в src/ext-modelist.js, так что вам нужно добавить его с тегом script в вашем документе:
И тогда вы сможете потребовать это с помощью require("ace/ext/modelist") или же ace.require("ace/ext/modelist") в соответствии с версией ACE, которую вы используете:
/**
* 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. Удачного кодирования!
