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

Question

有人可以帮我解决如何为ace编辑器自定义自动完成功能吗？ 我需要显示int x; ... cout << (!x ? "nan" : std::to_string(x)); ，如下所示：

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

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] ，但当然不能正常工作。

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

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