javascript - 羽毛笔链接处理程序不工作

Question

我正在尝试为链接输入值编写自定义处理程序。如果用户输入的链接没有自定义协议(protocol)，我希望在输入值之前添加一个 http: 。这是因为如果链接值缺少 http:，则不会解释链接，而是显示 about:blank。 ( https://github.com/quilljs/quill/issues/1268#issuecomment-272959998 )

下面是我写的(类似于官方的例子here):

toolbar.addHandler("link", function sanitizeLinkInput(linkValueInput) {
    console.log(linkValueInput); // debugging

    if (linkValueInput === "")
        this.quill.format(false);

    // do nothing, since it implies user has just clicked the icon
    // for link, hasn't entered url yet
    else if (linkValueInput == true);

    // do nothing, since this implies user's already using a custom protocol
    else if (/^\w+:/.test(linkValueInput));

    else if (!/^https?:/.test(linkValueInput)) {
        linkValueInput = "http:" + linkValueInput;
        this.quill.format("link", linkValueInput);
    }
});

每次用户单击链接图标时，没有任何反应，true 会记录到控制台。我实际上希望当人们在按下链接图标后显示的工具提示上单击“保存”时执行此处理程序。

知道怎么做吗？也欢迎提示或建议。

谢谢!

Answer 1

收集所有信息

雪花主题本身使用工具栏的 addHandler 来显示工具提示，因此无法使用 addHandler 方法来实现我们想要的。

因此，我们可以改为执行以下操作:

var Link = Quill.import('formats/link');
var builtInFunc = Link.sanitize;
Link.sanitize = function customSanitizeLinkInput(linkValueInput) {
    var val = linkValueInput;

    // do nothing, since this implies user's already using a custom protocol
    if (/^\w+:/.test(val));
    else if (!/^https?:/.test(val))
        val = "http:" + val;

    return builtInFunc.call(this, val); // retain the built-in logic
};

此方法不会挂接到处理程序，而是会修改内置的清理逻辑本身。我们还保留了清理的原始行为，因此不会修改编辑器的原始行为。

或者，我们实际上可以 Hook 到工具提示的保存按钮，使用 this code .但与上面的方法相比，这是一个太长的方法。