Crear enlace solo al pulsar el botón "OK"
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)
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
Vale, gracias por tu rápida respuesta @artf ¿Cómo mantener el foco en el RTE?
Necesitas detectar eventos que desencadenan un borrón y llamar a 'stopPropagation'. Así es como se mantiene haciendo clic en la barra de herramientas https://github.com/artf/grapesjs/blob/dev/src/rich_text_editor/index.js#L82
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #609
La edición CSS duplica propiedades del cuerpo
Sigue duplicando secciones y propiedades del cuerpo: Cuando lo subo, esto es lo que parece: <img width="472" alt="captura de pantalla 2017-...
Issue #1384
Botón de preajuste del boletín solo ver texto
hiii, Uso latest grapesjs con plugins de presets de newsletter, pero cuando arrastro y suelto el control de botones solo se ve el texto ! c...
Issue #1597
¿Podemos añadir una propiedad redimensionable en el marco gjs-layer-manager?
Hola @artf ¿Es posible añadir la propiedad de redimensionable en el fotograma del gestor de capas como captura de pantalla abajo? ! captura...
Issue #3464
Editar el texto del botón no funciona correctamente
Descripción0 - Visita: https://grapesjs.com/demo.html1 - Botón de seleccionar: <img width="674" alt="Captura de pantalla 2021-05-19 at 15 0...
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 →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.