富文本编辑器文档:
最近在做小程序上的富文本编辑器功能, 发现几个隐藏点:
1. 小程序中的 editor 组件本质上是集成了 quill 编辑器: https://quilljs.com/ , 官方文档上也说明了, 导出里面的内容需要加一段 quill 的 CSS 代码
2. 至于怎么集成, 在 ready 后有时候能看到一个 webviewId, 所以推测是通过 webview 集成的
关于工具栏
1. 工具栏是和 editor 组件分开的, 可以任意定制
2. 理论上 quill 里面的工具栏, 小程序都支持
3. 官方中文文档上的 代码片段只显示了部分工具栏 (但是包含解决 iOS 页面上推问题的逻辑, 见下文): https://developers.weixin.qq.com/s/W7uZ3EmU7jbl
4. 官方英文文档上的 代码片段展示了所有工具栏 (可通过文档右上角切换语言查看): https://developers.weixin.qq.com/s/siL4iemP7n8W
关于 iOS 页面上推问题
官方中文文档中包含对应解决方案, 思路为:
根据 editor 键盘弹起, 动态调整 editor 的高度, 由于 iOS 会上推页面, 所以在上推完成 (可以通过键盘高度变化的 duration 拿到时间) 时直接滚动页面到顶部: wx.pageScrollTo({ scrollTop: 0 })
最终的效果是页面会先上推, 后会弹, 光标可以始终保持可见.(可能会有抖动, 目前没有发现更好的解决办法)
关于页面底部如果有 Fixed 元素问题
聚焦时会把底部的 Fixed 元素顶起, 这个属于兼容性问题, 在某些安卓机如: 华为 P30, 小米 9 中均有出现
由于笔者的需求需要根据底部元素动态计算 editor 的高度, 所以可以如下解决: 底部元素换为流式布局, 用隐藏的 Fixed 元素用来计算高度. 当然前提是页面只有一屏不需要滚动.
关于 P30 有时无法弹出键盘的问题
经测试发现聚焦 editor 出现此问题概率较大, 怀疑是包裹 editor 的 webview 聚焦出现问题, 调试了好久发现在聚焦之前往 editor 插入一段空白文本: insertText({ text: '' }) 或者 editorCtx.blur() 可以解决
以上为笔者最近使用 editor 组件遇到的问题, 欢迎交流~
来源: http://www.bubuko.com/infodetail-3654675.html