React Quill Editor特殊字符存入数据库变为？问题求助

原因排查与解决步骤 #

• 数据库字符集配置问题
  确保数据库、数据表及对应字段使用支持完整Unicode的字符集（如utf8mb4，它比标准utf8支持更多特殊字符）。以MySQL为例，修改字段字符集的SQL命令：

  ALTER TABLE 你的表名 MODIFY COLUMN content TEXT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
  

  同时在数据库连接配置中指定字符集为utf8mb4，比如Node.js环境下的连接配置需添加charset: 'utf8mb4'。

• 编辑器内容获取与编码处理
  直接使用React Quill原生方法获取内容，避免手动转码操作：

  // 通过ref获取编辑器内容
  const editorContent = editorRef.current.getValue();
  

  不要对获取到的内容做额外的编码转换，直接传给后端。

• 后端接收编码配置
  后端服务需确保接收请求时使用UTF-8编码。比如在Express框架中添加以下中间件：

  app.use(express.urlencoded({ extended: true, charset: 'utf-8' }));
  app.use(express.json({ charset: 'utf-8' }));
  

  存储内容时保持原始编码，不要做转码处理。

• 特殊字符插入方式验证
  除Mac快捷键外，尝试直接复制粘贴特殊字符到编辑器，或通过自定义工具栏按钮插入，排除插入方式导致的编码异常：

  // 示例：添加自定义插入特殊字符的工具栏按钮
  const modules = {
    toolbar: [
      [{ 'header': [1, 2, 3, false] }],
      ['bold', 'italic', 'underline'],
      ['link'],
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      ['clean'],
      [{ 'insert': 'specialChars' }]
    ],
    handlers: {
      insert: function(value) {
        if (value === 'specialChars') {
          const targetChar = prompt('输入要插入的特殊字符');
          if (targetChar) this.quill.insertText(this.quill.getSelection().index, targetChar);
        }
      }
    }
  };
  

内容的提问来源于stack exchange，提问作者Deepak Kumar Patel