Issue #2336💬 RespondidoAbierto el 17 de octubre de 2019por adriangrochReacciones 1

Actualización de 'RichTextEditor'

Respuesta rápidapor artf1

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)

artf19 de octubre de 2019

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.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

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.