如何在React Quill组件中允许保留指定HTML标签（如<mark>）

当然可以实现！ReactQuill基于Quill编辑器，默认会过滤掉不在它内置格式列表里的标签，不过我们可以通过自定义扩展来让它保留这类标签，具体操作如下：

步骤1：自定义Quill的Blot格式 #

Quill用Blots来定义编辑器中的内容格式，我们需要为标签注册一个自定义的Inline Blot：

// 导入Quill核心模块
import Quill from 'quill';

// 继承内置的Inline Blot基础类
const MarkBlot = Quill.import('blots/inline');

// 指定对应的HTML标签为MARK
MarkBlot.tagName = 'MARK';
// 绑定自定义样式类，方便后续设置高亮样式
MarkBlot.className = 'ql-mark';

// 注册这个自定义Blot，让Quill识别它
Quill.register(MarkBlot, true);

步骤2：配置ReactQuill的允许格式和工具栏 #

我们需要把自定义的mark格式加入到ReactQuill的formats列表中，如果需要在工具栏添加快速标记按钮，也可以在modules的toolbar配置里加上：

// 定义允许的格式列表，包含默认格式和新增的mark
const allowedFormats = [
  'bold', 'italic', 'underline', 'strike',
  'mark', // 加入自定义的mark格式
  // 其他你需要的格式，比如link、list等
];

// 配置工具栏模块（可选，若需要在工具栏显示标记按钮则添加）
const quillModules = {
  toolbar: [
    ['bold', 'italic', 'underline', 'strike'],
    ['mark'], // 添加标记按钮到工具栏
    // 其他工具栏选项...
  ],
};

步骤3：更新ReactQuill组件的使用 #

把上面的配置传入ReactQuill组件：

<ReactQuill
  key="content"
  value={this.state.content}
  onChange={handleContent}
  formats={allowedFormats}
  modules={quillModules}
/>

步骤4：添加自定义高亮样式（可选） #

为了让标签显示出预期的高亮效果，可以添加CSS样式：

.ql-mark {
  background-color: #ffeb3b;
  padding: 0 4px;
}

这样配置后，ReactQuill就不会再剥离标签了，你传入的<mark><i><b>[CLIENT NAME]</b></i></mark>内容会被正确保留和渲染。

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