如何将块插件添加到grapesjs？答案

【问题标题】：How to add block plugins to grapesjs?如何将块插件添加到grapesjs？
【发布时间】：2022-05-10 10:01:13
【问题描述】：

这是我的代码，我也安装了节点模块，但它不工作。

var editor = grapesjs.init({
        showOffsets: 1,
        noticeOnUnload: 0,
        container: '#gjs',
        height: '100%',
        fromElement: true,
        plugins: ["gjs-blocks-basic"],
        pluginsOpts: {
          "gjs-blocks-basic": {
            block: {
              category: 'basic',
            }
          }
        },

【问题讨论】：

标签： javascript node.js grapesjs

【解决方案1】：

我认为你在插件选项中有一个额外的键block，它应该是类别。

const editor = grapesjs.init({
        showOffsets: 1,
        noticeOnUnload: 0,
        container: '#gjs',
        height: '100%',
        fromElement: true,
        plugins: ["gjs-blocks-basic"],
        pluginsOpts: {
          "gjs-blocks-basic": {
            category: "Basic"
          }
        });

【讨论】：

【解决方案2】：

自定义插件不加单引号

const editor = grapesjs.init({
        showOffsets: 1,
        noticeOnUnload:0,
        container: '#gjs',
        plugins: ['gjs-preset-webpage',myPlugin,'myNewComponentTypes' ],
        pluginsOpts: {
            'grapesjs-plugin-export': { /*option*/ },
             'myPlugin':{ category: "myPlugin"},
        },

在函数Reference中制作插件

 //PLUGIN

    
    function myPlugin(editor) {
        editor.BlockManager.add('my-block',{
            label:'Plug',
            category: 'Basic',
            content:'<div class="my-block"><p>Plugin Success</p></div>',
        });
    }

【讨论】：

【解决方案3】：

试试这个：

    const editor = grapesjs.init({
      container: "#editor",
      fromElement: true,
      width: "auto",
      storeManager: false,
      plugins: [gjsBlockBasic],
      pluginsOpts: {
        gjsBlockBasic: {},
      },
      blockManager: {
        appendTo: "#blocks",
      },
    })

将“块”添加到要显示块基本选项的 div。

    <div id="blocks"/>

【讨论】：