我尝试在这里遵循本指南:https://github.com/ajaxorg/ace/wiki/Creating-or-Extending-an-Edit-Mode
...但我想用 Typescript (带有 webpack)来编写它
我似乎找不到对
define
方法的引用,以便我可以使用 ace 注册我的编辑模式,以便稍后通过 setMode()
设置。
我应该如何使用 Typescript 设置 ace 的编辑模式?
我知道这是一个超级晚的答案,但以防万一有人正在寻找它。
我在
Svelte
ts 中这样做了,它有效:
记得安装Ace依赖项:
npm i ace-builds
npm i brace
使用此解决方案,您无需为其创建新的模式文件。
import ace from 'ace-builds';
import 'brace';
import 'brace/ext/searchbox';
//Support function to create Ace mode
function createAceMode(modeName: string, highlighterObj: ace.Ace.HighlightRulesMap) {
(ace as any).define(modeName, ["require", "exports", "module"], function (require: any, exports: any, module: any) {
console.log(require);
var oop = require("ace/lib/oop");
var TextMode = require("ace/mode/text").Mode;
var TextHighlightRules = require("ace/mode/text_highlight_rules").TextHighlightRules;
var WorkerClient = require("ace/worker/worker_client").WorkerClient;
var myHighlightRules = function () {
this.$rules = highlighterObj;
};
oop.inherits(myHighlightRules, TextHighlightRules);
var CustomMode = function () {
this.HighlightRules = myHighlightRules;
};
oop.inherits(CustomMode, TextMode);
(function () {
//Create worker for live syntax checking
this.createWorker = function(session: ace.Ace.EditSession) {
session.on("change", function() {
session.clearAnnotations();
let annotations: ace.Ace.Annotation[] = [];
for(let row = 0; row < session.getLength(); row++) {
let tokens = session.getTokens(row);
if (!tokens || tokens.length == 0) continue;
tokens.forEach(token => {
if (token.type === "invalid") annotations.push({row: row, column: 0, text: "This need to be fixed!", type: "error"});
});
}
session.setAnnotations(annotations);
});
}
this.$id = modeName;
}).call(CustomMode.prototype);
exports.Mode = CustomMode;
});
}
//Usage
createAceMode("mmd", {
"start": [
{token: "invalid", regex: /(OMIT_CATCH|Not support.*|\<(.*?)\>)/},
{token: "section.property", regex: /\[(.*?)\]/},
{token: "def", regex: /\b.*([a-zA-Z0-9_.-]+)\b(\s*)(=)/},
{token: "variable", regex: /#\b([a-zA-Z0-9_.-]+)\b(\s*)(=)/},
],
});
//Options:
let aceEditorDefaultOptions: ace.Ace.EditorOptions = {
minLines: 24,
mode: "mmd", //Required matching the name you already defined above, else get error
showPrintMargin: false,
useWorker: true, // lint-like annotations through workers
} as ace.Ace.EditorOptions;
//Init Editor
ace.edit(editorElement, {...aceEditorDefaultOptions});