Issue #665Opened December 20, 2017by SwithFr1 reactions

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)

SeongwoonHongFebruary 25, 20191 reactions

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 the img-link model) 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..

SwithFrDecember 20, 20170 reactions

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.

artfDecember 21, 20170 reactions

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.