Vue中如何使用tiptap富文本編輯器，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)主要從事成都網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)汕城,十多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792

為什么使用tiptap？

市面上有不少富文本編輯器，但大多數(shù)可能并不能滿足你的需求。編輯器應(yīng)該易于擴(kuò)展，并且不應(yīng)基于舊的依賴項(xiàng)（例如jQuery）。對(duì)于React，已經(jīng)有一個(gè)名為Slate.js的出色編輯器，其模塊化給人留下深刻的印象。tiptap是基于Prosemirror進(jìn)行擴(kuò)展開發(fā)的沒有很多公司在Prosemirror（富文本工具包）基礎(chǔ)上進(jìn)行開發(fā)。

無渲染要如何理解？

使用無渲染組件（函數(shù)式組件），你將（幾乎）完全控制標(biāo)記和樣式。菜單的外觀或在DOM中的顯示位置。這完全取決于使用者。

安裝和使用

• 安裝

npm install tiptap #或者 yarn add tiptap

• 使用

Demo截圖

下面是來自官方網(wǎng)站的一組Demo截圖：

• 基本使用

• 菜單氣泡

• 浮動(dòng)菜單

• 添加鏈接

• 圖片

• 可隱藏菜單欄

點(diǎn)擊可隱藏菜單欄

• 待辦事項(xiàng)清單

• 表格table

• 搜索和替換

• 輸入建議

• 快捷支持Markdown

• 代碼突出高亮顯示

• 歷史記錄

• 只讀

• 嵌入

• 占位符

• 焦點(diǎn)

• 可通過前后端搭配實(shí)現(xiàn)協(xié)同編輯

• 標(biāo)題

• 末尾段落

可理解為對(duì)圖片等的解釋說明等等，可靈活使用

• 導(dǎo)出html和json

ProseMirror簡介

ProseMirror   用于在網(wǎng)絡(luò)應(yīng)用程序上構(gòu)建富文本編輯器的工具包，視圖解決Markdown和經(jīng)典WYSIWYG（所見即所得）編輯器。它通過實(shí)現(xiàn)WYSIWYG樣式的編輯界面來實(shí)現(xiàn)此目的，以使文檔比純HTML更加受約束和結(jié)構(gòu)化?？梢宰远x編輯器創(chuàng)建的文檔的形狀和結(jié)構(gòu)，并根據(jù)應(yīng)用程序的需要對(duì)其進(jìn)行定制。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。