Как добавить html в autocomplete ace editor?

Question

Кто-нибудь может помочь мне как настраивать автозаполнение для редактора туза? мне нужно, чтобы отобразить emoji images такие, как показано ниже:

Этот редактор работает хорошо для меня, но мне нужно вставить Emoji изображения в результате автозаполнения.

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 и создать запрос на получение туза.