Custom component and save
Question
Sorry, me again !
I'm trying to save my template with my new component "img-link" :
But when I save my template using the gjs-get-inlined-html command (it's a newsletter template) it doesn't save the src of my image.
Can you help me please ?
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, {
traits: [
'src',
{
type: 'text',
label: 'alt',
name: 'alt',
changeProp: 1
},
{
type: 'text',
label: 'Link',
name: 'href',
changeProp: 1
},
'title'
]
} ),
initialize: function initialize() {
defaultModel.prototype.initialize.apply( this, arguments );
this.listenTo( this, 'change:src', this.updateSrc );
this.listenTo( this, 'change:href', this.updateHref );
this.listenTo( this, 'change:alt', this.updateAlt );
},
updateSrc: function ( component, value ) {
component.view.$el.find( 'img' ).attr( 'src', value );
},
updateHref: function ( component, value ) {
component.view.$el.find( 'a' ).attr( 'href', value );
},
updateAlt: function ( component, value ) {
component.view.$el.find( 'img' ).attr( 'alt', value );
}
},
{
isComponent: function ( el ) {
if ( el.classList && el.classList.contains( 'img-link' ) ) {
return { type: 'img-link' };
}
}
} ),
view: defaultType.view.extend( {
tagName: 'a',
events: {
dblclick: 'openModal',
click: 'openSettings'
},
openSettings: function ( e ) {
e.preventDefault();
editor.select( this.model );
editor.Panels.getButton( 'views', 'open-tm' ).set( 'active', 1 );
},
openModal: function () {
if ( editor ) {
editor.runCommand( 'open-assets', {
target: this.model,
onSelect: function onSelect() {
editor.Modal.close();
editor.AssetManager.setTarget( null );
}
} );
}
this.$el.click();
},
getNodes: function () {
if ( !this.nodes ) {
let img = document.createElement( 'img' );
img.src = 'http://placehold.it/267x141';
this.nodes = img;
}
return this.nodes;
},
render: function () {
defaultView.prototype.render.apply( this, arguments );
this.el.classList.add( 'img-link', 'link' );
this.el.appendChild( this.getNodes() );
return this;
}
} )
} );
}```
Answers (3)
The problem with src is here
// view editor.runCommand( 'open-assets', { // the model should be the one inside img-link target: this.model,What I think you just should do is to create a custom view where you disable the pointer events on the inner
img(eg. in render, in this way you'll always select theimg-linkmodel) and then on openModal pass the inner img model as a target
@artf Could you provide some code example by any chance? i've had same issue but not sure how to implement what you say..
In fact it's seem that the problem comes from the isComponent. My component is detected with his className 'img-link' and the type 'img-link' is return and so re-rendered.
My component is detected with his className 'img-link' and the type 'img-link' is return and so re-rendered.
isComponent is used only when an HTML is parsed, so I'm not sure it's the case.
What do you get with a simple getHtml? Are you able to provide the live demo of your case?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1578
[Question] Custom request on "src" attributes
I implemented a small GrapesJS editor that allows to edit Django/Jinja2 templates. GrapesJS by default is trying to GET the image preview o...
Issue #426
After image Upload immediately show in the asset Manager
@ artf I tried my best, but still it doesn't seem to work Can you please help me in this. Once I upload a image I don't want to refresh the...
Issue #862
Jquery Image Viewer plugin in GrapesJs custom Block
I want to integrate Image viewer jquery plugin in grapesjs new custom block but jquery code doesn't recognize. How can write jquery code in...
Issue #1155
Custom component used as HTML in block
I've extended the default image component Then I've got a block where I'm going to use the extended image. The following works fine. Howeve...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.