Question

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

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

然后我使用ace-builds中的文件并尝试使用requirejs获取ace。这是我的代码：

    <!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添加新模式？谢谢！

Answer 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需要在主要需求的依赖列表中，触发require.js处理挂起定义的队列，你需要设置正确的原型并在文本模式下使用带有start / end的规则调用normalizeRules

动态更新Ace Editor + Requirejs的语法突出显示

1 个答案: