更新记录

1.1.2(2020-03-26)

1.修复iOS下工具栏被键盘遮住的问题 2.失去焦点时工具栏可隐藏

1.1.1(2020-03-03)

样式修复

查看更多

富文本编辑器插件

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" 
    :html="html"
    :imageUploader="uploadImg" 
    :muiltImage="true">
</myeditor>

Demo

https://github.com/health901/uniapp-editor-demo

属性说明

属性 类型 默认值 说明
html 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. 修改:添加按钮,支持预设颜色值

隐私、权限及商业化声明

说明:除收费原生SDK插件外,其他插件或示例工程默认均为MIT开源协议。如提供了github地址,并在github上专门标注了开源协议,则以github标注为准。

1. 本插件需要申请的手机端权限列表:

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问