Not able to add attribute like Id or class for any tag in trix-editor while inserting HTML programmatically

Question

I am trying to add attribute like id, class for span tag in trix-editor while inserting the html through java-script but when I checked the DOM for that tag, editor removing the added attributes from tag.

My Java-script code to insert html with attribute:

element.editor.insertHTML("<span id='" + userId + "' class='mention-user'>" + userName + "</span >"); 

DOM:

 <div><!--block-->@<span style="font-size: 12px;">abc/span></div></trix-editor>

Even I have tried:

element.editor.activateAttribute("href", "https://trix-editor.org/");

this is working fine but not able to add id or class. can anybody have an idea to add id or class in tag?

Answer 1

You can use it with more than 1 way

plain js :

document.getElementsByTagName("span")[0].setAttribute("class", "mention-user");

document.getElementsByTagName("span")[0].setAttribute("id", userId);

or jquery:

$("span").attr("id",userId);
$("span").attr("class","mention-user");

Not sure why but you use insertHtml dont know if you can add id or class with it hope that answer your question