zoukankan      html  css  js  c++  java
  • 小程序使用 editor 富文本编辑器填坑指南

    富文本编辑器文档: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 组件遇到的问题,欢迎交流~

  • 相关阅读:
    freeswitch 对接IMS
    freeswitch对接北京移动IMS
    多台 FreeSWITCH 服务器级联
    FreeSWITCH代码分析
    软交换freeswitch系统概要和源代码分析初步
    SQL*Net message from client
    FreeSwitch下配置DID的方法
    FreeSWITCH实现多人来电思路
    SIP开源项目opensip,Freeswitch
    运行 FreeSWITCH
  • 原文地址:https://www.cnblogs.com/savokiss/p/13454147.html
Copyright © 2011-2022 走看看