Question

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

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

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

以前有人这样做过吗？

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

Answer 1

在git svn fetch -r 10000:HEAD文字中使用<img>标记无法使用，因为它不会被解释为HTML。

如果您可以在自动填充对象中包含其他信息，则可以：

meta

从那里，您可以找到创建自动完成弹出窗口的代码，并添加条件if语句，可选择添加completions.push({ name:"testing1", value:"testing1", meta: "code1", icon: "code1.png" });标记。

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）并使用伪类加载它们。在我的情况下，我需要对自动完成弹出窗口中的项目进行一些后期处理，因此我需要听取后续的＆＃39; afterRender＆＃39;像this one这样的事件，以便我可以动态地在其中注入我的图标。

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

3 个答案: