Issue #2277○ OpenOpened September 18, 2019by zgeist0 reactions

AddType problem, custom types doesn't work when editor init

待解决问题

No community answers yet. Open the original discussion on GitHub to share your solution.

Question

Notice some probleme with addType functionality

If I create some custom type like this:

editor.DomComponents.addType('widget', {
     model: dModel.extend({
                defaults: _.extend({}, dModel.prototype.defaults, {
                    type: ComponentId,
                    tagName: 'div',
                    classes: ['widget'],
                    productId: 1
                }),

                initialize: function(o, opt) {
                    dModel.prototype.initialize.apply(this, arguments);

                    var toolbar = this.get('toolbar');

                    toolbar.unshift({
                        attributes: {
                            class: 'fa fa-gear'
                        },
                        command: 'widget-settings'
                    });

                    this.set('toolbar', toolbar);
                }
            }, {
                isComponent: function(el) {
                    var result = '';
                    if (el.tagName === 'DIV' && el.className.indexOf('widget') !== -1) {
                        result = {
                            type: ComponentId
                        };
                    }

                    return result;
                }
            }),
view: dView
})

When we add component widget on page , it work good But after save content to the server and reload page custom type doesn't apply because Parser don't have this type^ use only default types, so in widget type don't call isComponent method

here: https://github.com/artf/grapesjs/blob/dev/src/parser/model/ParserHtml.js#L131

Do you know this bug?

Possible solution is add some middleware here to add custom types and components to instance before call init

https://github.com/artf/grapesjs/blob/dev/src/index.js#L52 *

Answers (0)

No answers yet.

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 →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.