How to set the component cannot be deleted

[mingxin-yang]

[artf]

I'd suggest creating a custom Component with removable property set to false

[mingxin-yang]

https://grapesjs.com/docs/modules/Components.html#define-custom-component-type , this ? @artf

[mingxin-yang]

Another problem is a text control, how to edit the text when selected, instead of double-clicking to edit it like now? @artf

[mingxin-yang]

There is a bug here, https://grapesjs.com/demo-mjml.html, when editing text with only one line of text, the second click, the edit box will cover the text @artf

[artf]

Another problem is a text control, how to edit the text when selected, instead of double-clicking to edit it like now?

You can change component content in this way editor.getSelected().components('My text')

There is a bug here, https://grapesjs.com/demo-mjml.html, when editing text with only one line of text, the second click, the edit box will cover the text

That should be fixed in the next release

[mingxin-yang]

You can change component content in this way editor.getSelected().components('My text')

This is not what I want, I want to do it when choosing Text, the cursor can appear in the middle of the text, enter the text directly, not double-click before you can enter @artf

[mingxin-yang]

[artf]

To enable rich text editor on one click, you can extend the original text component in this way

editor.Components.addType('text', {
    view: {
      events: {
        input: 'onInput', // Preserve the original on input event which updates RTE toolbar position
        click: 'enableRte',
      },
      enableRte() {
        this.onActive()
      }
    },
});

[mingxin-yang]

Thank you for your patience. I have another question. How to make the height of the canvas change with the content. Because my block is placed under the canvas, I added height:'auto' during initialization. , But it didn't work

var editor = grapesjs.init({
          container: '#gjs',
          // Get the content for the canvas directly from the element
          // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
          fromElement: true,
          // Size of the editor
          height:600,
          width: 'auto',
          // Disable the storage manager for the moment
          storageManager: false,
          // Avoid any default panel
          panels: { defaults: [] },

          plugins: ['grapesjs-mjml',],

@artf

[mingxin-yang]

I use gjs-plugin-ckeditor, after selecting the text, after the ckeditor edit box appears, the margin of the text will become larger, but the margin cannot be overwritten in the css. How do I set it?
@artf

[mingxin-yang]

After using the CKEDITOR plugin in the GrapesJS-MJML project, after the box, there is a layer of p tag outside the text, the style has changed, how to set it

@artf