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

下载wangEdiotr

npm i wangeditor --save

为了在项目中统一使用，我将其封装成组件，方便调用

，oss的配置在上篇文章有 传送门

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)

},

}

},

}

#wangeditor{

position: relative;

}

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

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

components: {

editor,

},

//@editorHtml='getElem' 接收富文本值的方法

//:editorContent.sync='security' 编辑赋值到富文本

标签：文本编辑,Vue,..,res,oss,wangEdiotr,editorHtml,editor,文本

来源： https://blog.csdn.net/qq_40788898/article/details/114287878