Vue使用wangEdiotr富文本编辑器+富文本图片上传到oss

下载wangEdiotr

npm i wangeditor --save 

为了在项目中统一使用，我将其封装成组件，方便调用
，oss的配置在上篇文章有 传送门

<template>
	<div id="wangeditor">
		<div ref="editorElem" style="text-align: left"></div>
	</div>
</template>
<script>
	import {
     
     
		client
	} from "../../util/js/ali_oss.js";
	import E from "wangeditor";
	export default {
     
     
		data() {
     
     
			return {
     
     
				editor: "",
				editorHtml: '',
			}
		},
		props: ['editorContent'],
		methods:{
     
     
			setEditor(res){
     
     
				this.editor.txt.html(res)
			},
			newEditor(){
     
     
				// 富文本
				this.editor = new E(this.$refs.editorElem);
				// 编辑器的事件，每次改变会获取其html内容
				this.editor.config.onchange = (html) => {
     
     
					this.editorHtml = html;
				};
				// 富文本上传方法
				this.editor.config.customUploadImg = (resultFiles, insertImgFn) => {
     
     
					var fileName = resultFiles[0].name;
					// oss 上传方法
					client().multipartUpload(fileName, resultFiles[0]).then((res) => {
     
     
						insertImgFn(this.alOssUrl + res.name)
					});
				}
				// 配置全屏功能按钮是否展示
				this.editor.config.showFullScreen = false
				this.editor.create(); // 创建富文本实例
			}
		},
		mounted() {
     
     
			this.newEditor()
		},
		watch: {
     
     
			//监听值的变化 实时传递
			editorHtml: {
     
     
				handler(res) {
     
     
					this.$emit('editorHtml', res)
				},
				immediate: true
			},
			//监听赋值
			editorContent: {
     
     
				handler(res) {
     
     
					this.setEditor(res)
				},
			}
		},
	}
</script>
<style scoped>
	#wangeditor{
     
     
		position: relative;
	}
</style>

使用方法：直接引用组件就可以了

import editor from '../../util/components/editor.vue'

components: {
			editor,
		},

//@editorHtml='getElem' 接收富文本值的方法   
//:editorContent.sync='security' 编辑赋值到富文本
<editor @editorHtml='getElem' :editorContent.sync='security'></editor>