Wagtail输入带重音字符被删除：StreamField的RichTextBlock无法保留重音字符

问题原因 #

你遇到的是Wagtail默认富文本编辑器Draftail的前端输入处理bug，和后端语言配置、存储逻辑无关：

• 后端配置正常的依据：TextField可以正常存储重音字符、粘贴重音文本也能正常保存，说明后端编码、内容过滤逻辑没有问题
• 问题根因：旧版本Wagtail内置的Draftail编辑器对合成输入（输入带声调字符时需要选字的输入触发的事件）处理存在缺陷，会误删未完成输入的重音字符

解决方案 #

方案1：升级Wagtail版本（优先推荐） #

该bug已在Wagtail 4.1及以上版本修复，直接升级Wagtail到官方支持的LTS版本即可解决：

pip install --upgrade wagtail>=4.2

方案2：无法升级版本时打前端补丁 #

如果项目受限不能升级Wagtail，可以添加自定义JS修复Draftail的输入处理逻辑：

1. 在项目静态文件目录新增draftail-fix.js，内容如下：

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('[data-draftail-editor]').forEach(editorEl => {
    let composing = false;
    editorEl.addEventListener('compositionstart', () => {
      composing = true;
    });
    editorEl.addEventListener('compositionend', (e) => {
      composing = false;
      // 手动插入合成的重音字符，避免被Draftail过滤
      if (e.data) {
        document.execCommand('insertText', false, e.data);
        e.preventDefault();
      }
    });
    // 拦截键盘事件，合成中不触发Draftail的默认字符校验
    editorEl.addEventListener('keydown', (e) => {
      if (composing) {
        e.stopPropagation();
      }
    }, true);
  });
});

2. 在项目的settings.py中注册该静态文件到Wagtail的管理后台资源：

WAGTAILADMIN_EXTRA_JS = [
    'js/draftail-fix.js'
]

方案3：替换为CKEditor编辑器 #

你也可以安装第三方CKEditor集成插件替换默认编辑器，对多语言字符的兼容性更好：

pip install wagtail-ckeditor

安装后按照指引配置后，将原RichTextBlock替换为CKEditorBlock即可。

验证步骤 #

配置完成后重启项目服务，清空浏览器缓存后重新进入编辑器页面，手动输入带重音的葡萄牙语字符即可正常保存。

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