Cómo añadir la opción "Lista de pedidos/no ordenados" en rte/bloque personalizado
Por los comentarios anteriores, ahora puedo añadir listas de ordenados y no ordenados. ¿Hay alguna forma de actualizar la lista de pedidos existentes y la lista no ordenada? @artf @rahuloftheramaneffect
Lee la respuesta completa abajo ↓Pregunta
Hola
Estoy intentando crear una lista ordenada con grapesjs. Intenté añadir lo siguiente al RTE:
editor. RichTextEditor.add('orderedList',
{
icono: '1.',
atributos: {título: 'Lista ordenada'},
resultado: rte => rte.exec('insertOrderedList')
});
Y esto funciona si mi página está pre-rellena con html cuando el editor se inicializa, como se indica a continuación:
Editor precompletado: ! 1
Crear lista ordenada: ! 2
Sin embargo, si dejo caer un nuevo bloque en el lienzo y luego pulso el botón de la lista de pedidos, me aparece un mensaje NS_ERROR_ILLEGAL_VALUE, como el siguiente:
Crear un nuevo bloque de párrafos: ! 3
Crear lista ordenada: ! 4
¿Cómo puedo arreglar esto para que:
- ¿podemos insertar listas en bloques recién creados? (Nota al margen: Mi ejemplo muestra que hago esto a través de la barra de herramientas de rte, pero estoy abierto a crear listas en un nuevo tipo de bloque, si eso ayuda y alguien puede decirme cómo hacerlos funcionar.)
- podemos sangrar listas para crear viñetas multinivel (actualmente el comando de sangría mediante el RTE tampoco funciona en bloques nuevos, posiblemente por las mismas razones anteriores)
- (opcionalmente) ¿podemos usar la tecla tab para sangar las listas?
Respuestas (3)
Por los comentarios anteriores, ahora puedo añadir listas de ordenados y no ordenados. ¿Hay alguna forma de actualizar la lista de pedidos existentes y la lista no ordenada?
@artf @rahuloftheramaneffect
¿Puedes crear una demo reproducible, por favor? Ese error sin una pista de pila es inútil
(opcionalmente) podemos usar la tecla tab para sanglar las listas?
Definitivamente deberías hacerlo tú mismo o confiar en algo como CKEditor para un uso más avanzado del texto
¡Eh! Gracias por responder tan rápido.
¿Puedes crear una demo reproducible, por favor? Ese error sin una pista de pila es inútil
Aquí hay un archivo zip que contiene una versión simplificada de mi página de editor. Demo.zip
Incluye un montón de archivos css y js. Las funciones rte mencionadas anteriormente están en editor_rte.js.
Pasos para reproducirse:
- Open index.html (incluye un editor inicializado, algo de texto preexistente y algunos bloques).
- Haz doble clic en el texto preexistente para ver la barra de herramientas RTE. Utiliza los botones de lista a la derecha para verificar que la función de crear lista e indentar contenido funciona sobre texto preexistente.
- Arrastra un bloque de párrafo hacia la página.
- Intenta editar el texto dentro del nuevo bloque, como antes, para crear una lista.
- El error debería haber ocurrido.
(opcionalmente) podemos usar la tecla tab para sangrar las listas?
Definitivamente deberías hacerlo tú mismo o confiar en algo como CKEditor para un uso más avanzado del texto
Ah, vale. Gracias.
Edito: Uso Firefox 68.0.1
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1470
[Pregunta] Posibles fugas de memoria
Hola, estoy trabajando en un proyecto con Angular 6 y estoy investigando una fuga de memoria tras destruir el editor en _previousAttributes...
Issue #572
Problema con el editor de texto enriquecido
¿Cómo añadir el icono de la Lista ordenada en el editor de texto enriquecido? Aquí está mi código. rte.add('insertOrderedList', { Icon: '',...
Issue #1567
Error en la barra de herramientas RTE
Hola a todos, Estoy usando la última versión estable de grapesjs (40) y he notado el siguiente error en el editor de texto enriquecido: si...
Issue #2957
ERROR: No se puede añadir <table> etiqueta para un bloque personalizado
Hola, estoy intentando crear un bloque de temporizador personalizado. El código es el siguiente: Estoy añadiendo contenido dentro de la eti...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.