Extend Image Traits

Hello,

i would like to extend the image type with some options, specially with a redirect option on click. I tried this solution after the editor initialization (i precise that i work in full javascript and non Node.js environment) : editor.DomComponents.addType(‘image’, { isComponent: el => el.tagName == ‘img’, model: { defaults: { traits: [ // Strings are automatically converted to text types ‘alt’, ‘title’, // Same as: { type: ‘text’, name: ‘name’ } { type: ‘url’, name: ‘href’, placeholder:‘https://google.com’, changeProp: 1 } ], // As by default, traits are binded to attributes, so to define // their initial value we can use attributes attributes: { type: ‘title’, required: false }, }, init() { // Also the listener changes from change:attributes:* to change:* this.on(‘change:url’, this.handlePlhChange); }, handlePlhChange() { console.log(‘URL updated’); }, }, });

So, with that code, i saw my URL input but i can’t trigger the update. My point is to intercept the input update and get the input value to use it to put my “img” DOM into a “a href” DOM

Any help would be great 😃

Best regards

[Lerdouille]

Hi again,

here is the final solution to create a a href image :

editor.DomComponents.addType('imagelink', {
                model: {
                    defaults: {
                        tagName: 'div',
                        resizable: {keepAutoHeight: true},
                        droppable: false,
                        traits: [
                            { 
                                type: 'href', label: 'Source', name: 'href'
                            },
                            {
                                type: 'select',
                                label: 'Target',
                                name: 'target',
                                options: [
                                  { value: '', name: 'This window' },
                                  { value: '_blank', name: 'New window' }
                                ]
                            }
                        ],
                        components: [
                            {
                                resizable: false,
                                draggable: false,
                                droppable: false,
                                selectable: false,
                                hoverable: false,
                                type: 'link',
                                components: [{
                                    type: 'image',
                                    attributes: {
                                        src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImZpbGw6IHJnYmEoMCwwLDAsMC4xNSk7IHRyYW5zZm9ybTogc2NhbGUoMC43NSkiPgogICAgICAgIDxwYXRoIGQ9Ik04LjUgMTMuNWwyLjUgMyAzLjUtNC41IDQuNSA2SDVtMTYgMVY1YTIgMiAwIDAgMC0yLTJINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMnoiPjwvcGF0aD4KICAgICAgPC9zdmc+',
                                        style:'width:100%;'
                                    },
                                    resizable: false,
                                    draggable: false,
                                    droppable: false,
                                    hoverable: false,
                                    selectable: false,
                                }]
                            }
                        ]
                    },
                    init() {
                      this.on('change:attributes:href', this.handleHrefChange);
                      this.on('change:attributes:target', this.handleTargetChange);
                    },
                    handleHrefChange: function ( component, value ) {
                        delete component.attributes.attributes;
                        component.attributes.components.models[0].attributes.attributes.href = value;
                        return false;
                    },
                    handleTargetChange: function ( component, value ) {
                        delete component.attributes.attributes;
                        component.attributes.components.models[0].attributes.attributes.target = value;
                        return false;
                    },
                },
            });

Now i have to found how to check the URL integrity when you want to update the href variable

Best regards

[Lerdouille]

Here is a solution i found :

editor.DomComponents.addType(‘imagelink’, { // Model definition model: { // Default properties defaults: { tagName: ‘a’, //resizable: true, attributes: { // Default attributes name: ‘Default name’, placeholder: ‘Insert text here’ }, components: ‘’, traits: [ { type: ‘text’, label: ‘Name’, name: ‘name’ }, { type: ‘text’, label: ‘Placeholder’, name: ‘placeholder’ }, { type: ‘href’, label: ‘Source’, name: ‘href’ } ], }, init() { this.on(‘change:attributes’, this.handleAttrChange); }, handleAttrChange() { console.log('Attributes updated: ', this.getAttributes()); }, }, view: { events: { dblclick: ‘innerElDblClick’, click: ‘innerElClick’, }, innerElClick(ev) { ev.stopPropagation(); editor.select( this.model ); return false; }, innerElDblClick(ev) { ev.stopPropagation(); editor.select( this.model ); return false; }, } });

With functions innerElClick and innerElDblClick, when you click throught the editor, it will select the properties of the new type imagelink and allow you to change the source link. By the way, you can also double click on the image to open asset and change the source file image.

I have actually another issue with my new type, i can’t figure out how to resize the component with the mouse drag method… I tried to add the property resizable: true on the model definition (commented in my sample) but it didn’t work…

Could you please tell me if there is a solution to change the size of the whole component (img and href dom) ?

Best regards