Amplía ejemplos/documentación de Pannel/Command abriendo una nueva vista

Una buena práctica para familiarizarte con GrapeJS sería intentar duplicar el gestor de bloques y crear el tuyo propio. Puedes lograrlo editando los archivos que aparecen a continuación. Un buen ejemplo sería copiar el src/block_managerand llamarlo src/section_manager y luego renombrar todos los nombres de BlockManager a SectionManager. Mira el código, no son tantas líneas.

Luego tendrás que editar los siguientes archivos para que funcione:

src/editor/index.js Responsable de Sección: em.get('Gestor de Sección'), src/editor/modelo/Editor.js

requiere('section_manager'),

Luego crea un archivo nuevo src/comandos/vista/OpenSections.js

Modifica todo el contenido de esto para que coincida realmente con los nombres del responsable de sección. 
Ejemplo: 
  var sm = editor. Jefe de sección;

src/editor/config/config.js

Configuraciones para Jefe de Sección
sectionManager: {},

src/panels/config/config.js

var osc = 'secciones abiertas';

{
   id: OSC,
   claseNombre: 'fa fa-th-large',
   Mando: OSC,
   activo: falso,
   atributos : { título: 'Secciones abiertas' },
},

index.html

Jefe de sección: 
{
   Categorías: {
       abierto:verdadero
   }
},

var sm = editor. Jefe de sección;

sm.add(this.id, {
                   etiqueta: esto.etiqueta,
                   Categoría: esto. Categoría,
                   atributos: this.attributes,
                   Contenido: esto.contenido,
               });

Haz una búsqueda completa de código fuente para BlockManager o block_manager para asegurarme de que no me he perdido nada. Así entenderás mejor cómo funciona BlockManager.

Por supuesto, tendrás que cambiar algunas clases de CSS para mover el gestor a la ubicación deseada, o insertar su contenido en una sección completamente diferente de tu interfaz.

Es una idea aproximada. Una mejor idea sería crear un plugin independiente que genere este gestor de secciones, lo miraré poco después de familiarizarme con todos los archivos y entenderlo mejor.

También creo que deberíamos elegir una interfaz como semantic-iu para crear barras dinámicas, modales, etc. con grapejs. Aquí tienes un ejemplo de uno de mis intentos de crear una nueva barra lateral usando semantic-iu:

! imagen

La barra se muestra y se oculta automáticamente cuando empiezas a arrastrar el elemento. Creo que @artf intenta mantener este editor lo más sencillo posible sin dependencias, pero esto podría funcionar para algunas personas.

En lugar de modificar el gestor de bloques, creé mi propio gestor donde puedo modificarlo sin tocar el Gestor de bloques original.

¡Salud