Question

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

我所做的是在按钮上单击显示模态，设置一些输入，从基础中获取选择（与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（或更具体地说是文本值本身）进行大的更改，这些内置帮助程序应该可以正常工作。

Answer 2

好的我认为问题归结为：

如果在我们执行其他操作时丢失了选择并重现它，我们如何保存它们。

我不知道是否有内置的媒体编辑器功能，但我遇到了同样的问题，简短的回答是使用范围和X路径来保存选择。

需要范围来突出显示选择和X路径，以便在所有节点和文本中准确选择。

参考： How to calculate the XPath position of an element using Javascript?

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

2 个答案: