如何在 Quill 编辑器中使用 http 预填充链接？答案

【问题标题】：How can I prefill links with http in a Quill editor?如何在 Quill 编辑器中使用 http 预填充链接？
【发布时间】：2016-12-04 06:19:57
【问题描述】：

使用 Quill 编辑器添加链接时，我必须包含协议，否则链接将被视为相对链接。

当有人点击添加链接时，我希望该字段预填充http://，因此当用户键入google.com 时，它将创建指向http://google.com 的链接，而不是http://myapp.net/something/google.com。

堆栈溢出会这样做...

【问题讨论】：

标签： wysiwyg quill

【解决方案1】：

当您尝试保存现有链接时，上述解决方案将不起作用。此外，它忽略了其他协议，例如 (mailto, tel, https)

这里有一个更好的解决方案：

let Link = window.Quill.import('formats/link');

class CustomLink extends Link {
      
  static sanitize(url) {
    let value = super.sanitize(url);
    if (value) {
      for (let i = 0; i < this.PROTOCOL_WHITELIST.length; i++)
        if(value.startsWith(this.PROTOCOL_WHITELIST[i]))
          return value;

        return `http://${value}`
    }
    return value;
  }
}
Quill.register(CustomLink);

【讨论】：

这很好用。既然是 2021 年，我想我会抓住机会使用 https 而不是 http。

【解决方案2】：

您可以使用自定义逻辑扩展链接格式：

var Link = Quill.import('formats/link');

class MyLink extends Link {
  static create(value) {
    let node = super.create(value);
    value = this.sanitize(value);
    if(!value.startsWith("http")) {
      value = "http://" + value;
    }
    node.setAttribute('href', value);
    return node;
  }
}

Quill.register(MyLink);

【讨论】：