NextBoy / quill-image-extend-module

vue-quill-editor的增强模块,提供图片上传,复制插入,拖拽插入,支持与其他模块一起使用
706 stars 128 forks source link

插入位置异常的看这里,包括一直插入在最后以及一直插入在开头(无论上传还是base64)【完善解决方案】 #75

Open morningbao opened 4 years ago

morningbao commented 4 years ago

在源码根目录的index.js里,第一个导出的对象是这样的

export const QuillWatch = {
    watcher: {},  // 登记编辑器信息
    active: null,  // 当前触发的编辑器
    on: function (imageExtendId, ImageExtend) {  // 登记注册使用了ImageEXtend的编辑器
        if (!this.watcher[imageExtendId]) {
            this.watcher[imageExtendId] = ImageExtend
        }
    },
    emit: function (activeId, type = 1) {  // 事件发射触发
        this.active = this.watcher[activeId]
        if (type === 1) {
            imgHandler()
        }
    }
}

在emit方法的第一行后面加入一段代码

export const QuillWatch = {
    watcher: {},  // 登记编辑器信息
    active: null,  // 当前触发的编辑器
    on: function (imageExtendId, ImageExtend) {  // 登记注册使用了ImageEXtend的编辑器
        if (!this.watcher[imageExtendId]) {
            this.watcher[imageExtendId] = ImageExtend
        }
    },
    emit: function (activeId, type = 1) {  // 事件发射触发
        this.active = this.watcher[activeId]
        setTimeout(()=> {
            this.active.cursorIndex = this.active.quill.getSelection() ? this.active.quill.getSelection().index : this.active.quill.getLength()
        },0)//获取当前光标位置
        if (type === 1) {
            imgHandler()
        }
    }
}

解释一下,这个对象是用于事件发生时找到quill对象的,emit方法在每个触发事件都是第一时间调用,所以在这去获取并设置光标的位置就比较合理。为什么要加setTimeout呢,因为直接去获取位置是获取不到的,这个就涉及quill的源码实现了,具体原因我也没有去查,有兴趣可以自己找下。

另外我不建议直接在node_modules的源码里直接改的,因为团队要同步这个操作是很麻烦的。这个index.js文件其实就是可以用的代码了,可以直接复制进项目,放进代码管理,直接引用就可以了。

再感叹一下,其实这个插件还是很粗糙,基本的功能都还有点问题,想必作者也比较忙,贡献开源实属不易啊。

westinzu commented 4 years ago

非常感谢