vue2富文本编辑---简单实现文字、图片、视频等功能可以同时编辑

效果图：

1、安装

yarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --save

yarn add @wangeditor/editor-for-vue # 或者 npm install @wangeditor/editor-for-vue --save

2、在对应使用页面加入

a、html:

<template>
		<div class="content-box">
<!-- 引入富文本编辑器 start -->
						<template>
							<div style="border: 1px solid #ccc;margin: 20px 20px 20px 30px;">
								<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor"
									:defaultConfig="toolbarConfig" :mode="mode" />
								<Editor style="height: 500px; overflow-y: hidden;" v-model="html"
									:defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
							</div>
						</template>
						<!-- 引入富文本编辑器 end -->
		</div>
</template>

b、js:

在<script>内引入组件和需要用的文件：

<script>
import axios from 'axios'
	import Vue from 'vue'
	import {
		Editor,
		Toolbar
	} from '@wangeditor/editor-for-vue'
</script>	

 注册组件在export default {}中：

export default {
//注册组件
		components: {
			Editor,
			Toolbar
		},
}

在data() {}中定义需要用到的参数和配置上传图片视频相关信息

data() {
// 富文本编辑器 -- start
				editor: null, // 编辑
				html: '', // 最后传给后端的富文本字符串
				toolbarConfig: {}, //工具栏配置
				editorConfig: { // 编辑器配置   
					placeholder: '请输入内容...',
					// 所有的菜单配置，都要在 MENU_CONF 属性下
					MENU_CONF: {
						// 配置上传图片
						uploadImage: {
							customUpload: this.updateImg, // 封装的上传图片和视频方法
						},
						// 配置上传是视频
						uploadVideo: {
							customUpload: this.updateImg,
						}
					}
				},
				mode: 'default', // or 'simple' or 'default'
				// 富文本编辑器 -- end
},

在methods写入公共封装的上传图片和视频的方法

methods: {
			// 上传图片和视频封装
			updateImg(file, insertFn) {
				let _this = this
				// 上传图片接口
				// FormData 对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据 (keyed data)，而独立于表单使用。如果表单enctype属性设为 multipart/form-data，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。
				let params = new FormData()
				params.append('file', file) // file 即选中的文件
				// 发送上传图片请求  _this.uploadsImg 上传服务器接口路径    params上传参数
				axios.post(_this.uploadsImg +'goods',params,{ 
					headers: { // 请求头
						 token: getToken(), // 上传token
						"Content-type": 'application/x-www-form-urlencoded'
					}
				}).then(res => {
					//成功提示
					_this.$message({
						type: 'success',
						message: '上传成功!'
					});
					// 最后插入图片到富文本编辑器中   放入的是可访问的全路径
					insertFn(res.data.data); // 这里的res.data.data 是上传到服务器返回的可访问的全路径，有特殊需要需特殊封装
				});
			},
},

 在加一个周期函数

// 在页面 销毁前
		beforeDestroy() {
			const editor = this.editor
			if (editor == null) return
			editor.destroy() // 组件销毁时，及时销毁编辑器
		}

a、css:

一定要引入编辑器的样式

<!-- 引入富文本编辑器css -->
<style src="@wangeditor/editor/dist/css/style.css"></style>

我是用的WangEditor实现的，如果想用其他的也可以访问：11款vue富文本编辑器推荐 - 极客库

最后全部我做的就是这样子了，基本效果是可以完成的，至于有特殊配置或者需求的，可以访问

官网：http://www.wangeditor.com/index.html