动态更新 Ace Editor 的语法高亮模式规则 [英] Dynamically update syntax highlighting mode rules for the Ace Editor

问题描述

ace 编辑器开发的全新功能，动态地向模式文件添加额外规则以突出显示语法

这是设置和初始 ajax 调用:

var editor = ace.edit("editor");$.ajax({url: "json-mode-rules.php",数据类型:json"}).完成(功能(数据){window.myModeRules=数据；//("foo","bar","etc")editor.getSession().setMode("ace/mode/python");});

模式文件打了以下补丁:

//关键字已经初始化为数组//例如var 关键字 = ("and|as|assert...etc")var extraRules=window.codebenderModeLibrary["myModeRules"].join("|");关键字=(关键字[0]+"|"+ extraRules);

当页面被初始加载时，ace 编辑器会获取所有关键字以进行语法高亮显示.这很好用.

问题是我们在某些事件发生时会更改规则，并希望 ace 编辑器刷新其语法规则.

再次调用 ajax 并调用 setMode 没有任何作用 - 这是由于需要 js 不重新加载文件.

我在 GitHub 上发布了一个问题，但尚未解决:

https://github.com/ajaxorg/ace/issues/1835

<块引用>

"如果你真的想保留全局变量，你可以把所有东西都包裹起来在函数中，调用该函数以获取更新的 Mode 构造函数，以及然后调用 setMode(new Mode)."

我不知道该怎么做，任何帮助将不胜感激.

任何人都知道如何动态更新 ace 编辑器语法高亮规则的技术?

解决方案

参见 https://github.com/ajaxorg/ace/blob/9cbcfb35d3/lib/ace/edit_session.js#L888

setMode 缓存模式，除非它们有选项所以你可以打电话

session.setMode({路径:王牌/模式/蟒蛇"，v:Date.now()})

强制它创建一个新模式.

另一种方法是做

var DynHighlightRules = function() {//添加更改关键字的函数this.setKeywords = 函数(kwMap){this.keywordRule.onMatch = this.createKeywordMapper(kwMap, "identifier")}this.keywordRule = {正则表达式:"\w+",onMatch : function() {return "text"}}this.$规则 = {开始" : [{令牌:字符串"，开始: '"'，结尾: '"'，下一个:[{ token : "language.escape", regex :/\[tn"\]/}]},this.keyword 规则]};this.normalizeRules()};

然后每当高亮规则改变时做

//更新关键字editor.session.$mode.$highlightRules.setKeywords({"keyword": "foo|bar|baz"})//强制重新高亮整个文档editor.session.bgTokenizer.start(0)

见http://jsbin.com/ojijeb/445/edit

Totally new to ace editor dev, to dynamically add additional rules to a mode file for syntax highlighting I'm doing an ajax call that sets a global variable that is available inside the mode file to process.

Here is the setup and initial ajax call:

var editor = ace.edit("editor");

$.ajax({
  url: "json-mode-rules.php",
  dataType: "json"
}).done(function(data) {
    window.myModeRules=data; // ("foo","bar","etc")
    editor.getSession().setMode("ace/mode/python");
});

The mode file is patched with the following:

// keywords has already been initialised as an array
// e.g. var keywords = ("and|as|assert...etc")
var extraRules=window.codebenderModeLibrary["myModeRules"].join("|");
keywords=(keywords[0]+"|"+ extraRules);

When the page is loaded initallly the ace editor gets all the keywords to syntax highlight. This works great.

The issue is that we have the rules changing when certain events occur and would like the ace editor to refresh its syntax rules.

Doing the ajax call again and calling setMode does nothing - this is due to require js not reloading the file.

I have posted an issue on GitHub without a resolution yet:

https://github.com/ajaxorg/ace/issues/1835

"If you really want to keep global variable, you can wrap everything in a function, call that function to get updated Mode constructor, and then call setMode(new Mode)."

I don't know how to do that and any help would be appreciated.

Anyone with techniques on how to dynamically update ace editor syntax highlighting rules?

解决方案

See https://github.com/ajaxorg/ace/blob/9cbcfb35d3/lib/ace/edit_session.js#L888

setMode caches modes, unless they have options so you can call

session.setMode({
   path: "ace/mode/python",
   v: Date.now() 
})

to force it to create a new mode.

Another way is to do

var DynHighlightRules = function() {
   // add function to change keywords
   this.setKeywords = function(kwMap) {
       this.keywordRule.onMatch = this.createKeywordMapper(kwMap, "identifier")
   }
   this.keywordRule = {
       regex : "\w+",
       onMatch : function() {return "text"}
   }

   this.$rules = {
        "start" : [
            {
                token: "string",
                start: '"', 
                end: '"',
                next: [{ token : "language.escape", regex : /\[tn"\]/}]
            },
            this.keywordRule
        ]
   };
   this.normalizeRules()
};

and then whenever highlight rules change do

// update keywords
editor.session.$mode.$highlightRules.setKeywords({"keyword": "foo|bar|baz"})
// force rehighlight whole document
editor.session.bgTokenizer.start(0)

see http://jsbin.com/ojijeb/445/edit

这篇关于动态更新 Ace Editor 的语法高亮模式规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！