Componente personalizado y guardado
El problema con src está aquí'''js// vistaeditor.runCommand( 'open-assets', {// el modelo debería ser el que está dentro de IMG-Linkobjetivo: this.model,```Creo que lo que deberías hacer es crear una vista personalizada donde desactives los eventos de puntero en el 'img' interno (por ejemplo, en renderizado, así siemp...
Lee la respuesta completa abajo ↓Pregunta
¡Perdón, yo otra vez!
Estoy intentando guardar mi plantilla con mi nuevo componente "img-link":
Pero cuando guardo mi plantilla usando el comando 'gjs-get-inlined-html' (es una plantilla de boletín) no guarda el src de mi imagen.
¿Puedes ayudarme, por favor?
'''javascript export default ( editor, config = {} ) => { const comps = editor. DomComponents; const defaultType = comps.getType( 'default' ); const defaultModel = defaultType.model; const defaultView = defaultType.view;
comps.addType( 'img-link', { model: defaultModel.extend( { defaults: Object.assign( {}, defaultModel.prototype.defaults, { Rasgos: [ 'src', { Tipo: 'texto', etiqueta: 'alt', Nombre: 'Alt', cambioprop: 1 }, { Tipo: 'texto', etiqueta: 'Enlace', Nombre: 'Href', cambioprop: 1 }, 'título' ] } ), inicialize: función initialize() { defaultModel.prototype.initialize.apply( esto, argumentos );
this.listenTo( this, 'change:src', this.updateSrc ); this.listenTo( this, 'change:href', this.updateHref ); this.listenTo( this, 'change:alt', this.updateAlt ); }, updateSrc: función ( componente, valor ) { component.view.$el.find( 'img' ).attr( 'src', valor ); }, updateHref: función ( componente, valor ) { component.view.$el.find( 'a' ).attr( 'href', valor ); }, updateAlt: función ( componente, valor ) { component.view.$el.find( 'img' ).attr( 'alt', valor ); } }, { isComponent: función ( el ) { si ( el.classList && el.classList.contains( 'img-link' ) ) { return { type: 'img-link' }; } } } ), view: defaultType.view.extend( { etiquetaNombre: 'a',
eventos: { dblclick: 'openModal', haz clic en: 'openSettings' },
openSettings: function ( e ) { e.preventDefault();
editor.select ( this.model ); editor. Panels.getButton( 'vistas', 'open-tm' ).set( 'activo', 1 ); },
openModal: function () { if ( editor ) { editor.runCommand( 'open-assets', { Objetivo: esto.modelo, onSelect: función onSelect() { editor. Modal.close(); editor. AssetManager.setTarget( null ); } } ); } this.$el.click(); },
getNodes: function () { si ( !this.nodes ) { sea img = document.createElement( 'img' );
img.src = 'http://placehold.it/267x141';
this.nodes = img; }
devuelva this.nodes; },
render: función () { defaultView.prototype.render.apply( esto, argumentos );
this.el.classList.add( 'img-link', 'link' ); this.el.appendChild( this.getNodes() );
devuelvo esto; } } ) } );
}```
Respuestas (3)
El problema con src está aquí
'''js // vista editor.runCommand( 'open-assets', { // el modelo debería ser el que está dentro de IMG-Link objetivo: this.model,
Creo que lo que deberías hacer es crear una vista personalizada donde desactives los eventos de puntero en el 'img' interno (por ejemplo, en renderizado, así siempre seleccionarás el modelo 'img-link') y luego en openModal pases el modelo img interno como destino
@artf ¿Podrías dar algún ejemplo de código por casualidad? He tenido el mismo problema pero no sé cómo implementar lo que dices...
De hecho, parece que el problema viene del isComponent. Mi componente se detecta con su nombre de clase 'img-link' y el tipo 'img-link' es return y así se vuelve a renderizar.
Mi componente es detectado con su nombre de clase 'img-link' y el tipo 'img-link' es return y así se vuelve a renderizar.
'isComponent' solo se usa cuando se analiza un HTML, así que no estoy seguro de que sea así. ¿Qué se obtiene con un simple 'getHtml'? ¿Puedes proporcionar la demostración en directo de tu caso?
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #460
Cuando la vista del componente modifica el HTML, los componentes de texto ya no son editables
Estoy intentando crear un componente personalizado que contenga algo de texto lorem ipsum en el contenido, para editarlo una vez que esté e...
Issue #1843
No se aplican clases en diferentes estados a esos estados.
Estoy intentando aplicar una clase en el paso del cursor de un componente y la clase se está aplicando, pero no en el surcurso, se aplica c...
Issue #1633
[Error]: editor.runCommand('gjs-get-inlined-html') devuelve indefinido (preset-webpage)
Hola, Artur Estoy usando grapesjs-preset-webpage v0.1.10, grapesjs v0.14.29 Estoy intentando guardar plantillas con CSS en línea en lugar d...
Issue #436
RemoteStorage - Plantilla de carga utiliza POST
Estoy usando un módulo personalizado para guardar/cargar una plantilla con un servicio como este: El guardado es un módulo diferente y func...
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.