Можем ли мы использовать значок в автозаполнении редактора ACE

Question

Я знаю, что могу добавить список автозаполнения в редакторе ACE, как показано ниже

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

Мое требование - добавить иконку рядом с "code1" во всплывающем окне автозаполнения. Я пытался использовать <img> в мета-стоимости, но это не сработало. Я видел исходный код туза, но не нашел способа его реализовать.

Кто-нибудь делал это раньше?

Обновление: я сделал это сам и добавил подробности в ответ ниже

Answer 1

Я нашел способ сделать это через 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 2

Используя <img> тег в meta текст не будет работать, потому что он не интерпретируется как HTML.

Если вы можете включить дополнительную информацию в объекты автозаполнения, вы можете:

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

Оттуда вы можете найти код, который создает всплывающее окно автозаполнения и добавить условный оператор if, который необязательно добавляет <img> тег.

Answer 3

Расширение Ace.Tern поддерживает использование свойства iconClass в расширении автозаполнения. Смотрите это на GitHub

Однако это не то, что в настоящее время в редакторе Ace. Я бы сказал, если вам нужно поддерживать только статические стили, используя свойство className (см. Его на github) и используя перед псевдо-классом их загрузку. В моем случае мне нужно выполнить некоторую постобработку элементов во всплывающих окнах автозаполнения, поэтому мне нужно прослушивать события afterRender, подобные этому, чтобы я мог динамически вставлять в них свои значки.