新聞中心
介紹
tiptap編輯器基于Prosemirror,完全可擴展且無渲染??梢暂p松地將自定義節(jié)點添加為Vue組件。

目前成都創(chuàng)新互聯(lián)公司已為1000多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站改版維護、企業(yè)網(wǎng)站設(shè)計、太和網(wǎng)站維護等服務(wù),公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。
Github
https://github.com/scrumpy/tiptap
為什么使用tiptap?
市面上有不少富文本編輯器,但大多數(shù)可能并不能滿足你的需求。編輯器應(yīng)該易于擴展,并且不應(yīng)基于舊的依賴項(例如jQuery)。對于React,已經(jīng)有一個名為Slate.js的出色編輯器,其模塊化給人留下深刻的印象。tiptap是基于Prosemirror進行擴展開發(fā)的沒有很多公司在Prosemirror(富文本工具包)基礎(chǔ)上進行開發(fā)。
無渲染要如何理解?
使用無渲染組件(函數(shù)式組件),你將(幾乎)完全控制標記和樣式。菜單的外觀或在DOM中的顯示位置。這完全取決于使用者。
安裝和使用
- 安裝
- npm install tiptap
- #或者
- yarn add tiptap
- 使用
Demo截圖
下面是來自官方網(wǎng)站的一組Demo截圖:
- 基本使用
- 菜單氣泡
- 浮動菜單
- 添加鏈接
- 圖片
- 可隱藏菜單欄
點擊可隱藏菜單欄
- 待辦事項清單
- 表格table
- 搜索和替換
- 輸入建議
- 快捷支持Markdown
- 代碼突出高亮顯示
- 歷史記錄
- 只讀
- 嵌入
- 占位符
- 焦點
- 可通過前后端搭配實現(xiàn)協(xié)同編輯
- 標題
- 末尾段落
可理解為對圖片等的解釋說明等等,可靈活使用
- 導(dǎo)出html和json
ProseMirror簡介
ProseMirror 用于在網(wǎng)絡(luò)應(yīng)用程序上構(gòu)建富文本編輯器的工具包,視圖解決Markdown和經(jīng)典WYSIWYG(所見即所得)編輯器。它通過實現(xiàn)WYSIWYG樣式的編輯界面來實現(xiàn)此目的,以使文檔比純HTML更加受約束和結(jié)構(gòu)化。可以自定義編輯器創(chuàng)建的文檔的形狀和結(jié)構(gòu),并根據(jù)應(yīng)用程序的需要對其進行定制。
https://github.com/prosemirror
總結(jié)
tiptap是一個相當不錯的富文本編輯器,其無渲染特性以及可實現(xiàn)的協(xié)同編輯讓其擴展更加方便!enjoy it!
本文題目:強悍!基于Vue的無渲染的富文本編輯器tiptap
網(wǎng)站網(wǎng)址:http://www.5511xx.com/article/cdicosp.html


咨詢
建站咨詢
