Is there a possibility of making a part of the template readonly?

[madhavaswamy]

I have a typical need to make a part of the template read only. By configuring this that particular area should be made non editable.

[ahmeddabak]

i think this is the code you are looking for

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

domc.addType('id-of-your-block', {
        model: defaultModel.extend({
                defaults: Object.assign({}, defaultModel.prototype.defaults, {
                   // True if the component is removable from the canvas
    removable: true,

    // Indicates if it's possible to drag the component inside other
    // Tip: Indicate an array of selectors where it could be dropped inside
    draggable: true,

    // Indicates if it's possible to drop other components inside
    // Tip: Indicate an array of selectors which could be dropped inside
    droppable: true,

    // Set false if don't want to see the badge (with the name) over the component
    badgable: true,

    // True if it's possible to style it
    // Tip:  Indicate an array of CSS properties which is possible to style
    stylable: true,

    // Highlightable with 'dotted' style if true
    highlightable: true,

    // True if it's possible to clone the component
    copyable: true,

    // Indicates if it's possible to resize the component (at the moment implemented only on Image Components)
    resizable: false,

    // Allow to edit the content of the component (used on Text components)
    editable: false,

                }),
            },
            {
                isComponent: function (el) {
                    if (el.tagName == 'YOUR-ELEMENT-TAG') {
                        return {type: 'id-of-your-block'};
                    }
                },
            }),
        view: defaultView,
    });

but i am still learning to use grapejs myself so for my this would be the way to do it.

please also note this code is taken from the the grapesjs source code src/grapesjs/dom_components/model/Component.js

[madhavaswamy]

Thanks for the quick reply, I will check this.

[artf]

the snippet provided by @ahmeddabak is correct (src/grapesjs/dom_components/model/Component.js actually is the best place to see all available properties 😄 ) but would like also to add that you can attach those properties via blocks as well by using data-gjs-{property name} attributes

editor.BlockManager.add('the-row-block', {
  label: '2 Columns',
  content: '<div class="row" data-gjs-droppable=".row-cell" data-gjs-custom-name="Row">' +
      '<div class="row-cell" data-gjs-draggable=".row"></div>' +
      '<div class="row-cell" data-gjs-draggable=".row"></div>' +
    '</div>',
});

[sakshigarg9]

i think this is the code you are looking for

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

domc.addType('id-of-your-block', {
        model: defaultModel.extend({
                defaults: Object.assign({}, defaultModel.prototype.defaults, {
                   // True if the component is removable from the canvas
    removable: true,

    // Indicates if it's possible to drag the component inside other
    // Tip: Indicate an array of selectors where it could be dropped inside
    draggable: true,

    // Indicates if it's possible to drop other components inside
    // Tip: Indicate an array of selectors which could be dropped inside
    droppable: true,

    // Set false if don't want to see the badge (with the name) over the component
    badgable: true,

    // True if it's possible to style it
    // Tip:  Indicate an array of CSS properties which is possible to style
    stylable: true,

    // Highlightable with 'dotted' style if true
    highlightable: true,

    // True if it's possible to clone the component
    copyable: true,

    // Indicates if it's possible to resize the component (at the moment implemented only on Image Components)
    resizable: false,

    // Allow to edit the content of the component (used on Text components)
    editable: false,

                }),
            },
            {
                isComponent: function (el) {
                    if (el.tagName == 'YOUR-ELEMENT-TAG') {
                        return {type: 'id-of-your-block'};
                    }
                },
            }),
        view: defaultView,
    });

but i am still learning to use grapejs myself so for my this would be the way to do it.

please also note this code is taken from the the grapesjs source code src/grapesjs/dom_components/model/Component.js

I tried this code by mentioning my div id and the tagName and turning all properties equivalent to false, but the div still continues to be editable.

html code:

<div id="sign_in" class="padding-bottom-mini">
  <h2>Account Sign In</h2>
</div>

script code:

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

    domc.addType('sign_in', {
        model: defaultModel.extend({
            defaults: Object.assign({}, defaultModel.prototype.defaults, {
                   // True if the component is removable from the canvas
                   removable: false,

    // Indicates if it's possible to drag the component inside other
    // Tip: Indicate an array of selectors where it could be dropped inside
    draggable: false,

    // Indicates if it's possible to drop other components inside
    // Tip: Indicate an array of selectors which could be dropped inside
    droppable: false,

    // Set false if don't want to see the badge (with the name) over the component
    badgable: false,

    // True if it's possible to style it
    // Tip:  Indicate an array of CSS properties which is possible to style
    stylable: false,

    // Highlightable with 'dotted' style if true
    highlightable: false,

    // True if it's possible to clone the component
    copyable: false,

    // Indicates if it's possible to resize the component (at the moment implemented only on Image Components)
    resizable: false,

    // Allow to edit the content of the component (used on Text components)
    editable: false,

}),
},
{
        isComponent: function (el) {
            if (el.tagName == 'div') {
                return {type: 'div'};
            }
        },
    }),
    view: defaultView,
});

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.