Javascript 动态更新Ace编辑器的语法高亮显示+；安魂曲
我需要动态更改需要突出显示的关键字集。是一个类似主题的答案，但我的项目已经有require.js，当我使用响应中的代码时，我有一个错误：Javascript 动态更新Ace编辑器的语法高亮显示+；安魂曲,javascript,requirejs,ace-editor,Javascript,Requirejs,Ace Editor,我需要动态更改需要突出显示的关键字集。是一个类似主题的答案，但我的项目已经有require.js，当我使用响应中的代码时，我有一个错误： Module name "DynHighlightRules" has not been loaded yet for context: _ 然后我使用来自的文件，并尝试使用requirejs获取ace。这是我的代码： <!DOCTYPE html> <html lang="en"> <head> <titl
Module name "DynHighlightRules" has not been loaded yet for context: _
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
#e1 {
position: absolute;
top: 0;
right: 0;
bottom: 50%;
left: 0;
}
</style>
</head>
<body>
<div id="e1">
function foo(items) {
var x = "All this is syntax highlighted";
return x;
}
first second editor
</div>
<script src="require.js"></script>
<script>
require.config({
baseUrl: window.location.protocol + "//" + window.location.host
+ window.location.pathname.split("/").slice(0, -1).join("/"),
paths: {
ace: "/home/sergey/ace-builds-master/src/",
}
});
define("DynHighlightRules", function() {
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 : "constant.language.escape.lsl", regex : /\\[tn"\\]/}]
},
this.keywordRule
]
};
});
require(["ace/ace"], function (ace) {
var editor = ace.edit("e1");
var TextMode = require("ace/mode/text").Mode;
var dynamicMode = new TextMode();
dynamicMode.HighlightRules = require(["DynHighlightRules"]);
editor.session.setMode(dynamicMode);
var tags = ["first", "second"];
dynamicMode.$highlightRules.setKeywords({"keyword": tags.join("|")})
editor.session.bgTokenizer.start(0)
});
</script>
</body>
</html>
王牌
#e1{
位置：绝对位置；
排名：0；
右：0；
底部：50%；
左：0；
}
功能foo（项目）{
var x=“所有这些都是语法突出显示的”；
返回x；
}
第一副编辑
require.config({
baseUrl:window.location.protocol+“/”+window.location.host
+window.location.pathname.split（“/”）.slice（0，-1.join（“/”），
路径：{
ace:“/home/sergey/ace构建主控/src/”，
}
});
定义（“DynHighlightRules”，函数（）{
this.setKeywords=函数（kwMap）{
this.keywordRule.onMatch=this.createKeywordMapper（kwMap，“标识符”）
}
this.keywordRule={
正则表达式：“\\w+”，
onMatch:function（）{return“text”}
}
这是。$rules={
“开始”：[
{
令牌：“字符串”，
开始：“”，
完:"""，
下一步：[{标记：“constant.language.escape.lsl”，正则表达式：/\\[tn”\]/}]
},
这个.keywordRule
]
};
});
要求（[“ace/ace”]，功能（ace）{
var editor=ace.edit（“e1”）；
var TextMode=require（“ace/mode/text”）.mode；
var dynamicMode=new TextMode（）；
dynamicMode.HighlightRules=require（[“DynHighlightRules”]）；
editor.session.setMode（dynamicMode）；
变量标记=[“第一”、“第二”]；
dynamicMode.$highlightRules.setKeywords（{“关键字”：tags.join（“|”）}）
editor.session.bgTokenizer.start（0）
});
谢谢！如果您有require.js，最好的解决方案是将DynHighlightRules放入它自己的文件中，但是如果您更喜欢将其内联，可以执行以下操作
define("DynHighlightRules", function(require, exports, module) {
var oop = require("ace/lib/oop");
var TextHighlightRules = require("ace/mode/text_highlight_rules")
.TextHighlightRules;
module.exports = function() {
this.setKeywords = function(kwMap) {
this.keywordRule.onMatch = this.createKeywordMapper(kwMap, "identifier")
}
this.keywordRule = {
regex: "\\w+",
onMatch: function() {
debugger;
return "text"
}
}
this.$rules = {
"start": [{
token: "string",
start: '"',
end: '"',
next: [{
token: "constant.language.escape.lsl",
regex: /\\[tn"\\]/
}]
},
this.keywordRule
]
};
this.normalizeRules()
}
module.exports.prototype = TextHighlightRules.prototype
});
require(["ace/ace", "DynHighlightRules"], function(ace) {
var editor = ace.edit("e1");
var TextMode = require("ace/mode/text").Mode;
var dynamicMode = new TextMode();
dynamicMode.$id = "DynHighlightRules";
dynamicMode.HighlightRules = require("DynHighlightRules");
editor.session.setMode(dynamicMode);
var tags = ["first", "second"];
dynamicMode.$highlightRules.setKeywords({"keyword": tags.join("|")})
editor.session.bgTokenizer.start(0)
});
require（“DynHighlightRules”）require（[“DynHighlightRules”]）；