因为手机端要用到富文本编辑器,因为手机上功能操作起来不是很方便,就选了 wangeditor
使用中遇到一点问题,就是 ios 系统的时候,点击了编辑器,键盘也弹出了,但是编辑器无法输入,无法编辑,也米有光标,于是就在网上找有没有相关的解决方案,试了几个也没有解决,最后试了一个,可以解决
imagecontenteditable 查询结果: https://www.runoob.com/tags/att-global-contenteditable.html
// 创建编辑区域的 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;
}
image
还遇到一个问题,自动聚焦的问题,手机端打开页面,自动弹出键盘 我们找到源代码 找到这一行注释掉,就可以了
this.selection.restoreSelection()
还有一个问题,wangeditor 在移动端的时候,点击编辑内容的时候,光标很不方便跑到你点击的位置,我刚开始以为是我用的 3 的版本问题,然后我换成了 4 ,结果还是不行,他们官网的也是这个问题,推荐网页端使用
参考地址:https://blog.csdn.net/weixin_43645543/article/details/106904693
网友评论