我正在尝试为链接输入值编写自定义处理程序。如果用户输入的链接没有自定义协议(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
会记录到控制台。我实际上希望当人们在按下链接图标后显示的工具提示上单击“保存”时执行此处理程序。
知道怎么做吗?也欢迎提示或建议。
谢谢!
最佳答案
收集所有信息
雪花主题本身使用工具栏的 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 .但与上面的方法相比,这是一个太长的方法。
关于javascript - 羽毛笔链接处理程序不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41696056/