wangEditor的初步使用
很多时候,我们会使用到富文本编辑器,
安装wangEditor
npm install wangeditor --save
具体使用
官方文档介绍了高度的设置方法:
editor.config.height = 300 // 设置编辑区域高度
在使用过程中,我使用的宽度设置方法为:
<div id="div1" style="width: 600px"></div>
通过onchange函数来获取编辑器中的内容,配置 onchange 函数之后,用户操作(鼠标点击、键盘打字等)导致的内容变化之后,会自动触发 onchange 函数执行。
具体项目代码:
<template>
<div>
<div id="div1" style="width: 600px">
</div>
</div>
</template>
<script>
import E from 'wangeditor'
export default {
mounted () {
const editor = new E('#div1')
editor.config.height = 300 // 设置编辑区域高度
editor.config.placeholder = '请输入'
editor.config.focus = false // 取消自动 focus
editor.config.onchange = function (newHtml) {
console.log(newHtml)
}
// 配置 server 接口地址(配置后才能上传本地图片)
editor.config.uploadImgServer = '/upload-img'
// 自定义上传图片函数
editor.config.customUploadImg = function (resultFiles, insertImgFn) {
console.log(resultFiles)
console.log(insertImgFn)
}
editor.create()
}
}
</script>
<style>
</style>
运行如下图所示:
在功能上,wangEditor可以通过自定义扩展菜单来实现更多你想要的功能,官文文档链接:https://doc.wangeditor.com/,如果后续有更好的实践体验,小编再来更新。