taoke/uni_modules/robin-editor

富文本编辑器插件

uniapp 富文本编辑器插件

兼容性

微信小程序	H5	APP
√	√	x

使用方式

在 script 中引用组件

import myeditor from "@/components/robin-editor/editor.vue"
export default {
    components: {myeditor}
}

在 template 中使用组件

<myeditor class="editor" 
    @cancel="hideEditor" 
    @save="saveEditor" 
    v-model="html"
    :imageUploader="uploadImg" 
    :muiltImage="true">
</myeditor>

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}|

依赖

|组件|链接|备注| |---|--|--| |Popup 弹出层^[1]|https://ext.dcloud.net.cn/plugin?id=329|uni-ui库| |Transition动画|https://ext.dcloud.net.cn/plugin?id=1231|uni-ui库,Popup依赖| |颜色选择器ColorPicker^[2]|https://ext.dcloud.net.cn/plugin?id=1237|字体颜色,背景色|

注

1. 修改:新增动画结束事件
2. 修改:添加按钮,支持预设颜色值