微信小程序 editor 踩过的坑及解决办法

一、placeholder默认样式修改

.ql-editor.ql-blank::before {
  //placeholder默认样式修改
  
}

二、踩过的editor的坑及部分解决办法:

1、editor 无法添加获取、设定光标位置功能；

  解决方案：可以通过EditorContext.insertText做一个占位符，使用editorContext.setContents()再重新拼好html插入，但是setContents api插入后光标会返回输入框首位【官方bug】。

2、editor无法获取keyCode，类似于监听@字符选择用户的编辑、删除不太好做。

  解决方案：开发监听输入@的事件，可通过新老的html字符串做diff算法，过滤出是否有@字符再去处理后续事宜。缺点是比较耗费性能。

3、部分标签不支持class和id属性，在插入时加上这些属性也会被干掉。

   解决方案：通过最后的正则匹配去加这些需要的属性。

4、目前小程序富文本仅支持图片和文字的编辑，若有视频和音频的需求甚用。

5、editor多次重复编辑时，editor会在img标签上多次增加RichText--${extClass}这个类名，导致html文本长度意外变长；

 解决方案：通过最后的正则匹配去除不必要的重复类名。

6、input/textarea和editor在同一个页面，input/textarea的聚焦会引起editor的聚焦事件，所以键盘高度和页面的高度处理需要着重思考。

  解决方案：利用editor的只读属性read-only，input/textarea聚焦时设置editor为只读，失焦时设置editor恢复可编辑状态。