如何对CKEditor 5编辑器的内容进行校验？

嘿，我之前刚好处理过CKEditor 5的内容校验需求，确实和普通textarea不一样——它输出的是HTML内容，直接拿长度会把标签也算进去，根本不准。给你分享几个靠谱的实现方法：

1. 提交时一次性校验 #

这是最常见的场景，在表单提交前提取编辑器的纯文本内容再做长度判断：

首先定义一个工具函数把HTML转为纯文本，再绑定表单提交事件做校验：

// 工具函数：将编辑器的HTML内容转为纯文本
function getEditorPlainText(editor) {
  const tempContainer = document.createElement('div');
  tempContainer.innerHTML = editor.getData();
  // 提取文本并去除首尾空白，避免空标签/空格干扰
  return tempContainer.textContent.trim();
}

// 给表单绑定提交事件
document.getElementById('your-form-id').addEventListener('submit', function(e) {
  // 获取编辑器实例（这里的editor1是你初始化时给编辑器的ID）
  const editor = CKEditor.instances.editor1;
  const contentText = getEditorPlainText(editor);

  if (contentText.length < 200) {
    // 阻止表单提交
    e.preventDefault();
    alert('内容长度至少需要200个字符，请补充完善！');
    // 给编辑器添加视觉提示，比如红色边框
    editor.ui.view.editable.element.style.border = '1px solid #dc3545';
  } else {
    // 校验通过，恢复编辑器默认样式
    editor.ui.view.editable.element.style.border = '';
  }
});

2. 实时校验（内容变化时即时提示） #

如果想要用户输入过程中就实时反馈，可以监听编辑器的内容变化事件：

// 获取编辑器实例
const editor = CKEditor.instances.editor1;

// 监听编辑器内容变化事件
editor.model.document.on('change:data', function() {
  const contentText = getEditorPlainText(editor);
  const statusEl = document.getElementById('editor-status');

  if (contentText.length < 200) {
    statusEl.textContent = '⚠️ 内容还不够，至少需要200个字符';
    statusEl.style.color = '#dc3545';
  } else {
    statusEl.textContent = '✅ 内容长度符合要求';
    statusEl.style.color = '#28a745';
  }
});

关键注意点 #

• 必须把HTML转为纯文本再校验，不然<p></p>这类空标签会被误算成有效字符，导致校验失效。
• 用trim()去除首尾空白，避免用户只输入空格、换行就通过校验。
• 如果你的编辑器支持插入图片、表格等非文本元素，可以根据需求自定义规则（比如一张图片等价于多少字符），普通场景下纯文本长度校验基本够用。

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