Issue #2116💬 RespondidoAbierto el 3 de julio de 2019por rahuloftheramaneffectReacciones 1

NS_ERROR_FAILURE en rte.exec

Respuesta rápidapor artf1

¿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)

artf12 de julio de 2019

¿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')}');

rahuloftheramaneffect12 de julio de 2019

¡Esto funcionó perfectamente! ¡Gracias!

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.