Question

我使用以下内容设置文字：

var someString = 'Mark has solved the problem';
editor.getSession().setValue(someString);

在上述情况下，只需要'标记'以蓝色显示。有没有办法在ace编辑器中加载html标签或操纵某些单词的样式？

Answer 1

您可以创建自定义突出显示规则来执行此操作

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<meta charset="utf-8">
<style type="text/css" media="screen">
    #editor { 
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
</style>
</head>
<body>
 <div id="editor" style="height: 500px; width: 800px"></div>
    
<script src="https://ajaxorg.github.io/ace-builds/src/ace.js"></script>
<script>
define('ace/mode/custom', [], function(require, exports, module) {
var oop = require("ace/lib/oop");
var TextMode = require("ace/mode/text").Mode;
var Tokenizer = require("ace/tokenizer").Tokenizer;
var CustomHighlightRules = require("ace/mode/custom_highlight_rules").CustomHighlightRules;

var Mode = function() {
    this.HighlightRules = CustomHighlightRules;
};
oop.inherits(Mode, TextMode);

(function() {

}).call(Mode.prototype);

exports.Mode = Mode;
});

define('ace/mode/custom_highlight_rules', [], function(require, exports, module) {
var oop = require("ace/lib/oop");
var TextHighlightRules = require("ace/mode/text_highlight_rules").TextHighlightRules;

var CustomHighlightRules = function() {

    var keywordMapper = this.createKeywordMapper({
        "variable.language": "this",
        "keyword":
            "Mark|Ben|Bill",
        "constant.language":
            "true|false|null"
    }, "text", true);

    this.$rules = {
        "start": [            
            {
                regex: "\\w+\\b",
                token: keywordMapper
            },
        ]
    };
    this.normalizeRules()
};

oop.inherits(CustomHighlightRules, TextHighlightRules);

exports.CustomHighlightRules = CustomHighlightRules;
});


var editor = ace.edit("editor");

editor.session.setMode("ace/mode/custom");
var someString = 'Mark has solved the problem';
editor.session.setValue(someString);

</script>
</body>
</html>

＆＃13;

想要在Ace Editor中突出显示/更改某些单词的颜色？

1 个答案: