我们可以在 ACE 编辑器自动完成中使用图标吗

Question

我知道我可以在 ACE 编辑器中添加一个自动完成列表，如下所示

completions.push({ name:"testing1", value:"testing1", meta: "code1" });
completions.push({ name:"testing2", value:"testing2", meta: "code2" });

我的要求是在自动完成弹出窗口中的 "code1" 旁边添加一个图标。我尝试在元值中使用 <img> 但它没有用。我看到了 ace 的源代码，但没有看到实现它的方法。

以前有人做过吗？

更新：我自己做了，并在下面的答案中添加了详细信息

Answer 1

在 meta 文本中使用 <img> 标签将不起作用，因为它不会被解释为 HTML。

如果您可以在自动完成对象中包含其他信息，您可以：

completions.push({ name:"testing1", value:"testing1", meta: "code1", icon: "code1.png" });

从那里，您可以找到创建自动完成弹出窗口的代码，并添加一个条件 if 语句，该语句可以选择添加一个 <img> 标记。

Answer 2

我通过 css 找到了一种方法。

向完成对象添加了className属性

completions.push({ name:"test", value:"test", meta: "test", className:"iconable"});

并在 css 中添加了图标：

.ace_iconable:after
{
    content: " \f14c"; /* in my case it is font-awesome icon*/
    font-family: FontAwesome;
}

Answer 3

Ace.Tern 扩展支持在自动完成扩展中使用 iconClass 属性。参见 it on github

然而，这不是 Ace 编辑器中当前的内容。我会说，如果您只需要支持静态样式，请使用 className 属性（请参阅 it on github) and using before pseudo class to load them. In my case I need to do some post processing of the items in autocomplete popups, hence I need to listen to the 'afterRender' events like this one，这样我就可以在其中动态注入我的图标。

我们可以在 ACE 编辑器自动完成中使用图标吗

Can we use an icon in ACE editor's autocomplete

javascript

ace-editor