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

創新互聯主要從事成都網站建設、網站制作、網頁設計、企業做網站、公司建網站等業務。立足成都服務汕城,十多年網站建設經驗,價格優惠、服務專業,歡迎來電咨詢建站服務:13518219792

為什么使用tiptap？

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

無渲染要如何理解？

使用無渲染組件（函數式組件），你將（幾乎）完全控制標記和樣式。菜單的外觀或在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截圖

下面是來自官方網站的一組Demo截圖：

• 基本使用

• 菜單氣泡

• 浮動菜單

• 添加鏈接

• 圖片

• 可隱藏菜單欄

點擊可隱藏菜單欄

• 待辦事項清單

• 表格table

• 搜索和替換

• 輸入建議

• 快捷支持Markdown

• 代碼突出高亮顯示

• 歷史記錄

• 只讀

• 嵌入

• 占位符

• 焦點

• 可通過前后端搭配實現協同編輯

• 標題

• 末尾段落

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

• 導出html和json

ProseMirror簡介

ProseMirror   用于在網絡應用程序上構建富文本編輯器的工具包，視圖解決Markdown和經典WYSIWYG（所見即所得）編輯器。它通過實現WYSIWYG樣式的編輯界面來實現此目的，以使文檔比純HTML更加受約束和結構化。可以自定義編輯器創建的文檔的形狀和結構，并根據應用程序的需要對其進行定制。

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注創新互聯行業資訊頻道，感謝您對創新互聯的支持。

網頁標題：Vue中如何使用tiptap富文本編輯器
文章網址：http://www.yijiale78.com/article34/pcphse.html

成都網站建設公司_創新互聯，為您提供定制網站、企業建站、域名注冊、移動網站建設、App設計、App開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯