html - Cómo validar una URL dentro de un enlace del editor Quill

Estoy usando un editor Quill con mi proyecto Angular8. En el mismo hay una opción para agregar URL con la ayuda de 'link'. ¿Podría saber si hay alguna manera de validar la URL que ingresaré en el cuadro de texto 'link' como se muestra en las imágenes a continuación? A continuación se muestran mis códigos

módulo del editor Quill

 editorConfig= {
    formula: true,
    toolbar: [      
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['link']
    ]
  };

html

<quill-editor [modules]="editorConfig" [style]="{height: '200px'}"></quill-editor>

Cómo validar los enlaces dentro del cuadro de texto que está marcado en la imagen de arriba.

Respuesta #1

Sí, encuentro una manera de resolver esta pregunta

Primero necesitamos dos funciones para sobrescribir el manejador de enlaces predeterminado y la función de guardar de snowtooltip

import Emitter from 'quill/core/emitter';
import { message } from 'antd';

/**
 * override Snow tooltip save
 */
export function SnowTooltipSave() {
  const { value } = this.textbox;
  const linkValidityRegex = /^(http|https)/;
  switch (this.root.getAttribute('data-mode')) {
    case 'link': {
      if (!linkValidityRegex.test(value)) {
        message.error('链接格式错误，请输入链接 http(s)://...');
        return;
      }
      const { scrollTop } = this.quill.root;
      if (this.linkRange) {
        this.quill.formatText(this.linkRange, 'link', value, Emitter.sources.USER);
        delete this.linkRange;
      } else {
        this.restoreFocus();
        this.quill.format('link', value, Emitter.sources.USER);
      }
      this.quill.root.scrollTop = scrollTop;
      break;
    }
    default:
  }
  this.textbox.value = '';
  this.hide();
}

export function SnowThemeLinkHandler(value) {
  if (value) {
    const range = this.quill.getSelection();
    if (range == null || range.length === 0) return;
    let preview = this.quill.getText(range);
    if (/^\S+@\S+\.\S+$/.test(preview) && preview.indexOf('mailto:') !== 0) {
      preview = `mailto:${preview}`;
    }
    const { tooltip } = this.quill.theme;
    tooltip.save = DtysSnowTooltipSave;
    tooltip.edit('link', preview);
  } else {
    this.quill.format('link', false);
  }
}

entonces usa estas funciones en el editor

const SnowTheme = Quill.import('themes/snow');
SnowTheme.DEFAULTS.modules.toolbar.handlers.link = SnowThemeLinkHandler;