GrapesJS模板#isviw区域不可编辑设置失效问题求助

问题描述 #

需要将页面中#isviw元素内的所有内容设置为完全不可编辑，但设置的removable: false等属性并未生效，现有代码如下：

var editor = grapesjs.init({
    container: '#gjs',
    fromElement: true,
    style: '.txt-red{color: red}',
    plugins: ['grapesjs-preset-newsletter'],
    storageManager: false,
    propagate: ['editable', 'removable', 'draggable'],
    pluginsOpts: {
        'grapesjs-preset-newsletter': {}
    }
});

var domc = editor.DomComponents;
var defaultType = domc.getType('default');
var defaultModel = defaultType.model;
var defaultView = defaultType.view;

var isviwModel = defaultModel.extend(
    {
        init: function () {
            this.set('removable', false);
            this.set('draggable', false);
            this.set('droppable', false);
            this.set('badgable', false);
            this.set('stylable', false);
            this.set('highlightable', false);
            this.set('copyable', false);
            this.set('resizable', false);
            this.set('editable', false);

            defaultModel.prototype.init.apply(this, arguments);
        }
    },
    {
        isComponent: function (el) {
            if (el.tagName == 'div') {
                return { type: 'isviw' };
            }
        },
    }
);

editor.DomComponents.addType('isviw', {
    model: isviwModel,
    view: defaultView,
});

问题原因及解决方案 #

关键问题点 #

1. 组件匹配逻辑错误：当前isComponent方法会把所有div都识别为isviw类型，而非仅目标元素#isviw
2. 属性设置顺序错误：先设置属性再调用父类init，会被父类初始化逻辑覆盖
3. 属性传播不完整：未开启子元素的属性继承，且propagate配置项未包含所有需要禁用的属性

修改后的代码 #

var editor = grapesjs.init({
    container: '#gjs',
    fromElement: true,
    style: '.txt-red{color: red}',
    plugins: ['grapesjs-preset-newsletter'],
    storageManager: false,
    // 包含所有需要传播的禁用属性
    propagate: ['editable', 'removable', 'draggable', 'droppable', 'badgable', 'stylable', 'highlightable', 'copyable', 'resizable'],
    pluginsOpts: {
        'grapesjs-preset-newsletter': {}
    }
});

var domc = editor.DomComponents;
var defaultType = domc.getType('default');
var defaultModel = defaultType.model;
var defaultView = defaultType.view;

var isviwModel = defaultModel.extend(
    {
        init: function () {
            // 先执行父类初始化，再设置自定义属性
            defaultModel.prototype.init.apply(this, arguments);
            // 批量设置不可编辑相关属性
            this.set({
                removable: false,
                draggable: false,
                droppable: false,
                badgable: false,
                stylable: false,
                highlightable: false,
                copyable: false,
                resizable: false,
                editable: false,
                // 强制属性传播到所有子元素
                propagate: true
            });
        }
    },
    {
        isComponent: function (el) {
            // 仅匹配id为isviw的div元素
            if (el.tagName === 'DIV' && el.id === 'isviw') {
                return { type: 'isviw' };
            }
        },
    }
);

editor.DomComponents.addType('isviw', {
    model: isviwModel,
    view: defaultView,
});

核心修改说明 #

• 精准匹配目标元素：修改isComponent的判断条件，仅对id为isviw的div生效
• 调整属性设置顺序：先调用父类init方法，再设置自定义属性，避免被父类逻辑覆盖
• 完善属性传播机制：开启propagate: true让父元素的禁用属性传递给所有子元素，同时扩展propagate配置项包含所有需要禁用的属性

内容的提问来源于stack exchange，提问作者nsilva