Actualización de 'RichTextEditor'
Propone un cambio en las acciones para tener un estado, que es una función opcional que devuelve un entero para representar el estado de cada acción; 1 para activo, 0 para inactivo, -1 para discapacitado. Gracias por la sugerencia, creo que podría ser buena idea hacer este tipo de comprobación personalizada, así que a...
Lee la respuesta completa abajo ↓Pregunta
Hola @artf, Estoy pensando en abrir una PR para una actualización sobre el 'RichTextEditor'. Pensé en plantearte la idea antes de ponerme a trabajar en ella. Propone un cambio en las acciones para tener un 'estado', que es una función opcional que devuelve un entero para representar el estado de cada acción; 1 para activo, 0 para inactivo, -1 para discapacitado. Esto permite esencialmente la posibilidad de establecer el estilo y la funcionalidad de las acciones sin tener que establecer el campo 'name' del objeto igual que el parámetro 'Document.queryCommandSupported' o 'Document.queryCommandState'. Si no se proporciona ninguna función de 'estado', podemos recurrir por defecto a la lógica anterior Un ejemplo de uso para esto: insertar y retirar un ancla:
editor. RichTextEditor.add('insertAnchor', {
icono: '<i class="fa fa-link"/>',
attributes: {título: 'Insertar enlace'},
estado: (doc, rte) => {
ancla const = rte.selection().anchorNode;
const nextSibling = anchor & & anchor.nextSibling;
if (nextSibling && nextSibling.nodeName == 'A') {
Si hemos seleccionado una etiqueta de ancla, devuelve positivo
retorno 1;
} else {
Como puedes anidar etiquetas de anclaje, técnicamente no queremos 'desactivar' este comando
Así que devolvemos 0 para inactivo.
return 0;
}
},
resultado: rte => rte.insertHTML('<a class="link" href="">${rte.selection()}</a>')
});
editor. RichTextEditor.add('removeAnchor', {
icono: '<i class="fa fa-unlink"/>',
attributes: {título: 'Eliminar enlace'},
estado: (doc, rte) => {
ancla const = rte.selection().anchorNode;
const nextSibling = anchor & & anchor.nextSibling;
if (nextSibling && nextSibling.nodeName == 'A') {
Si hemos seleccionado una etiqueta de ancla, devuelven 0 para inactivo, lo que significa que podemos activar este comando.
return 0;
} else {
Sin embargo, si no han seleccionado una etiqueta de ancla, esta acción debería ser 'deshabilitada'
retorno -1;
}
},
Resultado: RTE => rte.exec('desvincular')
});
Además, ¿qué opinas de la idea de pasar un array vacío a 'acciones' en la configuración, sin renderizar ninguna de las acciones por defecto? Digo esto porque estoy creando mi propio RTE sin usar CKEditor (ya que CKEditor tiene un comportamiento inusual con componentes personalizados), y para no renderizar primero la acción 'negrita', la paso en la configuración 'acciones: ['negrita']', pero luego en 'editor'. RichTextEditor.remove('bold')', ya que me gustaría tener otros comandos antes del negrita y esta es la única forma que se me ocurre para hacerlo
Estoy muy contento de trabajar en esto, solo quería pedir vuestras opiniones/preocupaciones y bendición primero
Respuestas (1)
Propone un cambio en las acciones para tener un estado, que es una función opcional que devuelve un entero para representar el estado de cada acción; 1 para activo, 0 para inactivo, -1 para discapacitado.
Gracias por la sugerencia, creo que podría ser buena idea hacer este tipo de comprobación personalizada, así que adelante. Recuerda añadir algún ejemplo aquí
Además, ¿qué opinas de la idea de pasar un array vacío a acciones en la configuración, sin renderizar ninguna de las acciones por defecto
Sería un cambio radical, así que me gustaría evitarlo.
estoy creando mi propio RTE sin usar CKEditor (ya que CKEditor tiene un comportamiento inusual con componentes personalizados), y para no renderizar primero la acción en negrita, la paso en las acciones: configuración ['negrita'], pero luego editor. RichTextEditor.remove('bold'), ya que me gustaría tener otros comandos antes del negrita y esta es la única forma que se me ocurre para hacerlo
Bueno, si estás creando un plugin para el RTE integrado y quieres eliminar todas las acciones iniciales, puedes hacer esto: '''js const rte = editor. RichTextEditor; rte.getAll().forEach(action => rte.remove(action.name))
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #3652
[PREGUNTA] Las uvas no reconocen un enlace si cambio un texto por enlace.
Hola @artf ! Captura Soy nuevo en Grapes Js, escribo una función para convertir texto seleccionado en enlace. Funciona bien. Cuando selecci...
Issue #554
Evita el iluminador flotante y evita seleccionar ciertos componentes
Hola @artf, Me gustaría conocer vuestra opinión sobre los siguientes dos puntos antes de enviar una solicitud de tirada. Son para cumplir l...
Issue #3337
Pregunta: Usa las flechas para mover bloques en el lienzo configurado en modo de posicionamiento absoluto
Hola, estoy creando una solución para que los estudiantes cuenten sus experiencias en el instituto como diapositivas hechas desde el editor...
Issue #339
Guarda la plantilla en la base de datos
Hola artf, Gracias por crear un marco tan maravilloso, lo estoy usando para el boletín. Acabo de tener una pregunta sobre cómo puedo almace...
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.