README

认识新的编辑器。这是有史以来最先进的“所见即所得”（如果可以这样说的）编辑器。

关键特性

它是一个块风格编辑器
它返回干净的JSON格式数据输出
设计为可扩展和可插拔，具有简单的API
原生OctoberCMS事件支持，便于扩展自定义块

集成就绪

RainLab.Blog
RainLab.StaticPages
Lovata.GoodNews
Indikator.News

支持的块

段落
标题
列表（ul, ol）
复选列表
链接（Opengraph）
表格
代码
原始
嵌入
分隔符
图片（粘贴URL，拖放，上传）

“块风格编辑器”是什么意思

在经典编辑器中，工作区由一个单一的内容可编辑元素组成，用于创建不同的HTML标记。Editor工作区由单独的块组成：段落、标题、图片、列表、引用等。每个块都是由插件提供的独立内容可编辑元素（或更复杂的结构），并由编辑器核心统一。

有数十种现成的块和简单的API用于创建任何所需的块。例如，您可以实现推文、Instagram帖子、调查和投票、CTA按钮甚至游戏的块。

“干净的输出数据”是什么意思

经典的所见即所得编辑器产生包含内容和外观的原始HTML标记。相反，Editor.js输出每个块的JSON对象数据。

给定数据可以按需使用：用HTML渲染Web客户端，为移动应用本地渲染，为Facebook即时文章或Google AMP创建标记，生成音频版本等。

如何安装

通过OctoberCMS插件更新器安装插件。

转到设置 –> 更新和插件，在插件搜索中找到EditorJS。单击图标并安装。

使用方法

安装插件后，现在可以在fields.yaml中将任何希望的字段设置为type:editorjs。就是这样。您可以在一个页面上渲染多少个编辑器都不受限制。

如何启用集成

确保已安装系统中的所需集成插件（在“关键特性”部分列出了支持的插件列表）
转到设置
在侧边栏中找到编辑器设置按钮，位于编辑器选项卡中
启用所需的集成
完成。

如何从Editor JSON渲染HTML

要将Editor添加到您的模型，您必须在数据库中准备一个设置为文本的列。

在您的模型表中创建一个类型为text的列，或使用一个已存在的列。
将'grch.Editor.Behaviors.ConvertToHtml'添加到模型的$implement属性中。
添加getHtmlAttribute()方法并粘贴以下示例中的代码行

return $this->convertJsonToHtml($this->YourColumnName);

渲染您的字段{{ model.YourColumnName_html|raw }}
通过<link href="/plugins/grch/editor/assets/css/editorjs.css" rel="stylesheet">将编辑器样式添加到您的页面上

模型示例

// ...
class Post extends Model
{

    // ...

    public $implement = [
        'Grch.Editor.Behaviors.ConvertToHtml'
    ];

    // ...

    public function getContentHtmlAttribute()
    {
        return $this->convertJsonToHtml($this->content);
    }
}

渲染示例

{{ post.content_html|raw }}

扩展

您可以创建任何新的块，只需阅读您可以在以下位置找到的官方文档：Editor.Js文档

在创建具有新块类型类的新JavaScript脚本后，您可以按照以下步骤扩展EditorJS formwidget

在您的 Plugin.php 文件中创建一个新的方法，命名为 registerEditorBlocks()，以下是一个示例，添加了块数组和对应的脚本。

/**
 * Registers additional blocks for EditorJS
 * @return array
 */
public function registerEditorBlocks()
{
    return [
        'raw' => [
            'settings' => [
                'class' => 'RawTool'
            ],
            'validation' => [
                'html' => [
                    'type' => 'string',
                    'allowedTags' => '*',
                ]
            ],
            'scripts' => [
                '/plugins/grch/editor/formwidgets/editorjs/assets/js/tools/raw.js',
            ],
            'view' => 'grch.editor::blocks.raw'
        ],
    ];
}

完成。

现在，您甚至可以将您的 Editor.js 扩展插件发布到市场，这样每个人都可以使用您的块了！

Editor.js 由 CodeX Club 的 Web 开发团队开发。由 Nick Khaetsky 调整以适应 OctoberCMS。 reazzon.ru

grch / editor-plugin

维护者

详细信息