Muchas aplicaciones (como Slack) tienen una función útil en la que si escribe un guión - presiona espacio en una nueva línea, la línea se transformará automáticamente en una viñeta (también conocida como lista desordenada). ¿Cómo se logra esta funcionalidad en TinyMCE?
Como textpattern , el complemento de patrón de texto en TinyMCE le brinda una forma de insertar listas usando (de forma predeterminada) texto de estilo de marcado:
https://www.tiny.cloud/docs/plugins/opensource/textpattern/
Las opciones específicas de la lista son:
// The following text patterns require the `lists` plugin {start: '1. ', cmd: 'InsertOrderedList'}, {start: '* ', cmd: 'InsertUnorderedList'}, {start: '- ', cmd: 'InsertUnorderedList' }Esto no requiere codificación para implementar y le permite determinar el texto que puede iniciar una lista. El ejemplo anterior permite que una lista comience con un asterisco o un guión, pero puede personalizar esa lista según sus necesidades.
¡Me alegra que hayas preguntado! Realicé algunas iteraciones en esta solución antes de encontrar una que parecía funcionar bastante bien.
Primero, definí tanto el carácter desencadenante para Autobullets (guion) como los contenedores HTML dentro de los cuales me gustaría que se active Autobullet (en este caso, párrafos, divs, celdas de tabla y tramos):
const AUTOBULLET_TRIGGER_CHARACTER = "-"; const AUTOBULLET_VALID_CONTAINERS = [ "HTMLTableCellElement", "HTMLParagraphElement", "HTMLDivElement", "HTMLElement", ];Luego, agregué este controlador de eventos en la configuración del editor, con comentarios:
editor.on("KeyUp", function (e) { var sel = editor.selection.getSel(); var caretPos = sel.anchorOffset; var txtData = sel.anchorNode.textContent; // Char code 160 is a non breaking space const lineMatch = `${AUTOBULLET_TRIGGER_CHARACTER}${String.fromCharCode( 160 )}`; if (e.key === " " && caretPos === 2 && txtData === lineMatch) { if ( AUTOBULLET_VALID_CONTAINERS.includes( sel.focusNode.parentElement.constructor.name ) ) { // Create an unordered list editor.execCommand("InsertUnorderedList", false); // Delete the last two characters from the cursor position, // which we know are "- " since that's what triggered the autobullet // // Modified from https://stackoverflow.com/a/43798749 const edRange = editor.selection.getRng(); const edNode = edRange.commonAncestorContainer; let range = document.createRange(); // create a new range object for the deletion range.selectNodeContents(edNode); range.setStart(edNode, edRange.endOffset - 2); // current caret pos - 3 range.setEnd(edNode, edRange.endOffset); // current caret pos range.deleteContents(); } } }); Como puede ver, el controlador detecta si en keyUp el usuario ha activado o no el carácter y el espacio. Luego, insertamos la lista desordenada (críticamente, usamos el comando InsertUnorderedList , ya que insertar un ul y un li sin procesar parece romper la funcionalidad de la lista) y eliminamos los activadores de guión/espacio.