Issue #2726💬 AnsweredOpened April 21, 2020by adamwpe0 reactions

Make the content of component editable

快速解答by adamwpe

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

Read full answer below ↓

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, 2020

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

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.