Angular富文本编辑器maxlength校验设置失败，求解决方案或适配编辑器推荐

为什么直接加maxlength属性不生效 #

你用到的三款富文本编辑器均为封装后的自定义组件，不是原生<textarea>/<input>元素，原生maxlength属性不会被组件识别处理，因此无法直接生效。

通用自定义校验方案（适配所有你测试过的编辑器） #

推荐基于Angular响应式表单实现自定义校验，灵活适配纯文本/带HTML标签两种长度统计规则：

1. 组件TS代码实现 #

import { Component } from '@angular/core';
import { FormControl, ValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';

// 自定义富文本长度校验器
function htmlMaxLength(maxLength: number): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    if (!control.value) return null;
    // 统计纯文本长度：剥离所有HTML标签后计算，如需统计带标签的总长度直接用control.value.length即可
    const pureText = control.value.replace(/<[^>]*>/g, '').trim();
    return pureText.length > maxLength 
      ? { htmlMaxLength: { required: maxLength, current: pureText.length } } 
      : null;
  };
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 初始化表单控件，绑定最大长度为10的校验规则
  htmlContent = new FormControl('', [htmlMaxLength(10)]);
  config = {
    // 你的编辑器原有配置
  };
}

2. 模板代码示例（以kolkov/angular-editor为例） #

<angular-editor
  [formControl]="htmlContent"
  [config]="config"
></angular-editor>

<!-- 长度超限错误提示 -->
<span *ngIf="htmlContent.touched && htmlContent.errors?.['htmlMaxLength']" style="color: red;">
  内容最大长度为{{htmlContent.errors['htmlMaxLength'].required}}字，当前已输入{{htmlContent.errors['htmlMaxLength'].current}}字
</span>

3. 实时截断超限内容的扩展实现 #

如果需要用户输入时直接截断超过长度的内容，可在组件中订阅值变化：

ngOnInit() {
  const MAX_LENGTH = 10;
  this.htmlContent.valueChanges.subscribe((content) => {
    if (!content) return;
    const pureText = content.replace(/<[^>]*>/g, '').trim();
    if (pureText.length > MAX_LENGTH) {
      // 阻止值变化事件循环，保留上一次合法值
      this.htmlContent.setValue(this.htmlContent.value, { emitEvent: false });
    }
  })
}

三款编辑器的适配说明 #

• kolkov/angular-editor：上述通用方案可直接使用，无额外适配成本
• ngx-quill：除通用方案外，也可接入社区的quill-maxlength模块实现原生输入限制
• p-editor（PrimeNG编辑器）：可通过自带的onTextChange事件实时校验，也可直接适配通用响应式表单方案

原生支持长度校验的Angular富文本编辑器推荐 #

如果不想自定义校验逻辑，可以选择以下官方维护的编辑器，内置minlength/maxlength配置项：

• TinyMCE Angular封装版：原生支持max_chars、min_chars配置，开启后自动触发校验和提示
• CKEditor 5 Angular封装版：内置长度校验插件，配置简单，兼容性好

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