從 Flowbite 的 WYSIWYG 文字編輯器 是基於 Tip Tap 函式庫的開源專案，採用 MIT 授權，允許您輕鬆編輯具有排版樣式、連結、圖片、影片等的複雜文字數據。
Flowbite 提供的標記和樣式都是使用 Tailwind CSS 的工具類別構建的，以及 WYSIWYG 文字編輯器內部內容的樣式基於 Flowbite Typography 外掛。
本頁提供的所有範例都支援深色模式、RTL（從右到左）樣式、響應式移動裝置，並且您可以輕鬆使用 JavaScript 和 Flowbite API 添加自己的功能。
開始使用
在繼續之前，請確保您的專案中已安裝 Tailwind CSS、Flowbite 和 Tip Tap。
遵循 Flowbite 的 快速入門指南 以啟用互動元素。
安裝 Flowbite Typography 外掛以格式化 WYSYWYG 編輯器預覽中的文字內容：
npm i flowbite-typography在 tailwind.config.js 檔案中引入該外掛：
theme: {
// ...
},
plugins: [
require('flowbite-typography'),
// ...
],
}將 Flowbite 外掛中的 wysiwyg 欄位設置為 true 以啟用偽樣式：
plugins: [
require('flowbite/plugin')({
wysiwyg: true,
}),
// ... 其他外掛
]最後，通過 NPM 安裝 Tip Tap，或者如果您使用 CDN 則可以跳過此步驟：
npm install @tiptap/core @tiptap/pm @tiptap/starter-kit現在，您可以通過複製 HTML 標記和 JavaScript 代碼來使用下面的範例。
預設文字編輯器
使用這個 WYSIWYG 文字編輯器的範例，以啟用基本的排版樣式和格式化，添加列表、連結、圖片、影片、代碼區塊、對齊文字、引用、設置標題和段落等等。
文字格式化
使用這個 WYSIWYG 文字編輯器範例來啟用排版樣式、格式化和標記，例如底線、粗體、斜體、刪除線、代碼、顯示和選擇文字大小、顏色、字體等，使用 Tailwind CSS 的工具類別。
文字對齊
啟用 WYSIWYG 組件中內容的左對齊、居中、右對齊和兩端對齊。
排版元素
使用這個範例來創建排版元素，例如項目列表、有序列表、引用、水平線、段落、標題、代碼區塊，基於 Tailwind CSS 工具類別和 Flowbite API。
設定連結
使用這個範例來為 WYSIWYG 文字編輯器中的內容添加和移除錨點連結。
使用圖片
使用這個範例學習如何在 WYSIWYG 文字編輯器中添加圖片及配置設置，例如圖片 URL、對 SEO 和可及性的圖片替代屬性，以及圖片標題。
添加影片
使用這個範例來根據 YouTube URL 來源在 WYSIWYG 文字編輯器中嵌入影片，並使用 Flowbite 模態元件 API 設定影片的寬度和高度。
編輯表格
使用這個範例在 WYSIWYG 文字編輯器中編輯表格數據，通過添加和移除表格列、列以及單元格，並使用其他功能來導航表格數據，以便更方便地進行編輯。
復原和重做
使用 WYSIWYG 文字編輯器組件的歷史功能來整合復原和重做操作。
匯出數據
使用 editor.getJSON() 和 editor.getHTML() 函數，將 WYSIWYG 文字編輯器中的文本內容以 JSON 或原始 HTML 格式匯出，以持久化到您的資料庫或 API 結構中。
JavaScript 行為
了解如何使用 JavaScript 以程式化方式使用 WYSIWYG 編輯器，通過創建物件的新實例、設置選項、方法、事件監聽器等來與您的代碼庫集成。
在您通過 NPM 或 CDN 安裝 Tip Tap 之後，您可以創建一個新的 Editor 物件：
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
new Editor({
element: document.getElementById('wysiwyg'),
extensions: [StarterKit],
content: '<p>歡迎來到 Flowbite！</p>',
})請確保您也有一個空的 div 元素，ID 合適：
<div id="wysiwyg"></div>這段代碼將自動設置 WYSIWYG 組件內部所需的標記。請注意 Tip Tap 函式庫是無頭的，因此您需要自己為元素設置樣式，但您可以從本頁的 Flowbite 例子中複製粘貼。
內容樣式
我們也建議添加來自 Flowbite Typography 套件的自定義排版類別，以便文本編輯器內部的內容能夠正確顯示樣式：
new Editor({
element: document.getElementById('wysiwyg'),
extensions: [StarterKit],
content: '<p>歡迎來到 Flowbite！</p>',
editorProps: {
attributes: {
class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',
},
}
})擴展
Tip Tap 是一個模組化函式庫，這意味著如果您想在 WYSIWYG 組件內部引入圖片、影片、連結和其他元素，則需要從函式庫中具體引入這些資源並在初始化 Editor 物件時將其設置為擴展。
這裡有一個範例，我們添加了連結擴展：
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import Link from '@tiptap/extension-link';
const editor = new Editor({
element: document.querySelector('#wysiwyg-links-example'),
extensions: [
StarterKit,
Link.configure({
openOnClick: false,
autolink: true,
defaultProtocol: 'https',
})
],
content: '<p>Flowbite 是一個 <strong>基於工具優先的 Tailwind CSS 框架的開源 UI 組件庫</strong>，支援深色模式、Figma 設計系統等等。</p><p>它包括網站所需的所有常用組件，例如按鈕、下拉選單、導航欄、模態框、日期選擇器、進階圖表，等等。</p><p>了解有關所有組件的更多信息，請參見 <a href="https://flowbite.com/docs/getting-started/introduction/">Flowbite 文檔</a>。</p>',
editorProps: {
attributes: {
class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',
},
}
});方法
您可以輕鬆調用 Editor 物件中的方法以設置文字樣式、連結、圖片等。以下是一個範例，根據按鈕上的點擊事件，您將被提示輸入連結的 URL，並且它將被添加到當前選定的文字中：
// 為按鈕設置自定義事件監聽器
document.getElementById('toggleLinkButton').addEventListener('click', () => {
const url = window.prompt('輸入圖片網址:', 'https://flowbite.com');
editor.chain().focus().toggleLink({ href: url }).run();
});這裡是另一個範例，您可以移除一個連結：
// 根據按鈕點擊取消連結
document.getElementById('removeLinkButton').addEventListener('click', () => {
editor.chain().focus().unsetLink().run()
});本頁中的例子具有功能元素，因此您可以查看 JavaScript 標籤以獲取源代碼。
授權
本頁的資源均根據 MIT 許可證授權，包括 Flowbite 例子和 Tip Tap。
感謝
這些範例的實現不可能沒有以下開源資源的使用：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式