轻量级富文本编辑器wangEditor结合vue使用方法示例
程序员文章站
2022-03-20 15:13:14
1、安装
使用npm下载： `npm install wangeditor`
2、 创建实例
（1）基本用法：
...
1、安装
使用npm下载： `npm install wangeditor`
2、 创建实例
（1）基本用法：
<template>
<div>
<div id="editor" class="editor"></div>
</div>
</template>
<script>
import e from 'wangeditor'
export default {
name: 'editor',
mounted () {
var editor = new e('#editor')
editor.customconfig.onchange = (html) => {
this.formarticle.content = html
}
editor.create()
}
}
</script>
效果如图
（2）自定义高度写法如下：把菜单和编辑框分开
<template>
<div>
<div id="editormenu" class="editormenu"></div>
<div id="editor" class="editor"></div>
</div>
</template>
<script>
import e from 'wangeditor'
export default {
name: 'editor',
mounted () {
var editor = new e('#editormenu', '#editor')
editor.customconfig.onchange = (html) => {
this.formarticle.content = html
}
editor.create()
}
}
</script>
<style scoped>
.editormenu {
border: 1px solid #ccc;
}
.editor {
margin-top: -1px;//将多出来的一像素边框隐藏
border: 1px solid #ccc;
min-height: 400px;//编辑框最小高度
height:auto;//编辑框高度超过最小高度会根据内容高度自适应
}
</style>
3、上传图片
（1）editor.customconfig.uploadimgshowbase64 = true // 使用 base64 保存图片
（2）editor.customconfig.uploadimgserver = '/upload' // 上传服务器端地址
/upload是上传图片的服务器端接口，接口返回的数据格式如下（固定的，否则会取不到图片地址！！！）：
{
// errno 即错误代码，0 表示没有错误。
// 如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
"errno": 0,
// data 是一个数组，返回若干图片的线上地址
"data": [
"图片1地址",
"图片2地址",
"……"
]
}
这些基本就够用了。官网也写得很详细滴
wangeditor3+vue2.0简单例子
把wangeditor作为组件的形式使用
子组件中
<template>
<div id="wangeditor">
<div ref="editorelem" style="text-align:left"></div>
</div>
</template>
<script>
import e from 'wangeditor'
export default {
name: 'editorelem',
data () {
return {
editorcontent: '',
}
},
props:['catchdata'], //接收父组件的方法
mounted() {
var editor = new e(this.$refs.editorelem) //创建富文本实例
editor.customconfig.onchange = (html) => {
this.editorcontent = html
this.catchdata(html) //把这个html通过catchdata的方法传入父组件
}
editor.customconfig.uploadimgserver = '你的上传图片的接口'
editor.customconfig.uploadfilename = '你自定义的文件名'
editor.customconfig.uploadimgheaders = {
'accept': '*/*',
'authorization':'bearer ' + token //头部token
}
editor.customconfig.menus = [ //菜单配置
'head',
'list', // 列表
'justify', // 对齐方式
'bold',
'fontsize', // 字号
'italic',
'underline',
'image', // 插入图片
'forecolor', // 文字颜色
'undo', // 撤销
'redo', // 重复
]
//下面是最重要的的方法
editor.customconfig.uploadimghooks = {
before: function (xhr, editor, files) {
// 图片上传之前触发
// xhr 是 xmlhttprequst 对象，editor 是编辑器对象，files 是选择的图片文件
// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
// return {
// prevent: true,
// msg: '放弃上传'
// }
},
success: function (xhr, editor, result) {
// 图片上传并返回结果，图片插入成功之后触发
// xhr 是 xmlhttprequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
this.imgurl=object.values(result.data).tostring()
},
fail: function (xhr, editor, result) {
// 图片上传并返回结果，但图片插入错误时触发
// xhr 是 xmlhttprequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
},
error: function (xhr, editor) {
// 图片上传出错时触发
// xhr 是 xmlhttprequst 对象，editor 是编辑器对象
},
timeout: function (xhr, editor) {
// 图片上传超时时触发
// xhr 是 xmlhttprequst 对象，editor 是编辑器对象
},
// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
// （但是，服务器端返回的必须是一个 json 格式字符串！！！否则会报错）
custominsert: function (insertimg, result, editor) {
// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
// insertimg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
let url = object.values(result.data) //result.data就是服务器返回的图片名字和链接
json.stringify(url) //在这里转成json格式
insertimg(url)
// result 必须是一个 json 格式字符串！！！否则报错
}
}
editor.create()
},
父组件中
<template>
<div id="father">
<wangeditor :catchdata="catchdata"></wangeditor>
</div>
</template>
<script>
import wangeditor from './wangeditor'
data(){
return{
content:""
}
},
methods:{
catchdata(value){
this.content=value //在这里接受子组件传过来的参数，赋值给data里的参数
}
},
components: {
wangeditor
},
</script>
上面字最多的地方好好看清楚，只有做了custominsert: function (insertimg, result, editor){}里的步骤，图片才会在富文本中显示，否则是不会自动显示。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： Android判断登录情况
下一篇： 从零开始封装自己的自定义Vue组件