更新记录
1.0.0(2024-05-17) 下载此版本
实现基本功能,完成示例代码,添加插件注释
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | × | × | × | × | × |
um-rich-editor
插件说明
一个简单开箱即用的富文本编辑器组件,基于Uniapp官方的editor实现,效果可以参考editor,在官方的基础上加上了颜色选择器,以及简单注释,方便直接修改源码,自定义成符合自己需求的富文本编辑器。
在下方的使用场景中还介绍了如何给编辑器赋初始值值,完整代码可以下载示例项目,可以直接运行查看效果。如果有不需要的功能,直接删除或者注释um-rich-editor.vue文件中的view.toolbar中的代码即可。
基本使用
html部分:
<um-rich-editor
v-model="form.content"
@input="inputEditor"
ref="editor">
</um-rich-editor>
按照easycom规范,无需注册导入,直接使用
图片上传
如果需要使用到图片上传的功能,需要修改源码的insertImage方法,替换为自己的上传接口
常用场景
从api接口中获取远程数据:
this.getEditorContent().then(res => {
this.form.content = res
this.$nextTick(() => {
this.$refs.editor.onEditorReady()
// 如果有表单的rule,可以在获取到内容后设置,这里以uview的form组件为例
// this.$refs.uForm.setRules(this.rules)
})
})