Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

370
Visualizações
¿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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda