README

此插件与 Cockpit CMS v2 不兼容。

请参阅Cockpit CMS v1 文档、Cockpit CMS v1 存储库和Cockpit CMS v2 文档、Cockpit CMS v2 存储库。

此插件用可视化区块编辑器替换了 Cockpit CMS 的布局和布局网格字段。

草案/实验性

我一直很喜欢核心布局字段的数据结构，但视觉效果并不直观。此外，在模态框中编辑所有内容也不太合适，每次尝试后我都会停止使用它。

因此，考虑到 WordPress 的 Gutenberg 区块编辑器，我开始重新编写布局字段，在我的第一次测试中它表现得相当不错。

它应该与以下插件兼容

LayoutComponents
CustomComponents（自 Cockpit 版本 0.11.0 以来已废弃 - 提交）
EditorFormats

它与核心布局字段几乎具有相同的数据结构。所以如果你不喜欢区块编辑器，只需移除此插件，继续使用核心字段。

当前开发状态为草案，你可能会在浏览器控制台看到一些 console.log() 输出。要查看所有调试输出，请将 {"debug":true"} 设置为你的布局字段选项中的字段。

请在问题部分或Cockpit 社区论坛中报告错误并发送反馈。

安装

将此存储库复制到 /addons 并命名为 BlockEditor，或使用 CLI。

通过 git

cd path/to/cockpit
git clone https://github.com/raffaelj/cockpit_BlockEditor.git addons/BlockEditor

通过 cp CLI

cd path/to/cockpit
./cp install/addon --name BlockEditor --url https://github.com/raffaelj/cockpit_BlockEditor/archive/master.zip

通过 composer

确保在项目的 composer.json 文件中定义了 cockpit 插件路径。

{
    "name": "my/cockpit-project",
    "extra": {
        "installer-paths": {
            "addons/{$name}": ["type:cockpit-module"]
        }
    }
}

cd path/to/cockpit-root
composer create-project --ignore-platform-reqs aheinze/cockpit .
composer config extra.installer-paths.addons/{\$name} "type:cockpit-module"

composer require --ignore-platform-reqs raffaelj/cockpit-blockeditor

覆盖区块模板

在 path/to/cockpit/config/tags 中创建自己的区块，文件命名格式为 block-<block name>.tag。

分隔区块示例

将 addons/BlockEditor/assets/components/block-divider.tag 复制到 config/tags/block-divider.tag 并对其进行修改。

之前（灰色，1px 实线）

<block-divider>
    <hr>
</block-divider>

之后（左侧面带有剪刀的虚线 2px 线）

<block-divider class="uk-flex">
    <style>
        hr {
            width: 100%;
            margin: .5em 0.2em 0;
            border-top: 2px dashed #ccc;
        }
    </style>

    <i class="uk-icon-scissors uk-text-muted"></i>
    <hr>
</block-divider>

使用自定义组件使用现有区块模板

~~由于 LayoutComponents 插件不提供创建自定义区块选项的功能，因此这与 LayoutComponents 插件不兼容。~~

我为 LayoutComponents 插件编写了一个改进的设置页面，其中可以设置 block 键。

您可以通过使用键 "block": "text" 在字段选项中定义自己的自定义组件。现在，该组件将使用文本区块模板。

在下面的示例中，我还使用了 EditorFormats 插件来定义具有最小编辑选项的 wysiwyg 字段。

字段类型：layout

选项

{
  "components": {
    "textminimal": {
      "label": "Text (minimal)",
      "block": "text",
      "fields": [
        {
          "name": "text",
          "type": "wysiwyg",
          "options": {
            "editor": {
              "format": "Minimal"
            }
          }
        }
      ]
    }
  }
}

许可、版权和第三方资源

许可：MIT，作者：Raffael Jesche

我使用了以下代码作为基础，并对它们内部的许多代码进行了修改

布局字段来自 Cockit CMS，作者：Artur Heinze，MIT 许可协议
布局网格字段来自 Cockit CMS，作者：Artur Heinze，MIT 许可协议
来自 LayoutComponents 插件的设置页面，作者：Artur Heinze，MIT 许可协议

raffaelj / cockpit-blockeditor

维护者

详细信息