NS_ERROR_FAILURE en rte.exec
¿Es un problema con cómo manejan los componentes en grapesjs? ¿Podrías ayudarme a entender por qué podría estar ocurriendo esto y qué puedo hacer para solucionarlo? Sí, así es como funcionan el componente de texto integrado y el RTE, así que yo simplemente actualizaría tu lógica de 'result()' añadiendo una comprobació...
Lee la respuesta completa abajo ↓Pregunta
Actualmente estoy usando GrapesJS para crear un editor para las entradas del blog en mi página web. Una de las cosas que quería cambiar respecto al comportamiento por defecto era la imposibilidad de "desvincular" un fragmento de texto que se había convertido en hipervínculo usando la barra de herramientas de RTE. Así que escribí la siguiente función:
editor. RichTextEditor.add('hipervínculo',
{
Icon: '🔗',
atributos: {título: 'Hipervínculo'},
Resultado: RTE =>
{
var range = rte.selection().getRangeAt(0);
var contenedor = rango.comúnAntepasadoContenedor;
if (container.nodeType == 3)
contenedor = container.parentNode;
if(container.nodeName === "A")
{
var sel = rte.selection();
sel.removeAllRanges();
rango = document.createRange();
rango.selectNodeContents(contenedor);
sel.addRange(rango);
rte.exec('desvincular');
}
si no,
{
var url = window.prompt('Introduce la URL para enlazar a:');
if (URL)
rte.insertHTML('<a class="link" href="${url}">${rte.selection()}</a>');
}
}
});
La función permite desconfigurar un enlace, si el cursor/selección está en cualquier parte del texto del hipervínculo.
Probé esto seleccionando un texto que formaba parte de un párrafo y convirtiéndolo en un hipervínculo de la siguiente manera (el botón de hipervínculo es el botón más a la derecha en la barra de herramientas de RTE): ! PruebaPreparación
[Caso de trabajo] Como puedes ver en el gestor de capas a la izquierda, aunque la selección ("GrapesJS") se ha convertido en un enlace, no será reconocida como un componente nuevo a menos que haga clic fuera del bloque de texto actual.
En ese momento, puedo seleccionar el texto de nuevo y pulsar el botón asociado a mi comando de hipervínculo para desvincular el texto con éxito. ! Caso de trabajo
[Caso de fallo] Sin embargo, si después de crear el enlace hago clic fuera del bloque, el enlace se reconoce como un componente y aparece como hijo del nodo de texto en el gestor de capas.
Ahora, si intento hacer clic dentro del enlace y pulsar el botón, no funciona, sino que muestra un error "NS_ERROR_FAILURE" al ejecutivo http://unpkg.com/grapesjs:43426 ! FailureCase
Los pasos seguidos son exactamente los mismos tanto para el caso de trabajo como para el fallo. Lo único que cambia es que, en el caso de trabajo, creo el enlace y también lo desvinculo sin hacer clic fuera del bloque de texto (es decir, para que grapesjs no trate mi enlace como un componente "nuevo"), mientras que en el caso de fallo, creo el enlace, hago clic fuera y luego intento desvincular el texto haciendo clic dentro del componente recién reconocido.
¿Es esto un problema con cómo manejan los componentes en grapesjs? ¿Podrías ayudarme a entender por qué podría estar ocurriendo esto y qué puedo hacer para solucionarlo?
Información: GrapesJS Versión usada: Últimas de unpkg Navegador: Mozilla Firefox 64.0.4
Respuestas (2)
¿Es un problema con cómo manejan los componentes en grapesjs? ¿Podrías ayudarme a entender por qué podría estar ocurriendo esto y qué puedo hacer para solucionarlo?
Sí, así es como funcionan el componente de texto integrado y el RTE, así que yo simplemente actualizaría tu lógica de 'result()' añadiendo una comprobación de si el componente seleccionado es un enlace, y en ese caso reemplazándolo por otra cosa '''js const comp = editor.getSelected(); comp.is('enlace') && comp.replaceWith('${comp.get('content')}');
¡Esto funcionó perfectamente! ¡Gracias!
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #3381
Cambiar entre componentes da un error máximo de tamaño de pila de llamadas
Hola artf, me gustaría darte las gracias por crear una herramienta tan potente para crear CMS personalizados. Estoy implementando una funci...
Issue #3144
[Pregunta] Cambiar de fábricas por defecto
Hola, estoy usando GrapesJs para plantillar HTML para imprimir, así que necesito las medidas en mm. ¿Hay alguna forma de cambiar la fábrica...
Issue #3004
PREGUNTA: propiedades de estilo personalizadas para cambiar de clase
Hola, Gracias por este buen editor. En mi proyecto, quiero ajustar las clases de componentes usando el gestor de estilos. Por ejemplo, esto...
Issue #1265
Cómo usar funciones PHP dentro de un editor de iframe ???
Hola @artf, Actualmente estoy trabajando en PHP, WordPress y Grapesjs. Lo que quería aquí era... ¿Cómo puedo añadir las funciones PHP dentr...
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.