如何获取含换行的CKEditor文本并统计输入字符数？

我来帮你搞定这个需求！你遇到的问题很典型：editor.document.getBody().getText()会丢掉换行/回车，而editor.getData()又会带回一堆HTML标签，这两种方式都没法直接满足“获取带换行的纯文本+统计字符数”的需求。下面给你一个靠谱的解决方案：

核心思路 #

先获取编辑器的HTML内容，把其中代表换行的HTML标签（比如<p>、<br>）转换成真正的换行符\n，再提取纯文本，这样就能同时保留换行结构和得到干净的文本内容，最后直接统计长度即可。

实现代码（适配CKEditor 4） #

function EditorTextCount(editor) {
    // 1. 获取编辑器的原始HTML内容
    let htmlContent = editor.getData();
    
    // 2. 将HTML中的换行相关标签转换为换行符
    // <p>标签对应段落换行，替换为\n；</p>标签直接移除
    htmlContent = htmlContent.replace(/<p>/g, '\n').replace(/<\/p>/g, '');
    // <br>或<br/>标签对应手动换行，替换为\n
    htmlContent = htmlContent.replace(/<br\s*\/?>/g, '\n');
    
    // 3. 提取处理后的纯文本（去掉剩余的HTML标签）
    const tempContainer = document.createElement('div');
    tempContainer.innerHTML = htmlContent;
    const plainTextWithBreaks = tempContainer.textContent || tempContainer.innerText;
    
    // 4. 统计字符数（包含换行符，若不需要可自行过滤）
    const characterCount = plainTextWithBreaks.length;
    
    // 返回结果，方便后续使用
    return {
        text: plainTextWithBreaks,
        count: characterCount
    };
}

代码说明 #

• 第一步获取HTML是为了保留换行的结构信息，毕竟编辑器里的换行本质是用HTML标签实现的；
• 第二步的正则替换是关键：把段落标签<p>换成换行，手动换行标签<br>也换成换行，这样就把HTML层面的换行转换成了文本里的\n；
• 第三步用临时DOM元素提取纯文本，这是最安全的去除HTML标签的方式，比纯正则替换更可靠；
• 最后统计长度的时候，换行符会被算入字符数，如果你的需求里不需要统计换行符，可以在统计前加一行plainTextWithBreaks = plainTextWithBreaks.replace(/\n/g, '')。

适配CKEditor 5的补充 #

如果你的项目用的是CKEditor 5，其实有更简洁的方式直接获取带结构的纯文本：

function EditorTextCount(editor) {
    const plainTextWithBreaks = editor.model.getData({ trim: 'none' });
    const characterCount = plainTextWithBreaks.length;
    return {
        text: plainTextWithBreaks,
        count: characterCount
    };
}

CKEditor 5的model.getData()方法可以直接输出保留换行的纯文本，不需要额外处理HTML。

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