为 Ace Editor + Requirejs 动态更新语法高亮答案

【问题标题】：Dynamically update syntax highlighting for the Ace Editor + Requirejs为 Ace Editor + Requirejs 动态更新语法高亮
【发布时间】：2015-02-27 14:54:42
【问题描述】：

我需要动态更改需要突出显示的关键字集。 Here 是类似主题的答案，但我的项目已经有 require.js 并且当我使用响应中的代码时出现错误：

Module name "DynHighlightRules" has not been loaded yet for context: _

然后我使用来自ace-builds 的文件并尝试使用requirejs 获得王牌。这是我的代码：

    <!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>

此代码不起作用。如果我的项目中已经有 requirejs，如何向 ace 添加新模式？谢谢！

【问题讨论】：

标签： javascript requirejs ace-editor

【解决方案1】：

如果您有 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"]);，因为后面的表单不返回模块/ DynHighlightRules 也需要在 main require 的依赖列表中，以触发 require.js 处理待处理定义的队列，并且您需要设置适当的原型并在文本模式下调用 normalizeRules 启用使用带有 start/end 的规则

【讨论】：