Issue #665💬 RespondidoAbierto el 20 de diciembre de 2017por SwithFrReacciones 1

Componente personalizado y guardado

Respuesta rápidapor SeongwoonHong1

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)

SeongwoonHong25 de febrero de 2019

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...

SwithFr20 de diciembre de 2017

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.

artf21 de diciembre de 2017

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.

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 →

Tutoriales relacionados

Guías detalladas sobre el mismo tema.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.