userbig / editor.js
Editor.js 的 PHP 后端实现
Requires
- php: >=5.6
- ezyang/htmlpurifier: ^4.8
Requires (Dev)
- friendsofphp/php-cs-fixer: ^2.13
- phpunit/phpunit: 5.4.*
This package is auto-updated.
Last update: 2024-09-18 21:04:48 UTC
README
Editor.js 的服务器端实现示例。它包含数据验证、HTML 清洁以及将 Editor.js 的输出转换为 Block 对象。
安装
使用 composer 安装库
composer require codex-team/editor.js:dev-master
指南
将以下行添加到您的 PHP 脚本顶部
use \EditorJS\EditorJS;
此行允许您获取具有以下方法的编辑器类
getBlocks
- 返回经过清理的块数组
基本用法
您可以从编辑器中获取数据,并将其作为参数发送到编辑器的服务器验证器
try { // Initialize Editor backend and validate structure $editor = new EditorJS( $data, $configuration ); // Get sanitized blocks (according to the rules from configuration) $blocks = $editor->getBlocks(); } catch (\EditorJSException $e) { // process exception }
Editor.js 构造函数有以下参数
$data
— 来自 CodeX Editor 前端的 JSON 字符串数据。
$configuration
— 包含 CodeX Editor 工具配置的 JSON 字符串(以下段落中有一个示例)。
配置文件
您可以手动配置不同类型 Editor.js 工具(标题、段落、列表、引语和其他)的验证规则。您还可以通过添加新工具来扩展配置。
示例验证规则集
{
"tools": {
"header": {
"text": {
"type": "string",
"required": true,
"allowedTags": "b,i,a[href]"
},
"level": {
"type": "int",
"canBeOnly": [2, 3, 4]
}
}
}
}
其中
tools
— 支持的 Editor.js 工具数组。
header
— 定义 header
工具设置。
text
和 level
— header
工具结构中的参数。
text
是一个 必需的 字符串,除了 b、i 和 a[href] 标签外,都将被清理。
level
是一个 可选的 整数,只能是 0、1 或 2。
allowedTags
参数应遵循 HTMLPurifier 格式。
每个块有三个通用参数
type
(必需的) — 块类型
allowedTags
(可选) — 不会删除的字符串形式的 HTML 标签
其他值根据 HTMLPurifier 格式允许。
示例
"paragraph": {
"text": {
"type": "string",
"allowedTags": "i,b,u,a[href]"
}
}
canBeOnly
(可选) — 定义允许值的集合
示例
"quote": {
"text": {
"type": "string"
},
"caption": {
"type": "string"
},
"alignment": {
"type": "string",
"canBeOnly": ["left", "center"]
}
}
简短设置语法
添加了一些语法糖。
工具设置可以是 string
。它定义了具有默认设置的工具类型。
"header": { "text": "string", "level": "int" }
它评估为
"header": { "text": { "type": "string", "allowedTags": "", "required": true }, "level": { "type": "int", "allowedTags": "", "required": true } }
工具设置可以是 array
。它定义了一组未经清理的允许值。
"quote": { "alignment": ["left", "center"], "caption": "string" }
它评估为
"quote": { "alignment": { "type": "string", "canBeOnly": ["left", "center"] }, "caption": { "type": "string", "allowedTags": "", "required": true } }
另一个配置示例:/tests/samples/syntax-sugar.json
嵌套工具
工具可以包含嵌套值。这是通过 array
类型实现的。
让我们看一下以下 JSON 输入
{
"blocks": [
"type": list,
"data": {
"items": [
"first", "second", "third"
],
"style": {
"background-color": "red",
"font-color": "black"
}
}
]
}
我们可以在配置中为这个输入定义验证规则
"list": {
"items": {
"type": "array",
"data": {
"-": {
"type": "string",
"allowedTags": "i,b,u"
}
}
},
"style": {
"type": "array",
"data": {
"background-color": {
"type": "string",
"canBeOnly": ["red", "blue", "green"]
},
"font-color": {
"type": "string",
"canBeOnly": ["black", "white"]
}
}
}
}
其中 data
是数组值的容器,而 -
是数组的特殊快捷方式,如果数组是顺序的。
另一个配置示例:/tests/samples/test-config.json
异常
EditorJS 类
BlockHandler 类
ConfigLoader 类
制作工具
如果您在客户端连接了新的工具,那么您应该为该工具创建一个配置规则,以便在服务器端对其进行验证。
仓库
https://github.com/codex-editor/editorjs-php/
关于 CodeX
我们是由圣彼得堡俄罗斯IFMO学生和毕业生组成的一支小型Web开发爱好者团队。请随时通过team@ifmo.su给我们反馈。