Question

我正在尝试让 GrapesJS 与 Vue 一起工作，并且在进行设置时我在显示意外内容时遇到了一些问题。我在下面附上了一张截图。

问题是有多个文本输入框周围带有按钮，而这些按钮不应该出现在那里。

我无法通过注释或删除代码来隔离问题，它会在我添加了入门的第二步但过去我不确定时显示。

这是我遵循的指南，链接指向我开始看到问题的部分 - link

这是我在 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 中完成。

Grapesjs 文本输入和按钮出现意外

0 个答案: