美文网首页
wangeditor ios点击无效,不聚焦问题

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

作者: 至远方 | 来源:发表于2021-01-07 14:08 被阅读0次

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

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

    image

    contenteditable 查询结果: 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

    相关文章

      网友评论

          本文标题:wangeditor ios点击无效,不聚焦问题

          本文链接:https://www.haomeiwen.com/subject/nrjzoktx.html