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

王林
发布: 2025-04-09 11:44:03
原创
851人浏览过

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

在开发一个内容管理系统时,我遇到了一个棘手的问题:如何在 php 环境中高效地处理 tiptap 编辑器生成的内容。tiptap 是一个基于 prosemirror 的富文本编辑器,它生成的 json 格式内容需要在后端进行转换和处理,但这对我来说是一个全新的挑战。我尝试了多种方法,但都未能找到一个既简单又高效的解决方案。最终,我发现了 ueberdosis/tiptap-php 这个库,它完美地解决了我的问题。

使用 ueberdosis/tiptap-php 库,你可以轻松地在 PHP 中处理 Tiptap 内容。它提供了多种功能,包括将 Tiptap JSON 转换为 HTML,反之亦然,内容清理和修改等。安装这个库非常简单,只需通过 Composer 即可:

composer require ueberdosis/tiptap-php
登录后复制

这个库的使用非常直观,如果你熟悉 Tiptap 的 JavaScript API,那么 PHP 版本的语法也会让你感到熟悉。以下是一些常见的使用场景:

将 Tiptap HTML 转换为 JSON

你可以将 HTML 片段转换为 Tiptap 兼容的 PHP 数组结构:

(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' => …]
登录后复制

你也可以获取 JSON 字符串:

(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": …}
登录后复制

将 Tiptap JSON 转换为 HTML

反向操作也同样简单,只需传递 JSON 字符串或 PHP 数组即可生成 HTML:

(new \Tiptap\Editor)
    ->setContent([
        'type' => 'doc',
        'content' => [
            [
                'type' => 'paragraph',
                'content' => [
                    [
                        'type' => 'text',
                        'text' => 'Example Text',
                    ],
                ]
            ]
        ],
    ])
    ->getHTML();

// 返回:
// <h1>Example Text</h1>
登录后复制

代码块的语法高亮

默认的 CodeBlock 扩展不支持语法高亮,但你可以使用 CodeBlockHighlight 扩展来实现:

(new \Tiptap\Editor([
    'extensions' => [
        new \Tiptap\Extensions\StarterKit([
            'codeBlock' => false,
        ]),
        new \Tiptap\Nodes\CodeBlockHighlight(),
    ],
]))
->setContent('<?php phpinfo()')
->getHTML();

// 返回:
// <span class="hljs-meta"><?php</span> phpinfo()
登录后复制

如果你更喜欢 Shiki 语法高亮器,你需要先安装 shiki npm 包:

npm install shiki
登录后复制

然后使用 CodeBlockShiki 扩展:

(new \Tiptap\Editor([
    'extensions' => [
        new \Tiptap\Extensions\StarterKit([
            'codeBlock' => false,
        ]),
        new \Tiptap\Nodes\CodeBlockShiki(),
    ],
]))
->setContent('<?php phpinfo()')
->getHTML();
登录后复制

转换内容为纯文本

你还可以将内容转换为纯文本,例如用于搜索索引:

(new \Tiptap\Editor)
    ->setContent('<h1>Heading</h1><p>Paragraph</p>')
    ->getText();

// 返回:
// "Heading

// Paragraph"
登录后复制

清理内容

使用 sanitize() 方法可以清理内容,移除不安全的标签:

(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>'
登录后复制

修改内容

你可以使用 descendants() 方法递归地遍历所有节点,并修改它们:

$editor->descendants(function (&$node) {
    if ($node->type !== 'heading') {
        return;
    }

    $node->attrs->level = 1;
});
登录后复制

使用 ueberdosis/tiptap-php 库,我能够轻松地在 PHP 中处理 Tiptap 内容,极大地提高了开发效率。这个库不仅提供了强大的转换功能,还支持语法高亮和内容清理等高级功能,使得我的内容管理系统更加健壮和用户友好。如果你也在处理 Tiptap 内容,强烈推荐尝试这个库。

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

PHP速学教程(入门到精通)
PHP速学教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号