0

我正在尝试让GrapesJS与 Vue 一起工作，并通过设置我在显示未预期的内容时遇到了一些问题。我在下面包含了一个屏幕截图。

问题是有多个文本输入，它们周围有按钮，预计不会出现。

我无法通过注释掉或删除代码来隔离问题，它显示任何时候我添加了第二步开始添加但我不确定。

这是我正在关注的指南，链接指向我开始看到问题的部分 -链接

这是我App.vue文件中的代码，我已经排除了样式，因为我认为这对这个问题并不重要。至少评论它没有任何区别。

<template>
  <div class="base">
    <div id="gjs">
      <h1>Hello World Component!</h1>
    </div>
    <div id="blocks"></div>
  </div>
</template>

<script>
import grapesjs from 'grapesjs'
export default {
  name: 'app',
  created(){
    grapesjs.init({
      // Indicate where to init the editor. You can also pass an HTMLElement
      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: '1000px',
      width: 'auto',
      // Disable the storage manager for the moment
      storageManager: false,
      // Avoid any default panel
      panels: { defaults: [] },
      // Allows creation of "blocks"
      blockManager: {
        appendTo: '#blocks',
        blocks: [
          {
            id: 'section', // id is mandatory
            label: '<b>Section</b>', // You can use HTML/SVG inside labels
            attributes: { class:'gjs-block-section' },
            content: `<section>
              <h1>This is a simple title</h1>
              <div>This is just a Lorem text: Lorem ipsum dolor sit amet</div>
            </section>`,
          }, {
            id: 'text',
            label: 'Text',
            content: '<div data-gjs-type="text">Insert your text here</div>',
          }, {
            id: 'image',
            label: 'Image',
            // Select the component once it's dropped
            select: true,
            // You can pass components as a JSON instead of a simple HTML string,
            // in this case we also use a defined component type `image`
            content: { type: 'image' },
            // This triggers `active` event on dropped components and the `image`
            // reacts by opening the AssetManager
            activate: true,
          }
        ]
      },
    });
  }
}
</script>

问题截图

我的问题是如何让这些添加的文本输入消失并在底部显示正确的框，如指南所示？

我应该注意我正在使用 Vue 2，因为 Vue 3 是我仍然需要学习的东西，所以为了更快地完成这个测试项目，我正在尝试在 Vue 2 中完成它。

4

0 回答 0