README

简单的 Editor.js PHP 解析器

使用双向解析数据Editor.js

1. 将 JSON 数据解析为 HTML
2. 将 HTML 解析为 JSON 数据

支持的工具

安装

composer require edd-g/editorjs-simple-html-parser

1. JSON 到 HTML 解析器

用法

use Durlecode\EJSParser\Parser;

$html = Parser::parse($data)->toHtml();

其中 $data 是来自 Editor.js 的干净 JSON 数据（请参见下面的 $data 示例）

{
    "time" : 1583848289745,
    "blocks" : [
        {
            "type" : "header",
            "data" : {
                "text" : "Hello World",
                "level" : 2
            }
        }
    ],
    "version" : "2.16.1"
}

默认情况下，这将生成带有 prs 前缀的 CSS 类的 HTML，因此如果您想更改它，请参考下面的示例

use Durlecode\EJSParser\Parser;

$parser = new Parser($data);

$parser->setPrefix("cat");

$parsed = $parser->toHtml();

方法

toHtml()

返回生成的 HTML

setPrefix(string $prefix)

设置 CSS 类前缀

getPrefix()

返回当前前缀

getVersion()

返回 Editor.js 内容版本

getTime()

返回 Editor.js 内容时间戳

getBlocks()

返回 Editor.js 内容块

生成的 HTML

标题

<h2 class="prs-header prs_center">Lorem</h2>

段落

<p class="prs-paragraph prs_center">
    <code class="inline-code">Pellentesque</code> 
    <i>malesuada fames</i> 
    <mark class="cdx-marker">tempus</mark>
</p>

有序列表

<ol class="prs-list prs_ordered">
    <li></li>
</ol>

无序列表

<ul class="prs-list">
    <li></li>
</ul>

表格

<table class="prs-table prs_withheadings">
    <thead>
        <tr>
            <th>1</th><th>2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>a</td><td>b</td>
        </tr>
    </tbody>
</table>

代码

<pre class="prs-code">
    <code></code>
</pre>

嵌入

（实际上与 YouTube、Codepen 和 Gfycat 一起工作）

<figure class="prs-embed prs_youtube">
    <iframe width="580" height="320" src="https://www.youtube.com/embed/CwXOrWvPBPk" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="1"></iframe>
    <figcaption>Shrek (2001) Trailer</figcaption>
</figure>

分隔符

<hr class="prs-delimiter">

链接工具

<figure class="prs-linkTool">
    <a href="https://github.com/" target="_blank">
       <img src="https://example.com/cat.png" alt="">
       <p class="prs_title">Title</p>
       <p class="prs_description">Description</p>
       <p class="prs_sitename">example.com</p>
    </a>
</figure>

图片

<figure class="prs-image prs_withborder prs_withbackground prs_stretched">
    <img src="" alt="">
    <figcaption></figcaption>
</figure>

引用

<figure class="prs-quote prs_center">
    <blockquote></blockquote>
    <figcaption></figcaption>
</figure>

警告

<div class="prs-warning">
    <i></i>
    <h4>Title</h4>
    <p>Message</p>
</div>

警报

<p class="prs-alert prs_center prs_success">
    Alert!
</p>

原始数据

<div class="prs-raw">
    Raw HTML ...
</div>

2. HTML 到 JSON 解析器

用法

use Durlecode\EJSParser\HtmlParser;

$parser = new HtmlParser($html);

$blocks = $parser->toBlocks();

header("Content-Type: application/json");
echo $blocks;

其中 $html 是特别标记了 CSS 类的 HTML（请参见上面生成的 HTML 代码示例）

默认情况下，这将解析带有 prs 前缀的 HTML，因此如果您想更改它，请参考下面的示例

use Durlecode\EJSParser\HtmlParser;

$parser = new HtmlParser($html);

$parser->setPrefix("cat");

$blocks = $parser->toBlocks();

您可以为 EditorJS 生成的块设置时间和版本默认：时间自动生成，EditorJS 版本从 config.php 传递

use Durlecode\EJSParser\HtmlParser;

$parser = new HtmlParser($html);

$parser->setTime("1703787424242");
$parser->setVersion("2.28.8");

$blocks = $parser->toBlocks();

方法

toBlocks()

返回生成的 EditorJS 块

setPrefix(string $prefix)

设置 CSS 类前缀

getPrefix()

返回当前前缀

setVersion(string $version)

设置 Editor.js 内容版本

getVersion()

返回 Editor.js 内容版本

getTime()

返回 Editor.js 内容时间戳

setTime(string $time)

设置 Editor.js 内容时间戳