使用步骤:
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()
获取编辑器已选区域内的纯文本内容。当编辑器失焦或未选中一段区间时,返回内容为空。