我们可以在 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 属性。在 github 上看到它

但是，这不是目前在 Ace 编辑器中的内容。我会说如果你只需要支持静态样式，使用 className 属性(在 github 上看到它(并使用 before 伪类来加载它们。就我而言，我需要对自动完成弹出窗口中的项目进行一些后处理，因此我需要侦听像这样的"afterRender"事件，以便我可以在其中动态注入我的图标。