可以通過一下地址學(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è)庫。