HTML5空格在富文本编辑器里怎么用_富文本空格输入方法【详解】

富文本编辑器里按空格键不生效、内容粘连、格式错乱，根本不是“空格没用”，而是浏览器把连续空白字符（包括空格、制表符、换行）默认折叠成单个空格，且又常被编辑器自动过滤或转义。

为什么直接敲空格在富文本里经常“消失”

HTML 渲染时遵循 white-space: normal 默认行为：多个连续空格、制表符、换行都会被合并为一个空格；富文本编辑器（如 contenteditable 区域）底层仍走这套规则。更麻烦的是，很多编辑器（如 Quill、TinyMCE、CKEditor）会在内容提交前调用 innerHTML 清洗或序列化，把自动转成普通空格，或干脆删掉。

用户看到光标跳了，但预览/保存后文字紧贴在一起
innerText 读取时永远拿不到原始空格数量
复制粘贴到 Word 或微信公众号，空格又变成单个

真正能落地的空格输入方案（按优先级排序）

别依赖“多敲几次空格”，要控制 HTML 输出和编辑器行为：

需要固定宽度空格（如对齐、缩进）→ 用（全角空格，占两个中文字符宽）或（占一个中文字符宽），它们不易被编辑器误删，且 CSS 不会折叠
需要语义上“不可断行”的空格（如单位和数字之间：100 px）→ 必须用，但得配合编辑器配置关闭 HTML 清洗
想让普通空格“看起来多” → 改 CSS：white-space: pre-wrap 或 white-space: pre-line，但注意这会影响换行逻辑，慎用于整段富文本
服务端存值时，若用 textContent 提取内容，所有空格都会塌陷 → 改用 innerHTML + 白名单过滤（只保留、、）

Quill / TinyMCE / 原生 contenteditable 的实操差异

不同编辑器对空格的处理策略完全不同，改法也得对应：

立即学习“前端免费学习笔记（深入）”；

原生 contenteditable：加 style="white-space: pre-wrap;" 即可保留换行和空格，但需自己监听 keydown 拦截 Space 键并插入（否则仍可能被浏览器合并）
Quill：默认会把转成普通空格；需在初始化时配置 formats 加入 'script'（间接允许），或用 clipboard.matchers 拦截粘贴内容，把普通空格替换成
TinyMCE：启用 preserve_whitespace: true，并设置 entities: "raw" 防止被转义；输出时用 editor.getContent({ format: 'html' })，别用 getText()

const quill = new Quill('#editor', {
  modules: {
    clipboard: {
      matchers: [
        ['span', (node, delta) => {
          // 把粘贴进来的空格转成  
          const text = node.textContent.replace(/ /g, '\u00a0');
          return delta.insert(text);
        }]
      ]
    }
  }
});