Issue #2726Opened April 21, 2020by adamwpe0 reactions

[QUESTION] Make the content of component editable

Question

Is it possible to make the content of a component completely editable?

I want to make a custom anchor with a trait of the href, and then the user can style the anchor accordingly as I'm planning to make it styled as a button.

Basically I want to let the user style 'Click Me' as they would style any text.

editor.DomComponents.addType('custom_button', {
    model: {
        defaults: {
            removable: true,
            draggable: true,
            badgable: true,
            stylable: true,
            highlightable: false,
            selectable: true,
            copyable: false,
            resizable: false,
            editable: true,
            hoverable: true,
            attributes: {class: 'btn gjs-button'},
            tagName: 'a',
            content: 'Click Me',
            traits: [{
                type: 'text',
                label: 'URL',
                name: 'href'
            }],
        },
        reRender() {
            this.view.render();
        }
    },
    isComponent: function (el) {

        if (el.tagName === 'custom_button')
            return {type: 'custom_button'};
    }

});


editor.BlockManager.add('custom_button', {
    id: 'custom_button',
    label: 'Button',
    category: 'GUI',
    content: {
        type: 'custom_button'
    }
});

I made a fiddle showing how it looks now: https://jsfiddle.net/tb2gyas8/

Any Idea?

Answers (1)

adamwpeApril 21, 20200 reactions

Worked it out:

Just had to make the type a link, and then include a text component. E.g.


        editor.DomComponents.addType('custom_button', {
            model: {
                defaults: {
                    removable: true,
                    draggable: true,
                    badgable: true,
                    stylable: true,
                    highlightable: false,
                    selectable: true,
                    copyable: false,
                    resizable: true,
                    editable: true,
                    hoverable: true,
                    attributes: {class: 'btn gjs-button'},
                    type: 'link',
                    traits: [{
                        type: 'text',
                        label: 'URL',
                        name: 'href'
                    }],
                    content: 'hello wolrd'
                },
                reRender() {
                    this.view.render();
                }
            },
            extend: 'link',
            isComponent: function (el) {

                if (el.tagName === 'custom_button')
                    return {type: 'custom_button'};
            }

        });


        // Calendar Widget
        editor.BlockManager.add('custom_button', {
            id: 'custom_button',
            label: 'Button',
            category: 'GUI',
            content: {
                type: 'custom_button'
            }
        });

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.