一旦丢失,如何在媒体编辑器中替换选择？

Question

我试图添加一个扩展,取代媒体编辑器中的现有链接功能,以允许我有一个文件列表和其他自定义位.问题是,一旦我显示模态并且你在其中做了一些改变,原始选择就会丢失.插入代码的示例,看起来与主脚本使用的是同一个,我只编辑允许选择对象作为第二个参数传入.

我所做的是在按钮上单击显示模态,设置一些输入,从基础中获取选择(与window.getSelection()相同)将其保存到扩展对象.然后单击模态中的保存按钮我使用代码插入示例中的函数,传递选择.然而,选择已经改变,所以我猜它是一个参考或每次都可能计算,所以我不知道如何让它工作.

这是代码,我删掉了不相关的位:

function MediumLink() {
    var self = this;
    this.parent = true;
    //...button init

    this.modalSubmit.addEventListener('click', function () {
        //the linkSel is no longer what I set it to here
        console.log(self.linkSel);
        self.insertHtmlAtCaret('<a href="' + self.modalHref.value + '">' + self.modalName.value + '</a>', self.linkSel);
        //... hide and reset modal
    }, false);

    //https://github.com/jillix/medium-editor-custom-html
    this.insertHtmlAtCaret = function (html, sel) {
        if (sel === undefined) {
            sel = window.getSelection();
        }
        //..rest of this function is unchanged from example
    };
}
MediumLink.prototype.onClick = function () {
    var sel = this.base.selection;

    if (sel.type === 'Range') { //trying to keep sel from changing since an empty selection would have a different type
        //... set inputs in modal based on the selection

        // sel is what I want at this point, what should be passed 
        console.log(sel);
        this.linkSel = sel;
    }
};

Answer 1

中型编辑器确实支持这种内置:

MediumEditor.saveSelection()  // Stores the selection internally
MediumEditor.restoreSelection() // Re-applies the stored selection

在您的扩展程序中,由于您正在设置,this.parent = true您可以访问this.base以调用这些方法:

this.base.saveSelection()
this.base.restoreSelection()

只要在保存选择和恢复选择之间不对html(或更具体地说是文本值本身)进行大的更改,这些内置帮助程序就可以正常工作.