标签：文本编辑 工具栏 器填坑 文档 editor https com 页面

富文本编辑器文档：https://developers.weixin.qq.com/miniprogram/dev/component/editor.html

最近在做小程序上的富文本编辑器功能，发现几个隐藏点：

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 组件遇到的问题，欢迎交流~

标签：文本编辑,工具栏,器填坑,文档,editor,https,com,页面
来源： https://www.cnblogs.com/savokiss/p/13454147.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。