Imita el comportamiento de un custom RTE al analizar contenido
Ahora que lo pienso un poco más, la opción 1 no me funcionaría porque quiero evitar que se eliminen estilos en línea, así como evitar que se añadan ids/clases/atributos a los elementos hijos. Así que supongo que queda la opción 2 o quizá otra solución que no he pensado.
Lee la respuesta completa abajo ↓Pregunta
Hola @artf,
Me gustaría replicar este comportamiento al llamar a 'editor.setComponents("<div>Esto es un componente de texto. <span style='font-size: 20px;'>Este es un elemento anidado que no quiero que se descifre.</span></div>")`. En ese ejemplo, querría que el 'span' anidado no se analizara como un componente independiente para que no pueda seleccionarlo ni interactuar con él de ninguna manera (de forma similar a si hubiera activado/desactivado un customRTE en el 'div').
Veo dos opciones aquí:
- Después de llamar a 'editor.setComponents', habilitar y desactivar programáticamente RTE en el div externo para que los elementos y el texto hijos se traten como 'contenido' en el 'div'. Estoy bastante seguro de que esto funcionaría sin hacer ningún cambio en el núcleo de Grapesj... Aún no lo he probado.
- Modificar el comportamiento de 'ParseHtml.parseNode' para identificar de alguna manera que el 'div' no debe analizar sus elementos/texto hijo. Quizá algo así usando una nueva propiedad devuelta desde 'isComponent':
var defaultType = editor. DomComponents.getType("default");
editor. DomComponents.addType('some-custom-component-type', {
model: defaultType.model.extend(
{
},
{
isComponent: function(el) {
if(el.hasAttribute && el.hasAttribute("data-some-custom-component-type")){
return {
tipo: 'tipo-alguno-componente-personalizado',
parseChildContent: falso // nueva propiedad que indicará al analizador que no se moleste en analizar a los niños
};
}
}
}
),
view: defaultType.view
});
... // cambios a ParseHtml.parseNode() abajo
if (nodeChild === 1 & firstChild.nodeType === 3) {
!model.type & & (model.type = 'texto');
model.content = firstChild.nodeValue;
} si no (model.hasOwnProperty("parseChildContent") && !model.parseChildContent) { // comprueba la nueva propiedad para evitar el comportamiento de análisis por defecto del nodo
model.content = node.innerHTML;
} else {
model.components = this.parseNode(node);
}
...
editor.setComponents ("<div data-some-custom-component-type> Este es un componente de texto. <span style='font-size: 20px;'>Este es un elemento anidado que no quiero que se descifre.</span></div>")
¿Alguna idea sobre explorar la opción 2? ¿Considerarías aceptar una solicitud pull que añada esa nueva funcionalidad al analizador? No necesariamente tendría que estar impulsado por un componente personalizado... Creo que una propiedad como 'data-parse-child-content="false"' también podría ser una opción, o quizás simplemente reconocer que se está usando un RTE personalizado y simplemente comprobar 'model.type === "text"' en lugar de 'parseChildContent'.
Mi caso de uso es que voy a usar un RTE personalizado, pero hay muchas probabilidades de que el contenido que inicialmente se inserte en el editor tenga muchos componentes de texto anidados que me gustaría tratar como un solo componente.
Respuestas (3)
Ahora que lo pienso un poco más, la opción 1 no me funcionaría porque quiero evitar que se eliminen estilos en línea, así como evitar que se añadan ids/clases/atributos a los elementos hijos. Así que supongo que queda la opción 2 o quizá otra solución que no he pensado.
Oye Ryan, ¿qué pasa con este componente personalizado? '''js const domc = editor. DomComponents; const textType = domc.getType('text');
domc.addType('raw-text', { model: textType.model.extend({ },{ isComponent: function(el) { if (el.hasAttribute && el.hasAttribute('data-raw-text')) { return { Tipo: 'texto en bruto', contenido: el.innerHTML, componentes: [] // Esto evitará analizar a los niños }; } } } ), view: textType.view.extend({ disableEditing() { modelo const = este.modelo; const rte = this.rte;
si (rte && model.get('editable')) { rte.disable(this, this.activeRte); model.set('content', this.getChildrenContainer().innerHTML) .trigger('change:content', modelo); }
this.rteEnabled = 0; this.toggleEvents(); }, }) });
¡Gracias @artf! Apuesto a que tu sugerencia me funcionará: lo probaré en las próximas horas.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1421
[Bug]: clase "deshabilitada" en lugar de "activa" para la Vista de Botones del Panel
Hola Supongo que hay un error con la clase cuando el Botón del Panel está desactivado https://github.com/artf/grapesjs/blob/dev/src/panels/...
Issue #589
Atributos que no se aplican a los rasgos
https://github.com/artf/grapesjs/blob/9bcd9673b10af1bb696181deba6903a68b1b6c3f/src/trait_manager/view/TraitView.js#L86 '''js Rasgos: [ { Ti...
Issue #792
La propiedad de script usando función no funciona con bloques
En la documentación de Componentes & JS hay este ejemplo: Esto funciona perfectamente. Pero no podría usar una función en lugar de una cade...
Issue #1991
[PREGUNTAS] redimensionable, usando unitWidth en salida px en porcentaje.
Hola @artf, Gracias por crear este marco. Recientemente hice un componente personalizado basado en tu plugin flexbox. ! demo La flecha roja...
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.