下载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>