CKEditor 5 如何在 React 中获取编辑器的纯文本内容？

Good“素玲提问于 2026-03-15 19:28:30 阅读 42

组件

我在 React 项目里集成了 CKEditor 5，现在想获取用户输入的纯文本（不带 HTML 标签），但官方文档只提到了 editor.getData() 返回的是 HTML 字符串。

试过用 textContent 去解析返回的 HTML，但感觉很麻烦，而且可能有兼容问题。有没有更直接的方法？比如 CKEditor 自带的 API 能直接输出纯文本吗？

我现在的代码是这样的：

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

function MyEditor() {
  const handleReady = (editor) => {
    editor.model.document.on('change:data', () => {
      const htmlContent = editor.getData(); // 这个是带标签的
      // 怎么拿到纯文本？
    });
  };

  return (
    <CKEditor
      editor={ClassicEditor}
      onReady={handleReady}
    />
  );
}

富文本编辑器

我来解答赞 7 收藏

反馈

2 条解答

打工人凌硕 Lv1

用 DOMParser 解析 HTML 再取 textContent 搞定。

const parser = new DOMParser();

const doc = parser.parseFromString(htmlContent, 'text/html');

const plainText = doc.body.textContent || ''; // 获取纯文本内容

2026-03-22 13:27

❤奕森 Lv1

CKEditor 5 确实有内置方法可以拿纯文本，不用你自己去解析 HTML。

最直接的方式是用 editor.model.document.getRoot().getText()，但这个方法会保留换行符，读起来不太舒服。我更推荐用浏览器的 DOM 来处理，简单粗暴但非常好用：

function MyEditor() {

  const handleReady = (editor) => {

    editor.model.document.on('change:data', () => {

      const htmlContent = editor.getData();

      

      // 创建一个临时 DOM 元素来提取纯文本

      const tempDiv = document.createElement('div');

      tempDiv.innerHTML = htmlContent;

      const plainText = tempDiv.textContent || tempDiv.innerText || '';

      

      console.log(plainText);

    });

  };



  return (

    <CKEditor

      editor={ClassicEditor}

      onReady={handleReady}

    />

  );

}

为什么要这么搞而不是用 getText()？因为 getText() 返回的是带大量换行符的原始文本，读起来是扁的。用 textContent 处理过的字符串才是我们正常理解的"纯文本"。

如果你只需要在某个地方显示纯文本预览或者做字符统计之类的工作，这个方法足够了。性能上也不用担心，就是个 DOM 操作而己，又不是频繁调用。

2026-03-18 12:02