.jpg)
可以通過一下地址學(xué)習(xí)composer：學(xué)習(xí)地址
在開發(fā)一個(gè)內(nèi)容管理系統(tǒng)時(shí)，我遇到了一個(gè)棘手的問題：如何在 php 環(huán)境中高效地處理 tiptap 編輯器生成的內(nèi)容。tiptap 是一個(gè)基于 prosemirror 的富文本編輯器，它生成的 json 格式內(nèi)容需要在后端進(jìn)行轉(zhuǎn)換和處理，但這對(duì)我來說是一個(gè)全新的挑戰(zhàn)。我嘗試了多種方法，但都未能找到一個(gè)既簡(jiǎn)單又高效的解決方案。最終，我發(fā)現(xiàn)了 ueberdosis/tiptap-php 這個(gè)庫，它完美地解決了我的問題。
使用 ueberdosis/tiptap-php 庫，你可以輕松地在 PHP 中處理 Tiptap 內(nèi)容。它提供了多種功能，包括將 Tiptap JSON 轉(zhuǎn)換為 html，反之亦然，內(nèi)容清理和修改等。安裝這個(gè)庫非常簡(jiǎn)單，只需通過 composer 即可：
composer require ueberdosis/tiptap-php
這個(gè)庫的使用非常直觀，如果你熟悉 Tiptap 的 JavaScript API，那么 PHP 版本的語法也會(huì)讓你感到熟悉。以下是一些常見的使用場(chǎng)景：
將 Tiptap HTML 轉(zhuǎn)換為 JSON
你可以將 HTML 片段轉(zhuǎn)換為 Tiptap 兼容的 PHP 數(shù)組結(jié)構(gòu)：
(new TiptapEditor) ->setContent('<p>Example Text</p><p><span>立即學(xué)習(xí)</span>“<a href="https://pan.quark.cn/s/7fc7563c4182" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">PHP免費(fèi)學(xué)習(xí)筆記（深入）</a>”；</p>') ->getDocument(); // 返回： // ['type' => 'doc', 'content' => …]
你也可以獲取 JSON 字符串：
(new TiptapEditor) ->setContent('<p>Example Text</p><p><span>立即學(xué)習(xí)</span>“<a href="https://pan.quark.cn/s/7fc7563c4182" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">PHP免費(fèi)學(xué)習(xí)筆記（深入）</a>”；</p>') ->getJSON(); // 返回： // {"type": "doc", "content": …}
將 Tiptap JSON 轉(zhuǎn)換為 HTML
反向操作也同樣簡(jiǎn)單，只需傳遞 JSON 字符串或 PHP 數(shù)組即可生成 HTML：
(new TiptapEditor) ->setContent([ 'type' => 'doc', 'content' => [ [ 'type' => 'paragraph', 'content' => [ [ 'type' => 'text', 'text' => 'Example Text', ], ] ] ], ]) ->getHTML(); // 返回： // <h1>Example Text</h1>
代碼塊的語法高亮
默認(rèn)的 CodeBlock 擴(kuò)展不支持語法高亮，但你可以使用 CodeBlockHighlight 擴(kuò)展來實(shí)現(xiàn)：
(new TiptapEditor([ 'extensions' => [ new TiptapExtensionsStarterKit([ 'codeBlock' => false, ]), new TiptapNodesCodeBlockHighlight(), ], ])) ->setContent('<?php phpinfo()') ->getHTML(); // 返回： // <span class="hljs-meta"><?php</span> phpinfo()
如果你更喜歡 Shiki 語法高亮器，你需要先安裝 shiki npm 包：
npm install shiki
然后使用 CodeBlockShiki 擴(kuò)展：
(new TiptapEditor([ 'extensions' => [ new TiptapExtensionsStarterKit([ 'codeBlock' => false, ]), new TiptapNodesCodeBlockShiki(), ], ])) ->setContent('<?php phpinfo()') ->getHTML();
轉(zhuǎn)換內(nèi)容為純文本
你還可以將內(nèi)容轉(zhuǎn)換為純文本，例如用于搜索索引：
(new TiptapEditor) ->setContent('<h1>Heading</h1><p>Paragraph</p>') ->getText(); // 返回： // "Heading // Paragraph"
清理內(nèi)容
使用 sanitize() 方法可以清理內(nèi)容，移除不安全的標(biāo)簽：
(new TiptapEditor) ->sanitize('<p>Example Text<script>alert("HACKED!")</script></p>'); // 返回： // '<p>Example Text</p><p><span>立即學(xué)習(xí)</span>“<a href="https://pan.quark.cn/s/7fc7563c4182" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">PHP免費(fèi)學(xué)習(xí)筆記（深入）</a>”；</p>'
修改內(nèi)容
你可以使用 descendants() 方法遞歸地遍歷所有節(jié)點(diǎn)，并修改它們：
$editor->descendants(function (&$node) { if ($node->type !== 'heading') { return; } $node->attrs->level = 1; });
使用 ueberdosis/tiptap-php 庫，我能夠輕松地在 PHP 中處理 Tiptap 內(nèi)容，極大地提高了開發(fā)效率。這個(gè)庫不僅提供了強(qiáng)大的轉(zhuǎn)換功能，還支持語法高亮和內(nèi)容清理等高級(jí)功能，使得我的內(nèi)容管理系統(tǒng)更加健壯和用戶友好。如果你也在處理 Tiptap 內(nèi)容，強(qiáng)烈推薦嘗試這個(gè)庫。
.png)
