Integración de componentes personalizados
Vale, pero ¿qué harás con la salida (componentes Angular) del editor? Quiero decir, ¿cómo lo vas a usar al final? En fin, veo dos enfoques diferentes para este tipo de situación:Crear un render personalizado para cada componente (exactamente lo que he creado con MJML). Este es el enfoque más preciso porque debería ver...
Lee la respuesta completa abajo ↓Pregunta
¡Hola!
Quiero integrar un componente personalizado con GrapesJS, usando Angular CLI 7, pero no se renderiza.
Mi componente está construido sobre otro componente de código abierto. Cuando quiero incluirlo en cualquier proyecto de Angular, simplemente importaría las dependencias/bibliotecas en los archivos typescript y el propio componente (por ejemplo: <h2> <custom-comp> </custom-comp> </h2>) en el HTML.
Para usarlo dentro de GrapesJS, inicialmente creé un Gestor de Bloques, donde adjunté mi componente personalizado:
var editor = grapesjs.init({...});
var blockManager = editor. Jefe de bloque;
blockManager.add('custom-comp', {
etiqueta: 'Bloque personalizado',
contenido: '<div> <custom-comp> </custom-comp> </div>',
});
Pero este enfoque parece funcionar solo para componentes de GrapesJS, así que intenté seguir esta implementación
https://github.com/artf/grapesjs-mjml .
¿Sería suficiente si uso solo:
var type = 'custom-comp';
blockManager.addType(type, {
isComponent(el) {
if(el.tagName == type.toUpperCase())
{return {type, content:el.innerHTML} }
}
}).
No entiendo muy bien si model() y view() son obligatorios de definir ni su uso. ¿Mi componente seguiría renderizándose sin incluir estos? (como se sugiere aquí: https://github.com/artf/grapesjs-mjml/blob/master/src/components/Text.js)Respuestas (3)
Vale, pero ¿qué harás con la salida (componentes Angular) del editor? Quiero decir, ¿cómo lo vas a usar al final? En fin, veo dos enfoques diferentes para este tipo de situación:
-
Crear un render personalizado para cada componente (exactamente lo que he creado con MJML). Este es el enfoque más preciso porque debería ver en el lienzo el componente exacto del framework (por ejemplo, obviamente si el renderizador usa el mismo "compilador", en tu caso el framework Angular). Probablemente no sea el enfoque más fácil, ya que tienes que adquirir un buen conocimiento de ambos frameworks (por ejemplo, en tu caso Angular y GrapesJS), pero sin duda el mejor a largo plazo, una vez implementado el renderizador, se podrían integrar nuevos componentes sin complicaciones
-
Puedes crear una especie de componente marcador, cuando el resultado siempre será un HTML de tus componentes Angular, pero la vista depende totalmente de ti construirla. Ejemplo: '''js editor. DomComponents.addType('InputGroup', { modelo: { Predeterminados: { El nombre de la etiqueta que se usará en el código final etiquetaNombre: 'InputGroup', attributes: { customProp: 'val1' }, Usarías rasgos para personalizar propiedades personalizadas Rasgos: [ { tipo: 'select', nombre: 'customProp', Opciones: [ { valor: 'val1', nombre: 'Valor 1' }, { valor: 'val2', nombre: 'Valor 2' }, ] } ] } }, Vista: { Por ejemplo, Puedes personalizar la etiqueta en el lienzo Por defecto, la vista usará la misma etiqueta que el modelo etiquetaNombre: 'div', onRender() { Lo que el usuario vea en el lienzo depende totalmente de ti puede ser una imagen sencilla como marcador o Puedes acercarlo lo máximo posible al margen original const attrs = this.model.getAttributes(); this.el.innerHTML = '<div> Mi HTML personalizado para este componente<br> Mi utilería personalizada: ${attrs['customProp']} ';</div> } } });
Esto es lo más fácil, pero como puedes ver, tienes que configurar una nueva vista para cada componente.
@adelliinaa empecemos con una pregunta sencilla porque no entiendo, ¿qué tipo de editor intentas crear? Un constructor para componentes angulares?!?
Quiero crear un constructor de formularios similar al que creaste con los componentes de MJML, pero usando la CLI Angular en lugar de JS. Y sí, los componentes personalizados que quiero integrar en GrapesJS también están construidos en Angular.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #367
Comunidad - Colectivo abierto y Discord.
Hola Artur/chicos, Propongo las siguientes ideas: Abre un canal de Discord o Slack (Discord está tomando el control) para hablar de temas f...
Issue #2493
Longitud de array inválida al arrastrar un componente al lienzo
No sé por qué, Pero de repente, cuando empiezo a arrastrar componentes a un lienzo, me sale esto: ! imagen Esto parece ocurrir cuando edito...
Issue #3014
BUG: Mover componente desde Hijo
Hola, Estoy intentando hacer componentes personalizados compuestos con otros componentes. No hay problema en hacerlo. Estoy teniendo un pro...
Issue #2746
Ratón solapándose en la barra de herramientas de texto CKEDITOR/editor de texto
Cuando la barra de herramientas de ckeditor/richtext está abierta. Ratón flotando sobre elementos, línea límite superpuesta en la barra de...
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.