Angular 16中ngx-editor链接功能错误消息翻译问题求助

使用Angular 16搭配ngx-editor时，无法找到翻译链接功能错误提示的有效方法，目前通过DOM修改的临时方案存在原文本与自定义消息的显示延迟问题，现提供正确的翻译实现方式：

现有代码实现 #

组件TS代码 #

editor: Editor = new Editor();
toolbar: Toolbar = [
  ['bold', 'bullet_list', 'italic', 'strike', 'underline', 'link'],
];

HTML模板代码 #

<ngx-editor [editor]="editor" [(ngModel)]="newCommunication.description" [disabled]="false"
            [placeholder]="'Community.MessageText' | translate"></ngx-editor>
<ngx-editor-menu [editor]="editor" [toolbar]="toolbar"> </ngx-editor-menu>

临时DOM修改方案（存在显示延迟问题） #

function changeEditor() {
    if (!window.location.href.includes('Community')) {
        return;
    }

    var errors = document.querySelectorAll('.NgxEditor__HelpText.NgxEditor__HelpText--Error');
    errors.forEach(function(error) {
        var errorText = error.innerHTML;
        if (errorText === ' Please enter valid url. ') {
            error.innerHTML = 'Introduza um URL válido.';
        }
        else if (errorText === ' This is required ') {
            error.innerHTML = 'Este campo é obrigatório.';
        }
    });
}

document.addEventListener('keyup', function(ev) {
    changeEditor();
});

document.addEventListener('click', function(ev) {
    changeEditor();
});

正确翻译实现方案 #

ngx-editor 支持通过自定义编辑器配置直接覆盖默认错误消息，无需操作DOM，彻底解决延迟问题：

1. 定义自定义翻译消息 #

在组件中创建包含翻译文本的配置对象，对应链接功能的两个错误提示：

import { Editor, Toolbar, EditorConfig } from 'ngx-editor';

// 自定义错误消息翻译
const customMessages: EditorConfig['messages'] = {
  link: {
    url: {
      required: 'Este campo é obrigatório.', // 替换默认的"This is required"
      invalid: 'Introduza um URL válido.'     // 替换默认的"Please enter valid url."
    }
  }
};

2. 初始化编辑器时传入配置 #

修改Editor实例的创建逻辑，将自定义消息配置传入：

editor: Editor = new Editor({
  messages: customMessages
});

3. 结合Angular Translate动态翻译（可选） #

如果项目使用@ngx-translate/core，可以动态从翻译文件获取文本：

import { TranslateService } from '@ngx-translate/core';

constructor(private translate: TranslateService) {}

ngOnInit(): void {
  const customMessages: EditorConfig['messages'] = {
    link: {
      url: {
        required: this.translate.instant('Community.LinkRequired'),
        invalid: this.translate.instant('Community.LinkInvalid')
      }
    }
  };

  this.editor = new Editor({
    messages: customMessages
  });
}

通过以上方式，ngx-editor会直接使用自定义的翻译文本，完全消除DOM修改带来的显示延迟问题。

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