Vue2集成CKEditor 5后空格键仅能在字母间加空格无法输入连续空格求助

前置排查点 #

你当前的组件代码存在配置未挂载的问题：模板中ckeditor标签绑定了:config="config"，但组件的data中没有声明config字段，所有自定义编辑器配置均未生效，先补充配置挂载：

// Component.js 中修改data定义
data: function() {
    return {
        content: '',
        options: {},
        Classic: window.ClassicEditor,
        // 新增config字段，挂载编辑器配置
        config: {
            width: '100%',
            height: '100%'
        }
    }
}

核心原因说明 #

CKEditor 5默认遵循HTML空白字符合并规则，会自动合并连续的普通空格，同时内置的输入拦截逻辑默认会过滤边界位置的空格输入，就会出现仅能在两个字符中间输入单个空格的问题。 #

修复方案 #

方案1：添加空白保留配置 #

在config中新增空白保留相关配置：

config: {
    width: '100%',
    height: '100%',
    // 新增以下配置
    whitespace: 'preserve',
    htmlSupport: {
        allow: [
            { name: /^.*$/, styles: true, attributes: true, classes: true }
        ]
    }
}

方案2：手动处理连续空格转换 #

如果配置后仍不生效，给ckeditor组件添加输入事件监听，手动将连续空格转换为不会被HTML合并的非折叠空格：

1. 修改组件模板：

<ckeditor :editor="Classic" v-model="content" :config="config" @input="handleSpaceInput"></ckeditor>

2. 组件新增处理方法：

methods: {
    handleSpaceInput() {
        // 连续2个及以上普通空格，替换为普通空格+非折叠空格的组合，保留空格宽度的同时不会被合并
        this.content = this.content.replace(/ {2,}/g, match => {
            return ' ' + ' '.repeat(match.length - 1)
        })
    }
}

方案3：排查全局事件拦截 #

检查项目中是否有全局注册的keydown/keyup事件监听器、全局快捷键绑定逻辑，确认没有拦截空格键的默认输入行为。 #

展示侧补充处理 #

如果编辑器保存的HTML在其他页面展示时仍出现空格合并，给展示容器添加如下CSS即可保留空格格式：

.content-display-container {
    white-space: pre-wrap;
}

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