Creé un nuevo botón en la barra de herramientas de TinyMCE. Su propósito es agregar una nueva clase en el texto seleccionado. Está funcionando, pero en algunos casos la etiqueta existente se reemplaza al agregar la nueva clase.

Por ejemplo:

 <p> dummy text dummy text <strong> dummy text </strong> <p>

Algunas veces, la etiqueta strong se elimina si selecciono el contenido en la etiqueta strong . Sin embargo, esto no solo sucede en las etiquetas strong , sino también en las etiquetas span , em , u .

 setup: function(editor) { editor.addButton('addClasses', { menu: [{ onclick: function(e) { let ed = tinyMCE.activeEditor; let content = ed.selection.getContent({ 'format': 'html' }); let new_selection_content = `<span class="text-${color}">${content}</span>`; ed.execCommand('mceInsertContent', false, new_selection_content); } } } }

Debo mantener las etiquetas existentes y solo quiero agregar la nueva clase en el texto seleccionado. ¿Cómo puedo lograr mi tarea?

Como referencia, estoy usando TinyMCE versión 4.