Vue中富文本编辑器的使用

基于 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、创建 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})
}