Vue2 rich text editing---simple realization of text, picture, video and other functions can be edited at the same time

Renderings:

1. Installation

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

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

2. Add in the corresponding usage page

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:

Introduce components and required files in <script>:

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

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

Define the parameters to be used in data() {} and configure related information about uploading pictures and videos


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
},

Write the method of uploading pictures and videos in the public package in 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 是上传到服务器返回的可访问的全路径，有特殊需要需特殊封装
				});
			},
},

adding a periodic function

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

a、css:

Be sure to introduce the style of the editor

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

I implemented it with WangEditor, if you want to use others, you can also visit: 11 vue rich text editor recommendations - Geek Library

In the end, all I did is like this, the basic effect can be completed, as for special configuration or needs, you can visit

Official website: http://www.wangeditor.com/index.html