Issue #1358💬 RespondidoAbierto el 13 de agosto de 2018por alimajed93Reacciones 0

Crear enlace solo al pulsar el botón "OK"

Respuesta rápidapor artf

1 - ¿Cómo puedo comprobar la implementación de la acción "Enlace" del richTextEditor en "editor de boletín de demostración" para poder replicarla? Dado que ahí y si el modal se cierra sin enviar, el enlace no se crea. Ese modal es de CKEditor2-Why richTextEditor.exec('createLink', 'new'); ¿O rte.insertHTML(<a class="l...

Lee la respuesta completa abajo ↓

Pregunta

Hola a todos,

Sobrescribí el acto predeterminado 'Enlace' del editor de texto enriquecido:
<img width="1274" alt="captura de pantalla 2018-08-13 a las 1 58 43 pm" src="https://user-images.githubusercontent.com/28840780/44027999-2788cfaa-9f01-11e8-9f5e-e24d3ced19ed.png">

Ahora, al hacer clic, se abre un modal donde el usuario puede añadir la URL deseada, la visualización de texto y el destino y enviar. Algo similar a la implementación que ahora está disponible en "demo newsletter editor" usando el "grapesjs-plugin-ckeditor", creo. <img width="1275" alt="captura de pantalla 2018-08-13 a las 1 56 45 pm" src="https://user-images.githubusercontent.com/28840780/44028062-57f71a34-9f01-11e8-980a-2e846b70dce0.png">

Probé la misma implementación sugerida en el siguiente número: Número 610 Pruébalo aquí

El problema de esta implementación es que el enlace se crea incluso antes de que se abra el modal, lo cual no es óptimo para la experiencia del usuario; Si el usuario cierra el modal e incluso sin enviarlo, el enlace se creará de todos modos.

Mis preguntas son: 1 - ¿Cómo puedo comprobar la implementación de la acción "Enlace" del richTextEditor en "demo newsletter editor" para poder replicarla? Dado que ahí y si el modal se cierra sin enviar, el enlace no se crea. He descargado el código fuente de "grapesjs-preset-newsletter": Código fuente
pero solo puedo ver la siguiente implementación de la acción
'enlace: {
icono: '<span style="transform:rotate(45deg)"></span>',
Nombre: 'Link',
atributos: {
estilo: 'tamaño-fuente:1.4rem; relleno:0 4px 2px;',
título: 'Link'
},
Resultado: RTE =>
rte.insertHTML(<a class="link" href="">${rte.selection()}</a>)
}` lo cual no lleva a abrir el modal del que hablo. También descargué el código fuente de ckeditor: Código fuente y aún así no encontré la implementación.

2-¿Por qué 'richTextEditor.exec('createLink', 'new');' o 'rte.insertHTML(<a class="link" href="">${rte.selection()}</a>)' no conducen a la creación del enlace si se colocan en el evento de clic de un botón? Así que si esos dos comandos se ejecutan solo al pulsar el botón (ok del modal), el enlace no se crea.

Gracias

Respuestas (3)

artf13 de agosto de 2018

1 - ¿Cómo puedo comprobar la implementación de la acción "Enlace" del richTextEditor en "editor de boletín de demostración" para poder replicarla? Dado que ahí y si el modal se cierra sin enviar, el enlace no se crea.

Ese modal es de CKEditor

2-Why richTextEditor.exec('createLink', 'new'); ¿O rte.insertHTML(<a class="link" href="">${rte.selection()}</a>) no lleva a crear el enlace si se coloca en un evento de clic de botón? Así que si esos dos comandos se ejecutan solo al pulsar el botón (ok del modal), el enlace no se crea.

Probablemente porque te desenfocas del componente, de hecho tu problema de 'el enlace se crea incluso antes de que se abra el modal' es porque estás ejecutando la creación del enlace antes de que el enlace esté confirmado. Así que mantén el enfoque y podrás ejecutarlo más adelante

alimajed9313 de agosto de 2018

Vale, gracias por tu rápida respuesta @artf ¿Cómo mantener el foco en el RTE?

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 →

Tutoriales relacionados

Guías detalladas sobre el mismo tema.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.