desti/editor.js

Editor.js 的 PHP 后端实现

v1.1 2023-01-11 12:00 UTC

This package is auto-updated.

Last update: 2024-09-11 15:19:00 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 工具设置。

textlevelheader 工具结构中的参数。

text 是一个 必需的 字符串,它将除了 bia[href] 标签之外被清理。

level 是一个 可选的 整数,可以是 0、1 或 2。

allowedTags 参数应遵循 HTMLPurifier 格式。

每个块有三个常见的参数

  1. type (必需的) — 块类型
  1. allowedTags (可选) — 不会删除的字符串形式的 HTML 标签

其他值可根据 HTMLPurifier 格式允许。

示例

"paragraph": {
    "text": {
        "type": "string",
        "allowedTags": "i,b,u,a[href]"
    }
}
  1. 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 类

制作工具

如果您在前端连接了新的 Tool,那么您应该为该 Tool 创建一个配置规则,以便在服务器端进行验证。

仓库

https://github.com/codex-editor/editorjs-php/

关于 CodeX

我们是位于俄罗斯圣彼得堡的一支由IFMO学生和毕业生组成的小型Web开发爱好者团队。请随时给我们发送反馈至team@ifmo.su