La sección de viñetas y botones de cómo empezar no funciona con Vue.js

Echa un vistazo a este problema, quizá ayude: https://github.com/artf/grapesjs/issues/275

<template>
    <div :id="id"></div>
</template>

<script>
    exportar default {
        Utilería: {
            id: {
                tipo: Cuerda,
                Requerido: Verdadero
            }
        },
        data() {
            return {
                editor: null
            }
        },
        Métodos: {
            cambio() {
                this.$emit('change', this.editor.getHtml());
            },
        },
        montado() {
            this.editor = grapesjs.init({
                Contenedor: '#editor',
                Altura: Esto. Altura,
                Plugins: ['GJS-preset-newsletter'],
            });

this.editor.on('change', this.change);
        }
    }
</script>

Hola @joshk132 sinceramente el código se ve bien, ¿puedes crear una demo reproducible (en algo como Codesandbox)?

@artf he conseguido que funcione donde aparecen los paneles, pero ahora no se muestra correctamente. La solución que tuve que hacer fue cambiar para usar el código que aparece abajo. Básicamente tuve que tener "editor" como variable que había eliminado en mi código inicial porque el linter de Vue se quejaba. Adjunto hay un enlace a una imagen de cómo queda con el código de abajo, no estoy seguro de qué es exactamente lo que está mal para causar los problemas de estilo.

https://imgur.com/GuFqv0o

<template>
  <div class="base">
    <div class="panel__top">
      <div class="panel__basic-actions"></div>
      <div class="panel__switcher"></div>
    </div>
    <div class="panel__right">
      <div class="layers-container"></div>
      <div class="styles-container"></div>
    </div>
    <div id="gjs">
      <h1>¡Hola Componente Mundial!</h1>
    </div>
    <div id="bloques"></div>
    <link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
  </div>
</template>

<script>
importación VueGrapesjs de 'vue-grapesjs'
Importen uvas de 'uvasjs'
exportar default {
  Nombre: 'App',
  data () {
    return {

}
  },
  montado(){
    const editor = grapesjs.init({
      Indica dónde iniciar el editor en el editor. También puedes aprobar un HTMLElement
      Contenedor: '#gjs',
      Consigue el contenido del lienzo directamente del elemento
      Como alternativa, podríamos usar: 'components: '<h1>¡Hello World Component!</h1>' `,
      fromElement: cierto,
      Tamaño del editor
      Altura: '1000px',
      Ancho: 'Auto',
      Desactiva el gestor de almacenamiento por el momento
      storageManager: false,
     
Permite la creación de "bloques"
      blockManager: {
        appendTo: '#blocks',
        Bloqueos: [
          {
            ID: 'Sección', // ID es obligatorio
            label: '<b>Section</b>', // Puedes usar HTML/SVG dentro de las etiquetas
            atributos: { Class:'GJS-Block-section' },
            Contenido: '<section>
              <h1>Este es un título sencillo</h1>
              <div>Esto es solo un texto de Lorum: Lorem ipsum dolor sit amet</div>
            ',</section>
          }, {
            id: 'texto',
            etiqueta: 'Texto',
            contenido: '<div data-gjs-type="text">Inserta tu texto aquí</div>',
          }, {
            id: 'imagen',
            etiqueta: 'Image',
            Selecciona el componente una vez que se haya soltado
            select: cierto,
            Puedes pasar componentes como JSON en lugar de una simple cadena HTML,
            En este caso también usamos un tipo de componente definido llamado 'imagen'
            Contenido: { Tipo: 'Imagen' },
            Esto activa un evento 'activo' en componentes caídos y en la 'imagen'
            reacciona abriendo el AssetManager
            ACTIVAR: Cierto,
          }
        ]
      },
      layerManager: {
        appendTo: '.layers-container'
      },
    });
    editor. Panels.addPanel({
      id: 'panel-top',
      EL: '.panel__top',
    });
    editor. Panels.addPanel({
      id: 'Acciones-básicas',
      EL: '.panel__basic-acciones',
      botones: [
        {
          Id: 'visibilidad',
          activo: true, // activo por defecto
          NombreClase: 'btn-toggle-borders',
          etiqueta: '<u>B</u>',
          comando: 'sw-visibility', // Comando incorporado
        }, {
          id: 'exportar',
          NombreClase: 'btn-open-export',
          etiqueta: 'Exp',
          comando: 'export-plantilla',
          contexto: 'export-plantilla', // Para agrupar el contexto de botones del mismo panel
        }, {
          id: 'show-json',
          NombreClase: 'btn-show-json',
          etiqueta: 'JSON',
          Contexto: 'show-json',
          comando(editor) {
            editor. Modal.setTitle('Components JSON')
              .setContent('<textarea style="width:100%; height: 250px;">
                ${JSON.stringify(editor.getComponents())}
              ')</textarea>
              .open();
          },
        }
      ],
    });
    editor.on('run:export-plantilla:before', opts => {
      console.log('Antes de la secuencia de comando');
      opts.abort = 0; 0 = verdadero 1 = falso
    });
    editor.on('run:export-plantilla', () => console.log('Después de ejecutar el comando'));
    editor.on('abort:export-plantilla', () => console.log('Comando abortado'));
  }
}
</script>

<style>
#gjs {
  familia tipográfica: 'Avenir', Helvetica, Arial, sans-serif;
  -suavizado de fuentes webkit: antialiasado;
  -moz-osx-font-suavizado: escala de grises;
  text-align: center;
  color: #2c3e50;
  Margen arriba: 60px;
  borde: 3px sólido #444;
}

/* Reiniciar algo de estilo predeterminado */
.gjs-cv-canvas {
  arriba: 0;
  ancho: 100%;
  altura: 100%;
}

.gjs-block {
  Ancho: Auto;
  Altura: Auto;
  Altura mínima: Auto;
}

.panel__top {
  relleno: 0;
  ancho: 100%;
  pantalla: flex;
  posición: inicial;
  justificar-contenido: centro;
  justificar-contenido: espacio-entre;
}

.panel__basic-acciones {
  posición: inicial;
}

.editor-row {
  pantalla: flex;
  Justificar-contenido: Inicio flexible;
  Alinear-ítems: estiramiento;
  Flex-wrap: sin wrap;
  Altura: 300px;
}

.editor-canvas {
  flex-grow: 1;
}

.panel__right {
  Base flexible: 230px;
  posición: relativa;
  desbordamiento: auto;
}
</style>

Gracias por informar de esto, @joshk132.

¡Gran sugerencia sobre la sección de Viñetas y Botones para empezar y no trabajar con Vue.js*! Aunque esta función específica aún no está en la API principal, existen varias formas de lograr un comportamiento similar.

Usando el sistema de eventos: '''javascript editor.on('component:update', (component) => { Tu lógica aquí });

**Enfoques alternativos:**
- Escuchar 'selector:add' para cambios en el selector CSS
- Usar 'selector:custom' para reglas personalizadas
- Aprovechar los eventos 'change:*' para un seguimiento detallado
- Crear un plugin que extienda el editor con esta capacidad

**Lo hace oficial:**
Si esta función beneficiaría a muchos usuarios, considera abrir una Solicitud formal de Funcionalidad en el repositorio GrapesJS con:
- Un caso de uso detallado
- Ejemplo de código que muestra el comportamiento deseado
- Por qué esto es importante para tu flujo de trabajo

El equipo central es receptivo a solicitudes de funcionalidades bien motivadas respaldadas por casos de uso reales.