因为公司需要用到百度的富文本编辑器，并且要用到上传图片的功能。但是因为官方的例子是前后端不分离的，上传功图片到oss需要后端配置一堆东西。在网上看到很多demo也是需要配置后端代码了，基本没看到符合自己的需求，我的需求很简单，不碰任何的后端代码，把上传图片的功能独立出来直接上传oss并返回图片的url。经过对源码的一顿骚操作之后终于改好了，咔咔咔。。。。
废话不多说先上效果图
1.jpg
下面说下具体步骤
1.到git@github.com:LiveJie/vue-ueditor.git 下载ueditor
2.在项目中引入下载的ueditor根据项目不同在适当的地方引入vue2的话应该是在static引入 我现在的版本应该是vue3 static在public下面
2.jpg
3.在index.html引入ueditor主要文件(本人试过在组件里面request但是会一直卡死...)
3.jpg
4.配置ueditor.config.js文件 （需要配置一个oss的地址，还有一个是带在header的token名字）因为公司目前只需要上传单张图片的支持 所以只做了上传单张图片的处理
4.jpg
5.现在准备编写组件 新建一个Ueditor.vue文件写入以下内容
<template>
<div id="editor" type="text/plain" style="width:1024px;height:500px;" />
</template>
<script>
/**
* value 父组件绑定值
* changeContent 父组件改变绑定value的事件
*/
export default {
name: 'Ueditor',
props: {
value: {
type: String,
default: null
},
changeContent: {
type: Function,
default: null
}
},
computed: {
},
created() {
},
mounted() {
window.UE.delEditor('editor')
this.UE = window.UE.getEditor('editor')
window.ueMessage = this.$message
const _this = this
this.UE.addListener('contentChange', function(editor) {
_this.getContent()
})
setTimeout(() => {
this.value && this.setContent(this.value)
}, 1000)
},
methods: {
// 获取文本内容
getContent() {
this.changeContent(this.UE.getContent())
},
// 设置文本内容
setContent(content) {
this.UE.setContent(content)
}
}
}
</script>
<style scoped>
</style>
6.引用组件
<template>
<div class="createNews-module">
<Ueditor ref="ueditor" v-model="ueditorContent" :change-content="changeContent" />
</div>
</template>
<script>
import Ueditor from '@/components/Ueditor'
export default {
components: {Ueditor },
data() {
return {
ueditorContent: '',
}
},
mounted() {
},
methods: {
// 改变富文本编辑器的内容
changeContent(content) {
this.ueditorContent = content
}
}
