Tengo estas dos funciones: la primera es para cuando alguien elige una opción del cuadro de selección en la barra de herramientas y la agrega al contenido del editor.

el código está funcionando pero agrega span como este:

<span class="text-tiny">Second Side</span>

Cuando vaya al editor, quiero que sea así:

<span class="text-tiny" id="second_side">Second Side</span>

con identificación en el lapso

El código

 document.addEventListener("DOMContentLoaded", function() { forms.forEach(function(item,index) { var option = document.createElement('option'); option.setAttribute("value",'<span class="text-tiny" id="'+id+item.type+'">'+item.name+'</span> <span></span>'); option.innerHTML = item.name; select.appendChild(option); div.appendChild(select); }); select.addEventListener('change', (e) => { insertHTMLAtCursor(editor,select.value) }); }); function insertHTMLAtCursor(id,value){ // value = <span class="text-tiny" id="second_side">Second Side</span> const viewFragment = id.data.processor.toView(value); const modelFragment = id.data.toModel(viewFragment); id.model.insertContent(modelFragment, id.model.document.selection); }