在开发一个内容管理系统时,我遇到了一个棘手的问题:如何在 php 环境中高效地处理 tiptap 编辑器生成的内容。tiptap 是一个基于 prosemirror 的富文本编辑器,它生成的 json 格式内容需要在后端进行转换和处理,但这对我来说是一个全新的挑战。我尝试了多种方法,但都未能找到一个既简单又高效的解决方案。最终,我发现了 ueberdosis/tiptap-php 这个库,它完美地解决了我的问题。
使用 ueberdosis/tiptap-php 库,你可以轻松地在 PHP 中处理 Tiptap 内容。它提供了多种功能,包括将 Tiptap JSON 转换为 HTML,反之亦然,内容清理和修改等。安装这个库非常简单,只需通过 Composer 即可:
<code>composer require ueberdosis/tiptap-php</code>
这个库的使用非常直观,如果你熟悉 Tiptap 的 JavaScript API,那么 PHP 版本的语法也会让你感到熟悉。以下是一些常见的使用场景:
将 Tiptap HTML 转换为 JSON
你可以将 HTML 片段转换为 Tiptap 兼容的 PHP 数组结构:
<code>(new \Tiptap\Editor)
->setContent('<p>Example Text</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/7fc7563c4182" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">PHP免费学习笔记(深入)</a>”;</p>')
->getDocument();
// 返回:
// ['type' => 'doc', 'content' => …]</code>你也可以获取 JSON 字符串:
<code>(new \Tiptap\Editor)
->setContent('<p>Example Text</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/7fc7563c4182" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">PHP免费学习笔记(深入)</a>”;</p>')
->getJSON();
// 返回:
// {"type": "doc", "content": …}</code>将 Tiptap JSON 转换为 HTML
反向操作也同样简单,只需传递 JSON 字符串或 PHP 数组即可生成 HTML:
<code>(new \Tiptap\Editor)
->setContent([
'type' => 'doc',
'content' => [
[
'type' => 'paragraph',
'content' => [
[
'type' => 'text',
'text' => 'Example Text',
],
]
]
],
])
->getHTML();
// 返回:
// <h1>Example Text</h1></code>代码块的语法高亮
默认的 CodeBlock 扩展不支持语法高亮,但你可以使用 CodeBlockHighlight 扩展来实现:
<code>(new \Tiptap\Editor([
'extensions' => [
new \Tiptap\Extensions\StarterKit([
'codeBlock' => false,
]),
new \Tiptap\Nodes\CodeBlockHighlight(),
],
]))
->setContent('<code><?php phpinfo()</code>')
->getHTML();
// 返回:
// <code class="hljs php"><span class="hljs-meta"><?php</span> phpinfo()</code></code>如果你更喜欢 Shiki 语法高亮器,你需要先安装 shiki npm 包:
<code>npm install shiki</code>
然后使用 CodeBlockShiki 扩展:
<code>(new \Tiptap\Editor([
'extensions' => [
new \Tiptap\Extensions\StarterKit([
'codeBlock' => false,
]),
new \Tiptap\Nodes\CodeBlockShiki(),
],
]))
->setContent('<code><?php phpinfo()</code>')
->getHTML();</code>转换内容为纯文本
你还可以将内容转换为纯文本,例如用于搜索索引:
<code>(new \Tiptap\Editor)
->setContent('<h1>Heading</h1><p>Paragraph</p>')
->getText();
// 返回:
// "Heading
// Paragraph"</code>清理内容
使用 sanitize() 方法可以清理内容,移除不安全的标签:
<code>(new \Tiptap\Editor)
->sanitize('<p>Example Text<script>alert("HACKED!")</script></p>');
// 返回:
// '<p>Example Text</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/7fc7563c4182" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">PHP免费学习笔记(深入)</a>”;</p>'</code>修改内容
你可以使用 descendants() 方法递归地遍历所有节点,并修改它们:
<code>$editor->descendants(function (&$node) {
if ($node->type !== 'heading') {
return;
}
$node->attrs->level = 1;
});</code>使用 ueberdosis/tiptap-php 库,我能够轻松地在 PHP 中处理 Tiptap 内容,极大地提高了开发效率。这个库不仅提供了强大的转换功能,还支持语法高亮和内容清理等高级功能,使得我的内容管理系统更加健壮和用户友好。如果你也在处理 Tiptap 内容,强烈推荐尝试这个库。











