html - 如何验证羽毛笔编辑器链接中的 url

Question

我在 angular8 项目中使用羽毛笔编辑器。同样，还有一个选项可以在“链接”的帮助下添加 url。我能知道吗，有什么方法可以验证我将为“链接”文本框输入的 url，如下图所示。以下是我的代码

羽毛笔编辑器模块

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

html

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

如何验证上图标记的文本框中的链接。

Answer 1

是的，我找到了解决这个问题的方法

首先，我们需要两个函数来覆盖默认链接处理程序和 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);
  }
}

然后在编辑器中使用这些功能

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