如何在自动完成 ace 编辑器中添加 html？答案

【问题标题】：How to add html in autocomplete ace editor?如何在自动完成 ace 编辑器中添加 html？
【发布时间】：2016-12-29 19:44:33
【问题描述】：

有人可以帮助我如何自定义 ace 编辑器的自动完成功能吗？我需要显示emoji images，如下所示：

这个编辑器对我来说很好用，但我需要将表情符号图像插入到自动完成的结果中。

var editor = ace.edit('editor');
editor.setTheme('ace/theme/github');
editor.getSession().setMode('ace/mode/markdown');
editor.$blockScrolling = Infinity; //prevents ace from logging annoying warnings
editor.getSession().on('change', function () {
    draceditor.val(editor.getSession().getValue());
});
editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: true
});

// Ace autocomplete
var emojiWordCompleter = {
    getCompletions: function(editor, session, pos, prefix, callback) {
        var wordList = emojis; // list emojis from `atwho/emojis.min.js`
        var obj = editor.getSession().getTokenAt(pos.row, pos.column.count);
        var curTokens = obj.value.split(/\s+/);
        var lastToken = curTokens[curTokens.length-1];

        if (lastToken[0] == ':') {
          console.log(lastToken);
          callback(null, wordList.map(function(word) {
              return {
                  caption: word,
                  value: word.replace(':', '') + ' ',
                  meta: 'emoji' // this should return as text only.
              };
          }));
        }
    }
}
editor.completers = [emojiWordCompleter]

我的坏主意，我试试这个meta: '<img src="/path/to/emoji.png">'，但它当然行不通。

知道如何解决这个问题吗？之前非常感谢..

【问题讨论】：

标签： autocomplete ace-editor

【解决方案1】：

没有内置的方法可以做到这一点。您可以创建一个类似于https://github.com/c9/c9.ide.language.core/blob/bfb5dd2acc/completedp.js#L44 的自定义渲染器，或者修改https://github.com/ajaxorg/ace/blob/master/lib/ace/autocomplete/popup.js 并创建对ace 的拉取请求。

【讨论】：