第一步安装
npm i wangeditor --save
第二步使用
<template>
<view>
<view id="view1"></view>
</view>
</template>
<script>
import E from 'wangeditor'
var editor = {}
export default {
onReady() {
this.initEditor()
},
data() {
return {
content: ''
};
},
methods: {
/**
* 初始化富文本编辑器
*/
initEditor() {
let that = this
editor = new E('#div1')
editor.config.zIndex = 0
editor.config.focus = false //取消自动focus
editor.config.onblur = newHtml => {
// that.content = newHtml // 获取最新的 html 内容,两种方式都可以
that.content = editor.txt.html()
}
// 本地上传图片
editor.config.customUploadImg = function(resultFiles, insertImgFn) {
// resultFiles 是 input 中选中的文件列表
// insertImgFn 是获取图片 url 后，插入到编辑器的方法
resultFiles.forEach(async file => {
let filePath = URL.createObjectURL(file)
let cloudPath = file.name
const result = await uniCloud.uploadFile({
filePath,
cloudPath
});
// 上传图片，返回结果，将图片插入到编辑器中
insertImgFn(result.fileID)
})
}
// 本地上传视频
editor.config.customUploadVideo = function(resultFiles, insertVideoFn) {
// resultFiles 是 input 中选中的文件列表
// insertVideoFn 是获取视频 url 后，插入到编辑器的方法
resultFiles.forEach(async file => {
let filePath = URL.createObjectURL(file)
let cloudPath = file.name
const result = await uniCloud.uploadFile({
filePath,
cloudPath
});
// 上传视频，返回结果，将视频插入到编辑器中
insertVideoFn(result.fileID)
})
}
editor.config.height = 600
// 配置菜单栏，设置不需要的菜单
editor.config.excludeMenus = [
'todo',
'emoticon',
'table'
]
editor.create()
editor.txt.html('<p>用 JS 设置的内容</p>') // 如果需要初始化编辑框内容，在这里
},
}
}
</script>
<style lang="scss">
#view1 {
width: 90%;
margin: 0 auto;
padding-top: 100rpx;
padding-bottom: 100rpx;
}
</style>
参考文档
Introduction · wangEditor 用户文档
开始使用 - 基本使用 - 《wangEditor v4.7 富文本编辑器教程》 - 书栈网 · BookStack
效果截图
