Primeng Editor将非HTTP URL转换为about:blank的解决方法咨询

Primeng Editor基于Quill构建，默认会把非HTTP/HTTPS协议的URL替换为about:blank，你可以通过文本变更事件修正或自定义链接工具栏按钮两种方式处理这个需求：

方法一：监听文本变更事件，手动修正URL #

通过绑定onTextChange事件，在内容变更时解析并恢复被替换的真实URL：

<!-- 模板中绑定文本变更事件 -->
<p-editor [(ngModel)]="content" (onTextChange)="handleTextChange($event)"></p-editor>

// 组件内处理逻辑
handleTextChange(event: any) {
  const delta = event.delta;
  delta.ops?.forEach(op => {
    // 定位到被替换为about:blank的链接
    if (op.insert?.link === 'about:blank') {
      // 从输入文本中提取真实URL（需根据业务场景实现extractRealUrl方法）
      const realUrl = this.extractRealUrl(op.insert.text);
      if (realUrl) {
        op.insert.link = realUrl;
      }
    }
  });
}

// 示例：从选中文本或历史缓存中提取真实URL
extractRealUrl(text: string): string | null {
  // 这里可以根据实际逻辑，比如从用户输入的原始内容中匹配对应文本的URL
  // 示例逻辑：假设文本是"自定义链接"，对应缓存的URL是"myapp://page1"
  const urlMap = {
    "自定义链接": "myapp://page1",
    "FTP地址": "ftp://server.com/file"
  };
  return urlMap[text] || null;
}

注意：这种方法需要你维护输入的URL上下文，确保能准确找回被替换的真实地址。

方法二：自定义链接工具栏按钮，跳过默认校验 #

移除默认的链接处理逻辑，自定义按钮直接插入任意协议的URL，还可以加入白名单校验：

import { Component, ViewChild } from '@angular/core';
import { Editor } from 'primeng/editor';
import Quill from 'quill';

@Component({
  // 组件元数据
})
export class YourComponent {
  @ViewChild(Editor) editor!: Editor;

  ngAfterViewInit() {
    const quill = this.editor.quillInstance;
    const toolbar = quill.getModule('toolbar');
    
    // 移除默认链接按钮的处理逻辑
    toolbar.removeHandler('link');
    
    // 添加自定义链接处理逻辑
    toolbar.addHandler('link', () => {
      const range = quill.getSelection();
      if (range) {
        const url = prompt('请输入URL：');
        if (url) {
          // 可选：加入白名单校验
          const allowedProtocols = ['http:', 'https:', 'ftp:', 'sftp:', 'myapp:'];
          const protocol = new URL(url).protocol;
          
          if (allowedProtocols.includes(protocol)) {
            quill.formatText(range.index, range.length, 'link', url);
          } else {
            alert('该URL协议不在允许列表中');
          }
        }
      }
    });
  }
}

这种方式完全绕过Primeng的默认校验，支持自定义白名单规则，适配所有协议类型的URL。

补充说明 #

默认的URL替换逻辑来自Quill的link格式器，它仅允许HTTP/HTTPS协议，上述两种方法分别从事后修正和事前自定义两个维度解决问题，可根据业务场景选择。

内容的提问来源于stack exchange，提问作者Prateek