富文本编辑器插件
uniapp 富文本编辑器插件
兼容性
微信小程序 | H5 | APP |
---|---|---|
√ | √ | x |
App键盘弹出界面高度未解决
使用方式
无需引入,直接使用
在 `template` 中使用组件
```html
<robin-editor class="editor"
@cancel="hideEditor"
@save="saveEditor"
v-model="html"
:imageUploader="uploadImg"
:muiltImage="true">
</robin-editor>
Demo
https://github.com/health901/uniapp-editor-demo
属性说明
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
v-model | String | 富文本,双向绑定 | |
imageUploader | function(img,callback) | 上传图片处理函数 接受参数 img:本地图片地址,callback:上传成功回调传入图片链接 | |
muiltImage | Boolean | false | 是否支持多图上传 |
compressImage | Boolean | true | 图片上传是否压缩 |
previewMode | Boolean | false | 预览模式,不可编辑 |
autoHideToolbar | Boolean | false | 失去焦点时自动隐藏工具栏 |
tools | Array | ['bold', 'italic', 'underline', 'strike', 'align-left', 'align-center', 'align-right', 'remove', 'font', 'color', 'backgroundColor','image', 'clear', 'preview'] | 工具栏 |
工具栏
名称 | 值 |
---|---|
加粗 | bold |
斜体 | italic |
下划线 | underline |
删除线 | strike |
右对齐 | align-left |
居中 | align-center |
左对齐 | align-right |
清除格式 | remove |
字体大小 | font |
字体颜色 | color |
背景色 | backgroundColor |
插入图片 | image |
清空 | clear |
预览 | preview |
插入日期 | date |
列表 | list-check ,list-ordered ,list-bullet |
上下标 | sub ,super |
撤销,恢复撤销 | undo ,redo |
缩进 | indent ,outdent |
分割线 | divider |
标题 | h1 ,h2 ,h3 ,h4 ,h5 ,h6 |
书写方向 | rtl |
事件说明
事件 | 说明 | 参数 |
---|---|---|
cancel | 点击取消按钮 | |
save | 点击保存按钮 | e={html,text,delta} |
依赖
组件 | 链接 | 备注 |
---|---|---|
颜色选择器ColorPicker[1] | https://ext.dcloud.net.cn/plugin?id=1237 | 字体颜色,背景色 |
注
- 修改:添加按钮,支持预设颜色值