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

富文本编辑框官网位置

表单组件 / 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.contextthat.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().platformconst isIOS = platform === 'ios'this.setData({isIOS})this.updatePosition(0)let keyboardHeight = 0wx.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 = 50const {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 })最终的效果是页面会先上推，后会弹，光标可以始终保持可见。（可能会有抖动，目前没有发现更好的解决办法）

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