如何解决Tiptap内容在PHP中的转换和处理问题？使用ueberdosis/tiptap-php可以！-composer-PHP中文网

如何解决Tiptap内容在PHP中的转换和处理问题？使用ueberdosis/tiptap-php可以！

王林

发布： 2025-04-09 11:44:03

原创

949人浏览过

可以通过一下地址学习composer：学习地址

在开发一个内容管理系统时，我遇到了一个棘手的问题：如何在 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 扩展来实现：

PHP经典实例(第二版)

PHP经典实例（第2版）能够为您节省宝贵的Web开发时间。有了这些针对真实问题的解决方案放在手边，大多数编程难题都会迎刃而解。《PHP经典实例(第2版)》将PHP的特性与经典实例丛书的独特形式组合到一起，足以帮您成功地构建跨浏览器的Web应用程序。在这个修订版中，您可以更加方便地找到各种编程问题的解决方案，《PHP经典实例(第2版)》中内容涵盖了：表单处理；Session管理；数据库交互；使用We

453

查看详情

<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 内容，强烈推荐尝试这个库。

以上就是如何解决Tiptap内容在PHP中的转换和处理问题？使用ueberdosis/tiptap-php可以！的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

如何自定义 composer 的二进制文件安装目录 (bin-dir)？线上环境部署时应该用 composer install 还是 update？如何在composer中处理需要编译或特殊安装步骤的依赖？ macOS (Mac) 系统安装 composer 教程及常见问题 composer如何处理平台包(platform packages)的依赖？