wangeditor ios点击无效,不聚焦问题

1,482 阅读1分钟

因为手机端要用到富文本编辑器,因为手机上功能操作起来不是很方便,就选了 wangeditor

使用中遇到一点问题,就是 ios 系统的时候,点击了编辑器,键盘也弹出了,但是编辑器无法输入,无法编辑,也米有光标,于是就在网上找有没有相关的解决方案,试了几个也没有解决,最后试了一个,可以解决

contenteditable 查询结果: www.runoob.com/tags/att-gl…

// 创建编辑区域的 dom
<div ref="edit" :contenteditable="contenteditable" class="text"></div>

// 为了方便看,把实例化代码也贴上
this.editor = new E(this.$refs.toolbar, this.$refs.edit)

// contenteditable 属性指定元素内容是否可编辑。 属性可以在网上查一查
加上之后dom 就会变成一个可编辑的元素,这样在我们点击的时候会显示聚焦的边框,在加上下面的代码,这样就可以成功点击编辑了

div *{
	-webkit-user-select:text;
	outline: none;
}

还遇到一个问题,自动聚焦的问题,手机端打开页面,自动弹出键盘 我们找到源代码 找到这一行注释掉,就可以了

this.selection.restoreSelection()

还有一个问题,wangeditor 在移动端的时候,点击编辑内容的时候,光标很不方便跑到你点击的位置,我刚开始以为是我用的 3 的版本问题,然后我换成了 4 ,结果还是不行,他们官网的也是这个问题,推荐网页端使用

参考地址:blog.csdn.net/weixin_4364…