En resumen, estoy tratando de reemplazar el botón de lista desordenada en el editor TinyMCE en WordPress con un nuevo botón que funciona de la misma manera PERO tiene un nuevo menú desplegable que permite a los editores de contenido aplicar una clase personalizada a la lista.
Cuando alguien selecciona un elemento de la lista, no tiene que seleccionar la línea completa para que se formatee correctamente una lista.
Por ejemplo, si seleccionó algún contenido en el editor así (la negrita representa el texto resaltado):
primera línea
Segunda linea
Tercera linea
Y luego presiona el botón de lista desordenada, terminaría con esta lista:
Me gustaría recrear este comportamiento, pero no sé cómo seleccionar todo el camino hasta el final de la línea en la última línea.
Aquí está el código que he creado hasta ahora (en la función onsubmit del administrador de ventanas del editor):
const edRange = editor.selection.getRng(); const edNode = edRange.commonAncestorContainer; var startNode = editor.selection.getStart(); var endNode = editor.selection.getEnd(); var range = document.createRange(); range.setStart(startNode, 0); range.setEnd(endNode, endNode.endOffset); editor.selection.setRng(range); var selectedText = editor.selection.getContent({ format: 'html' }); var listClass = ''; if (e.data.type === '2') { listClass = '--exit-list'; } else if (e.data.type === '3') { listClass = '--checkmark-list'; } else if (e.data.type === '4') { listClass = '--arrow-list'; } if (selectedText.indexOf('<ul>') > -1 || selectedText.indexOf('<ol>') > -1) { var baseRegex = new RegExp('<ul>', 'g'); var altRegex = new RegExp('<ol>', 'g'); selectedText = selectedText .replace(baseRegex, '') .replace(altRegex, '') .replace(/<\/ul>/g, '') .replace(/<\/ol>/g, ''); } if (selectedText.indexOf('<p>') > -1) { var baseRegex = new RegExp('<p>', 'g'); selectedText = selectedText.replace(baseRegex, '<li>').replace(/<\/p>/g, '</li>'); } var returnHTML = '<ul class="' + listClass + '">' + selectedText + '</ul>'; editor.execCommand('mceInsertContent', 0, returnHTML);A decir verdad, sospecho que probablemente también estoy manejando la inserción del marcado de la lista, pero funciona lo suficientemente bien (además de estropear la línea final de la selección).