Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

373
Vistas
¿Cómo se agregan viñetas automáticas en TinyMCE?

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?

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

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.

about 4 years ago · Juan Pablo Isaza Denunciar

0

¡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.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda