wangEditor取消自动聚焦的另类解决办法

前言：本篇文章我们将介绍使用wangEditor富文本编辑器在移动端中打开页面的时候，总会自动定位到富文本编辑器上，弹出移动端的虚拟键盘,影响到整体布局的兼容问题。如果觉得作者写的不错，希望得到您的点赞/收藏/支持，如果有不同意见，欢迎下方评论区留言。

注：问题原因：目前发现是官方旧版本遗留下来的bug，不过官方也说的很明显了，不兼容移动端版本的。那么接下来我们就自己去寻求解决办法吧~~

话不多说,直接上菜。

一、官方提供的API(亲测无用doge)

自动 focus
编辑器初始化时，默认会自动 focus 到编辑区域。可通过如下操作，取消自动 focus 。

const editor = new E('#div1')

// 取消自动 focus
editor.config.focus = false

editor.create()

注：不会触发光标，但还是会弹出虚拟键盘。

二、在node_module中找到wangeditor/dist(release)/wangeditor.js将里面的自动聚焦代码注释。

// 手动注释掉
this.selection.restoreSelection();

注：因为不好维护，所以没进行测试。各位看完下面如果源码不一样大可一试~~

1、我的版本是4.7.11，搜索找到如下方法。

/**
 * 初始化编辑器选区，将光标定位到文档末尾
 * @param editor 编辑器实例
 * @param newLine 是否新增一行
 */
function initSelection(editor, newLine){}

其实官方已经做了取消自动聚焦的处理了，但就是还是会出现解决方法一的问题。

三、使用wangEditor v5版本(公测中，未进行测试是否有效)

wangEditor-v5
但是官方issues也有说到这问题，说是v5已经做了处理。

四、屏蔽默认键盘弹出（document.activeElement.blur()-亲测有效doge）

document.activeElement属性始终会引用DOM中当前获得了焦点的元素。元素获得焦点的方式有用户输入(通常是按Tab键)、在代码中调用focus()方法和页面加载。
优点：支持Android、iOS
缺点：需要添加额外的JS代码

const editor = new E('#div1')

editor.create()

// 取消自动focus且禁止虚拟键盘弹出
document.activeElement.blur();

注：只需在创建富文本后屏蔽默认键盘弹出即可，后续也不会出啥其他问题~~亲测有效哦

至此，使用 wangEditor取消自动聚焦的兼容就写好了！
最后来复习一下：如果觉得作者写的不错，希望得到您的点赞/收藏/支持，如果有不同意见，欢迎下方评论区留言。