README

认识新的Editor。这是有史以来最先进的"WYSWYG"（如果你能这么说）编辑器。

主要功能

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

集成就绪

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

支持的块

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

“块样式编辑器”是什么意思

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

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

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

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

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

如何安装

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

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

使用方法

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

如何启用集成

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

如何从Editor JSON渲染HTML

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

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

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

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

模型示例

// ...
class Post extends Model
{

    // ...

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

    // ...

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

渲染示例

{{ post.content_html|raw }}

扩展

您可以通过阅读官方文档创建任何新的块，您可以在以下链接中找到这些文档 Editor.Js 文档

在创建新的JS脚本和新的块类型Class后，您可以按照以下步骤扩展EditorJS表单小部件。

在您的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/reazzon/editor/formwidgets/editorjs/assets/js/tools/raw.js',
            ],
            'view' => 'reazzon.editor::blocks.raw'
        ],
    ];
}

完成。

现在，您甚至可以将您的editorjs扩展插件发布到市场，让每个人都可以使用您的块！

Editor.js是由web开发领域的CodeX Club开发的。由Nick Khaetsky适配到OctoberCMS。 reazzon.ru

reazzon / editor

维护者

详细信息