tinymce自动获取焦点光标移至最后

Gyx的学习笔记

已于 2023-03-21 14:36:55 修改

阅读量4k

点赞数 4

文章标签： vue javascript

于 2021-03-26 15:38:44 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45938101/article/details/115247483

版权

tinymce官方提供的API auto_focus存在一些问题，在编辑时候如果输入框有内容auto_focus方法会自动获取焦点不过光标在最前面

我们可以调用这个函数去解决这个问题

//获取焦点光标到最后面
    keepLastIndex (obj, window) {
      if (window.getSelection) { //ie11 10 9 ff safari
        obj.focus(); //解决ff不获取焦点无法定位问题
        var range = window.getSelection(); //创建range
        range.selectAllChildren(obj); //range 选择obj下所有子内容
        range.collapseToEnd(); //光标移至最后
      } else if (document.selection) { //ie10 9 8 7 6 5
        var range = document.selection.createRange(); //创建选择对象
        range.moveToElementText(obj); //range定位到obj
        range.collapse(false); //光标移至最后
        range.select();
      }
    }
mounted () {
    tinymce.init({})
    this.$nextTick(() => {
        var ifra = document.getElementById("tinymces_ifr");
        this.keepLastIndex(ifra.contentWindow.document.getElementById('tinymce'), ifra.contentWindow)
    })
  },

不过这里还有一个问题，tinymce是iframe内嵌的文本框该函数需要接受到iframe的window才能实现，我的项目是使用的vue框架，我是单独把tinymce单独封装了一个组件我直接在mounted生命周期里调用了这个函数这样就解决了tinymce获取焦点光标在最前面的问题。

转发请带链接谢谢：https://blog.youkuaiyun.com/weixin_45938101/article/details/115247483