纯JavaScript实现CKEditor5绑定文本框实时字符数统计（无jQuery）

问题原因 #

• CKEditor 5初始化完成后会自动隐藏原始<textarea>元素，替换为自定义的富文本编辑DOM结构，你绑定在原生textarea上的onkeyup事件根本不会被触发，所以CheckInput函数全程不会运行
• 原生textarea的value属性不会随着编辑器内容的输入实时同步更新，就算手动调用CheckInput也拿不到最新的编辑内容

修正方案 #

不需要保留原有的CheckInput函数和textarea上的onkeyup绑定，直接在CKEditor初始化完成后监听编辑器自带的内容变化事件即可，可覆盖键盘输入、粘贴、格式调整等所有修改场景。

修改后代码 #

<div class="row">
  <div class="form-group col-10">
    <label class="form-label" for="txt">Description</label>
    <textarea id="txt" class="form-control"></textarea>
  </div>
  <div class="col-2 mt-4" id="countThis"></div>
</div>

let editor;
ClassicEditor
  .create(document.querySelector('#txt'))
  .then(instance => {
    editor = instance;
    // 监听编辑器内容变化事件，覆盖所有内容修改场景
    editor.model.document.on('change:data', updateCharCount);
    // 可选：如果仅需要按键抬起时才统计，替换为下面的keyup监听即可
    // editor.editing.view.document.on('keyup', updateCharCount);
    
    // 页面初始化先统计一次默认内容长度
    updateCharCount();
  })
  .catch(error => {
    console.error(error);
  });

function updateCharCount() {
  // 方式1：统计纯文本字符数（过滤所有HTML标签，仅统计可见内容，按需使用）
  const pureText = editor.getData().replace(/<[^>]+>/g, '');
  const charLength = pureText.length;

  // 方式2：统计包含HTML标签的完整内容长度，按需替换即可
  // const charLength = editor.getData().length;

  console.log(charLength);
  document.getElementById('countThis').innerText = charLength;
}

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