wangEditor编辑器的使用(上传图片/禁用/初始化等)
官方文档:https://doc.wangeditor.com/官方示例:https://www.wangeditor.com/在使用wangEditor之前需要先进行安装npm i wangeditor --save在安装完成后需要导入才能使用:import E from 'wangeditor'在开发时,需要将wangeditor作为组件进行开发,新建文件,在文件内的部分是整个编辑器的内容(如
官方文档:https://doc.wangeditor.com/
官方示例:https://www.wangeditor.com/
这里需要先创建富文本,但是有其他操作,例如给富文本设置数据,修改数据,禁用富文本,可编辑,图片上传,根据不同的状态禁用,数据也是
不断变化,同时需要获取数据等操作。。。
父组件使用wangeditor
子组件的文件名为:wangEditor.vue
使用的为vue
在使用wangEditor之前需要先进行安装
npm i wangeditor --save
在安装完成后需要导入才能使用:
import E from 'wangeditor'
在开发时,需要将wangeditor作为组件进行开发,新建文件,在文件内的部分是整个编辑器的内容(如果在你 需要使用的文件内添加,无法展示。也有可能是自己代码问题确实无法展示),在使用编辑器时引入即可。
一、创建
在使用的时候,需要先创建编辑器,可以看到标签很简单,需要挂载
this.editor = new E(this.$refs.editorElem)
this.editor.create()
这一部分已经创建完成了编辑器。
二、上传图片
需要服务器支持上传图片操作,因为需要上传到其他的服务器 ,手动配置
1.配置服务端接口
this.editor.config.uploadImgServer = 'https://xxx' // 这里替换链接
接口需要返回json数据格式
2.配置参数和请求头
因为上传图片时需要token,这两个方法都有试过,均可。
//自定义参数
// this.editor.config.uploadParams = {
// token: this.token,
// }
//自定义请求头
this.editor.config.uploadImgHeaders= {
'X-Access-Token': this.token,
}
这个自定义上传图片图片的名称为 file
this.editor.config.uploadFileName = 'file'
3.自己上传
这里使用自己上传的原因是,在上述的几个操作添加完后,还是有上传失败的报错,然后经过搜索,看到了别人的写法
this.editor.config.customUploadImg = function (files, insert) {}
自己上传写在这个里面,上传并且拿到响应得到的图片 https://image....链接,表示上传成功。
insert(imgUrl)
成功之后,要把这个东西添加到富文本内。拿到值之后,需要将值传递给父组件。
4.设置内容
this.editor.txt.html()
5.禁用
this.editor.disable()
6.启用
this.editor.enable()
三、给父组件传值
这里需要把值传递给父组件,通过onchange(均为小写)事件,每次改变会获取其html内容
// 子组件内
this.editor.config.onchange = (html) => {
this.$emit('catchData', html) // 给父组件传递文本数据
}
父组件:
先引入组件,引入后需要注册组件,在最后的全量代码有
import wangEditor from './wangEditor'
<wang-editor
:disabled="notEditBasicInfo"
style="position: relative; z-index: 0"
@catchData="catchData"
:explanation="explanation"
v-model="explanation"
></wang-editor>
可以看到这里父组件给子组件传递的参数:disabled,explanation
子组件给父传递的数据:在catchData里
这里的父子组件传参就不细说了
详细的基本上就完了。。。。
组件 wangEditor.vue 的全部代码:
<template>
<div id="wangeditor">
<div ref="editorElem" style="text-align: left"></div>
</div>
</template>
<script>
import E from 'wangeditor'
import Vue from 'vue'
import { axios } from '@/utils/request'
export default {
name: 'Editor',
data() {
return {
editor: null,
token: 'aaa', // 需要获取token赋值
}
},
// catchData是一个类似回调函数,来自父组件,当然也可以自己写一个函数,主要是用来获取富文本编辑器中的html内容用来传递给服务端
props: {
explanation: '',
disabled: '',
}, // 接收父组件的方法
mounted() {
this.editor = new E(this.$refs.editorElem)
// 上传图片路径
this.editor.config.uploadImgServer = 'https://xxx'
// this.editor.config.uploadParams = {
// token: this.token,
// }
this.editor.config.uploadImgHeaders = {
'X-Access-Token': this.token,
}
this.editor.config.uploadFileName = 'file'
this.editor.config.customUploadImg = function (files, insert) {
const formData = new FormData()
formData.append('file', files[0])
axios({
//上传图片到后台
method: 'post',
url: 'https://xxx',
data: formData,
}).then((res) => {
console.log('resresresres', res)
if (res.success) {
console.log(res.result)
var imgUrl = res.result.visiturl //后台返回的文件路径
insert(imgUrl) //生成img标签并插入文章中
} else {
res.message && this.$message.error(res.message)
}
})
// insert 是获取图片 url 后,插入到编辑器的方法
// 上传代码返回结果之后,将图片插入到编辑器中
}
// 编辑器的事件,每次改变会获取其html内容
this.editor.config.onchange = (html) => {
this.$emit('catchData', html)
} //把这个html通过catchData的方法传入父组件
// this.editor.config.menus = [
// // 菜单配置
// 'head', // 标题
// 'bold', // 粗体
// 'fontSize', // 字号
// 'fontName', // 字体
// 'italic', // 斜体
// 'underline', // 下划线
// 'strikeThrough', // 删除线
// 'foreColor', // 文字颜色
// 'backColor', // 背景颜色
// 'link', // 插入链接
// 'list', // 列表
// 'justify', // 对齐方式
// 'quote', // 引用
// 'emoticon', // 表情
// 'image', // 插入图片
// 'table', // 表格
// 'code', // 插入代码
// 'undo', // 撤销
// 'redo' // 重复
// ];
this.editor.create() // 创建富文本实例
console.log('this.disabled', this.disabled)
// this.editor.txt.html(this.explanation)
if (this.explanation == undefined || this.explanation == '' || this.explanation == null) {
let a = ''
this.editor.txt.html(a)
} else {
this.editor.txt.html(this.explanation)
}
if (this.disabled) {
this.editor.disable()
} else {
this.editor.enable()
}
},
watch: {
explanation(val) {
if (val == undefined || val == '' || val == null) {
let a = ''
this.editor.txt.html(a)
} else {
this.editor.txt.html(val)
}
},
disabled() {
if (this.disabled) {
this.editor.disable()
} else {
this.editor.enable()
}
},
},
}
</script>
watch内的代码看似重复,但是这个是在富文本内的值在不断变化时,设置值的操作。。。非常有用!!!
更多推荐
所有评论(0)