基于 Vue 的富文本編輯器有很多，例如官方就收錄推薦了一些： https://github.com/vuejs/awesome-vue#rich-text-editing 。

這里我們以 element-tiptap 為例。

GitHub 倉庫：https://github.com/Leecason/element-tiptap
在線示例：https://leecason.github.io/element-tiptap
中文文檔：https://github.com/Leecason/element-tiptap/blob/master/README_ZH.md

1、安裝

npm i element-tiptap

2、初始配置

<template><el-tiptap lang="zh" v-model="content" :extensions="extensions"></el-tiptap> </template><script>import {ElementTiptap,Doc,Text,Paragraph,Heading,Bold,Underline,Italic,Image,Strike,ListItem,BulletList,OrderedList,TodoItem,TodoList,HorizontalRule,Fullscreen,Preview,CodeBlock } from 'element-tiptap' import 'element-tiptap/lib/index.css'export default {components: {'el-tiptap': ElementTiptap},data () {return {content: 'hello world',extensions: [new Doc(),new Text(),new Paragraph(),new Heading({ level: 3 }),new Bold({ bubble: true }), // 在氣泡菜單中渲染菜單按鈕new Image(),new Underline(), // 下劃線new Italic(), // 斜體new Strike(), // 刪除線new HorizontalRule(), // 華麗的分割線new ListItem(),new BulletList(), // 無序列表new OrderedList(), // 有序列表new TodoItem(),new TodoList(),new Fullscreen(),new Preview(),new CodeBlock()]}} } </script>

處理富文本編輯器中的圖片

1、創(chuàng)建 src/api/image.js 封裝數據接口

/* 素材請求相關模塊 */import request from '../utils/request'/* 上傳圖片素材 */ export const uploadImage = (data) => {return request({method: 'post',url: '/mp/v1_0/user/images',// 一般文件上傳的接口都要求把請求的Content-Types設置為multipart/form-data// 但是我們使用axios上傳文件的話不需要手動設置，你只要給data一個formData對象即可// new formData()data: data}) }

2、自定義圖片上傳到服務器

總結

以上是生活随笔為你收集整理的Vue中富文本编辑器的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。