Is it possible to load editor into edit-only mode?

[christogonus]

I am building a system where I have 2 access levels: the UI designer and the editor.

I want to load grapejs with different configuration based on the access level a user has.

If you are a UI designer, you should see all the features, but if you are an editor, you should not be able to add/duplicate/delete a block. Editor should only be able to edit the content, change font size, and color.

I need every help I can get to know how to get this in place.

Thanks.

[artf]

I think something like this might work

editor.Commands.add('read-only', {
      toDisable: [
        'core:component-delete',
        'core:paste',
        'tlb-move',
      ],

      run() {
        this.toDisable.forEach(cmd => editor.on(`run:${cmd}:before`, this.abortCommand))
        // ...append to body a <style> which hides some of UI elements
      },

      stop() {
        this.toDisable.forEach(cmd => editor.off(`run:${cmd}:before`, this.abortCommand))
        // ...remove from body a <style> created on run
      },

      abortCommand(opts) {
        opts.abort = true;
        alert('Operation not allowed');
      },
});

// ...
if (!isDesigner) {
  editor.runCommand('read-only');
}

[christogonus]

Thanks for the quick answer.

[ar124officialwd]

I've a similar question. I want to build templates with static and dynamic content. Can I mark some element static (everything static by default) and mark some elements dynamic, those are editable?