Cómo añadir un botón personalizado con un comando personalizado en el panel predeterminado de grapesjs

También tuve problemas con eso cuando intenté abrir el botón del panel. Así que usé la siguiente manera: ` editor. Panels.addButton('#target panel id#',

{ Id: 'botón de alerta', NombreClase: 'botón de alerta btn', etiqueta: 'Haz clic en mi trasero', command(editor) { alert('Hello World'); } Activo: Verdadero }); ` Sin embargo, el panel y el botón se mostraban.

Se activa y necesita usar el método 'render' para volver a renderizar el objeto del gestor de paneles. No encuentro información sobre ello en la documentación. Así que decidí esta nota aquí: editor. Panels.render(); Después de eso, se muestran el botón y el panel.

Esto está bien documentado en https://grapesjs.com/docs/getting-started.html#panels-buttons. Tienes dos métodos para añadir un panel con botones: (1) Al inicializar GrapesJS, (2) Después de inicializar GrapesJS con addPanel.

Ten en cuenta que esto es para un panel que has definido con '<div id='basic-actions'></div>'.

UvasJS.init()

this.editor = grapesjs.init({
      Contenedor: '#gjs',
      fromElement: false,/* https://github.com/artf/grapesjs#usage */
      addBasicStyle: cierto,
      Altura: '800px',
      Ancho: 'Auto',

Paneles: {
  id: 'Acciones-básicas',
  EL: '.panel__basic-acciones',
  botones: [
    {
      Id: 'botón de alerta',
      NombreClase: 'botón de alerta btn',
      etiqueta: 'Haz clic en mi trasero',
      command(editor) { alert('Hello World'); }
    }
  ]
},
...});

Después de que GrapesJS se inicializara

editor. Panels.addPanel({
  id: 'Acciones-básicas',
  EL: '.panel__basic-acciones',
  botones: [
    {
      Id: 'botón de alerta',
      NombreClase: 'botón de alerta btn',
      etiqueta: 'Haz clic en mi trasero',
      command(editor) { alert('Hello World'); }
    }
  ]
});