Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

377
Views
¿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 answers
Answer question

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 Report

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!