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

Question

有人可以帮助我如何为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">'，但当然也不能工作。

任何想法如何解决这个问题？非常感谢..

Answer 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创建拉取请求。