Html 如何在羽毛笔编辑器链接中验证url
我在angular8项目中使用羽毛笔编辑器。同时,还可以通过“链接”添加url。我可以知道,是否有任何方法来验证我将为“链接”文本框输入的url,如下图所示。以下是我的代码 羽毛笔编辑器模块Html 如何在羽毛笔编辑器链接中验证url,html,typescript,angular8,ngx-quill,Html,Typescript,Angular8,Ngx Quill,我在angular8项目中使用羽毛笔编辑器。同时,还可以通过“链接”添加url。我可以知道,是否有任何方法来验证我将为“链接”文本框输入的url,如下图所示。以下是我的代码 羽毛笔编辑器模块 editorConfig= { formula: true, toolbar: [ [{ header: [1, 2, false] }], ['bold', 'italic', 'underline'], ['link'] ]
editorConfig= {
formula: true,
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['link']
]
};
html
<quill-editor [modules]="editorConfig" [style]="{height: '200px'}"></quill-editor>
如何验证上面图像上标记的文本框内的链接。是的,我找到了解决此问题的方法 首先,我们需要两个函数来覆盖默认链接处理程序和工具提示保存函数
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;