如何在自動完成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創建拉取請求。