小程序富文本编辑器

使用步骤:
1、查看官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html
2、看了官方文档也不知如何下手?下载官方示例。
3、打开官方示例,却找不到工具栏?
原因:
使用真机调试,发现输入的时候,手机键盘上方是有一些选项的。然后看了好久才发现是因为,在wxml中把hidden="{{keyboardHeight > 0 ? false : true}}"去掉就可以显示了,因为在电脑上没有手机键盘,所以之前在真机调试的时候是有的。
在这里插入图片描述
4、尽管如此还是发现不能满足开发需求,于是到github上下载了一个示例

5、方法解说:
以下这些方法什么时候调用?
工具栏元素绑定点击事件,例如:

<i class="iconfont icon-fengexian" bindtap="insertDivider"></i>

当点击对应的工具栏工具,会触发相应的方法

EditorContext.format(string name, string value)
修改样式

EditorContext.insertDivider()
插入分割线

EditorContext.insertImage(Object object)
插入图片。

地址为临时文件时,获取的编辑器html格式内容中 标签增加属性 data-local,delta 格式内容中图片 attributes 属性增加 data-local 字段,该值为传入的临时文件地址。

开发者可选择在提交阶段上传图片到服务器,获取到网络地址后进行替换。替换时对于html内容应替换掉 的 src 值,对于 delta 内容应替换掉 insert { image: abc } 值。

EditorContext.insertText(Object object)
覆盖当前选区,设置一段文本

EditorContext.setContents(Object object)
初始化编辑器内容,html和delta同时存在时仅delta生效

EditorContext.getContents()
获取编辑器内容

EditorContext.clear()
清空编辑器内容

EditorContext.removeFormat()
清除当前选区的样式

EditorContext.undo()
撤销

EditorContext.redo()
恢复

EditorContext.blur()
编辑器失焦,同时收起键盘。

EditorContext.scrollIntoView()
使得编辑器光标处滚动到窗口可视区域内。

EditorContext.getSelectionText()
获取编辑器已选区域内的纯文本内容。当编辑器失焦或未选中一段区间时,返回内容为空。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值