小程序-富文本编辑框的注意事项

富文本编辑框官网位置

表单组件 / editor (qq.com)https://developers.weixin.qq.com/miniprogram/dev/component/editor.html

（一）富文本编辑框的作用

        1.适用于一些表单的提交

        2.这些表单内容需要自定义图片大小，编辑文字样式

        主要用到的是 <editor></editor> 标签，富文本编辑框比较自由，可以自行编写自己想要的效果与 icon。

（二）富文本编辑框的注意事项

        1.进入表单填写页面自动聚焦问题

     首先将富文本编辑框设置为只读，赋完初值再将富文本设置可编辑状态即可。

onEditorReady() {
    const that = this;
    wx.createSelectorQuery().select('#editor').context(function (res) {
      that.editorCtx = res.context
      that.editorCtx.setContents({
        html: '获取到的表单数据',
        success: function () {
          that.setData({
            readOnly: 0
          })
          console.log('insert html success')
        }
      })
      that.editorCtx.blur()
    }).exec()
},

         2.键盘上变得编辑组件不显示问题

        需要调整样式，确保编辑组件的展示位置正确

        3.无法监听键盘高度变化

        在onLoad开启监听键盘高度变化的监听事件即可。

onLoad(){
    const platform = wx.getSystemInfoSync().platform
    const isIOS = platform === 'ios'
    this.setData({
      isIOS
    })
    this.updatePosition(0)
    let keyboardHeight = 0
    wx.onKeyboardHeightChange(res => {
      console.log(res)
      if (res.height === keyboardHeight) return
        //不需要滚动可将滚动api注释掉
      /* const duration = res.height > 0 ? res.duration * 1000 : 0 */
      keyboardHeight = res.height 
      that.updatePosition(keyboardHeight)
      /* setTimeout(() => {
        wx.pageScrollTo({
          scrollTop: 0,
          success() {
            that.updatePosition(keyboardHeight)
            that.editorCtx.scrollIntoView()
          }
        })
      }, duration) */
    })  
}

updatePosition(keyboardHeight) {
    const toolbarHeight = 50
    const {
      windowHeight,
      platform
    } = wx.getSystemInfoSync()
     //这里可以进行计算编辑组件显示的位置
    console.log(windowHeight)
   /*  let editorHeight = keyboardHeight > 0 ? (windowHeight - keyboardHeight - toolbarHeight) : windowHeight */
    this.setData({
      /* editorHeight, */
      keyboardHeight
    })
    console.log(this.data.editorHeight,this.data.keyboardHeight)
}

        4.关于 iOS 页面上推问题

        官方中文文档中包含对应解决方案

        思路为：根据 editor 键盘弹起，动态调整 editor 的高度，由于 iOS 会上推页面，所以在上推完成（可以通过键盘高度变化的 duration 拿到时间）时直接滚动页面到顶部: wx.pageScrollTo({ scrollTop: 0 })最终的效果是页面会先上推，后会弹，光标可以始终保持可见。（可能会有抖动，目前没有发现更好的解决办法）

最后，其他的功能都可以按照官网上的去实现，基本开发够用的！ 

相关内容：

mp-html  

新富文本组件 | 微信开放社区 (qq.com)

quill 编辑器（源头）

Quill - Your powerful rich text editor (quilljs.com)