介紹
tiptap編輯器基于Prosemirror惫皱，完全可擴展且無渲染肠槽。可以輕松地將自定義節(jié)點添加為Vue組件揩慕。
強悍漆诽！基于Vue的無渲染的富文本編輯器——tiptap侮攀！
Github
為什么使用tiptap锣枝？
市面上有不少富文本編輯器厢拭，但大多數(shù)可能并不能滿足你的需求。編輯器應(yīng)該易于擴展撇叁，并且不應(yīng)基于舊的依賴項（例如jQuery）供鸠。對于React，已經(jīng)有一個名為Slate.js的出色編輯器陨闹，其模塊化給人留下深刻的印象楞捂。tiptap是基于Prosemirror進(jìn)行擴展開發(fā)的沒有很多公司在Prosemirror（富文本工具包）基礎(chǔ)上進(jìn)行開發(fā)。
無渲染要如何理解趋厉？
使用無渲染組件（函數(shù)式組件）寨闹，你將（幾乎）完全控制標(biāo)記和樣式。菜單的外觀或在DOM中的顯示位置君账。這完全取決于使用者繁堡。
安裝和使用
- 安裝
npm install tiptap
#或者
yarn add tiptap
- 使用
<template>
<editor-content :editor="editor" />
</template>
<script>
// Import the editor
import { Editor, EditorContent } from 'tiptap'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
content: '<p>This is just a boring paragraph</p>',
})
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
Demo截圖
下面是來自官方網(wǎng)站的一組Demo截圖：
- 基本使用
強悍！基于Vue的無渲染的富文本編輯器——tiptap乡数！
- 菜單氣泡
強悍椭蹄！基于Vue的無渲染的富文本編輯器——tiptap！
- 浮動菜單
強悍净赴！基于Vue的無渲染的富文本編輯器——tiptap绳矩！
- 添加鏈接
強悍！基于Vue的無渲染的富文本編輯器——tiptap玖翅！
- 圖片
強悍翼馆！基于Vue的無渲染的富文本編輯器——tiptap割以！
- 可隱藏菜單欄
點擊可隱藏菜單欄
強悍！基于Vue的無渲染的富文本編輯器——tiptap写妥！
- 待辦事項清單
強悍拳球！基于Vue的無渲染的富文本編輯器——tiptap！
- 表格table
強悍珍特！基于Vue的無渲染的富文本編輯器——tiptap祝峻！
- 搜索和替換
強悍！基于Vue的無渲染的富文本編輯器——tiptap扎筒！
- 輸入建議
強悍莱找！基于Vue的無渲染的富文本編輯器——tiptap！
- 快捷支持Markdown
強悍嗜桌！基于Vue的無渲染的富文本編輯器——tiptap奥溺！
- 代碼突出高亮顯示
強悍！基于Vue的無渲染的富文本編輯器——tiptap骨宠！
- 歷史記錄
強悍浮定！基于Vue的無渲染的富文本編輯器——tiptap！
- 只讀
強悍层亿！基于Vue的無渲染的富文本編輯器——tiptap桦卒！
- 嵌入
強悍！基于Vue的無渲染的富文本編輯器——tiptap匿又！
- 占位符
強悍方灾！基于Vue的無渲染的富文本編輯器——tiptap！
- 焦點
強悍碌更！基于Vue的無渲染的富文本編輯器——tiptap裕偿！
- 可通過前后端搭配實現(xiàn)協(xié)同編輯
強悍！基于Vue的無渲染的富文本編輯器——tiptap痛单！
- 標(biāo)題
強悍嘿棘！基于Vue的無渲染的富文本編輯器——tiptap！
- 末尾段落
可理解為對圖片等的解釋說明等等旭绒，可靈活使用
強悍鸟妙！基于Vue的無渲染的富文本編輯器——tiptap！
- 導(dǎo)出html和json
強悍快压！基于Vue的無渲染的富文本編輯器——tiptap圆仔！
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)用程序的需要對其進(jìn)行定制嗦锐。
強悍！基于Vue的無渲染的富文本編輯器——tiptap沪曙！
總結(jié)
tiptap是一個相當(dāng)不錯的富文本編輯器奕污，其無渲染特性以及可實現(xiàn)的協(xié)同編輯讓其擴展更加方便！enjoy it液走！
