如何为Quilljs编辑器设置带HTML属性的默认起始内容？

我明白你遇到的困扰了——QuillJS默认会过滤掉它不识别的自定义HTML类，所以你添加的<span class="highlighted">[variable]</span>会被自动剥离，所有内容都被统一包裹到<p>标签里。下面给你一步步的解决方案，不管是原生Quill还是React集成版本都适用：

核心原因 #

Quill有一套自己的内容格式体系（Blots），只有在它的白名单内的格式才会被保留。自定义的highlighted类不在默认白名单中，所以会被解析器过滤掉。我们需要先把这个高亮样式注册成Quill能识别的自定义格式。

步骤1：注册自定义高亮格式 #

首先，创建一个自定义的行内格式（Blot），把它和highlighted类绑定：

import Quill from 'quill';

// 导入Quill的行内格式基类
const Inline = Quill.import('blots/inline');

// 定义高亮格式类
class HighlightBlot extends Inline {
  // 格式名称，后续配置会用到
  static blotName = 'highlight';
  // 对应的HTML标签
  static tagName = 'SPAN';
  // 要绑定的CSS类名
  static className = 'highlighted';

  // 创建元素时自动添加目标类名
  static create(value) {
    const node = super.create(value);
    node.classList.add(this.className);
    return node;
  }
}

// 将自定义格式注册到Quill
Quill.register(HighlightBlot, true);

步骤2：设置带高亮的初始内容 #

注册完格式后，我们可以用两种方式设置初始内容，推荐用Delta格式（Quill的原生格式，更稳定）：

方式A：从HTML转换为Delta（适合已有HTML内容的场景） #

// 假设你已经获取到Quill实例
const quill = quillInstance;

// 你的初始HTML内容
const initialHtml = 'content text with a <span class="highlighted">[variable]</span>';

// 把HTML转换为Quill能识别的Delta格式
const initialDelta = quill.clipboard.convert({ html: initialHtml });

// 设置编辑器内容
quill.setContents(initialDelta);

方式B：直接构建Delta格式（更可控） #

import Delta from 'quill-delta';

const initialDelta = new Delta()
  .insert('content text with a ')
  // 插入高亮内容，指定highlight格式
  .insert('[variable]', { highlight: true })
  .insert('\n'); // 换行，对应Quill的<p>标签

quill.setContents(initialDelta);

步骤3：React环境（react-quill）的适配 #

如果你用的是react-quill库，需要在组件内完成格式注册，并且在formats配置中加入自定义的highlight：

import React, { useRef, useEffect } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import Quill from 'quill';
import Delta from 'quill-delta';

// 先注册自定义高亮格式
const Inline = Quill.import('blots/inline');
class HighlightBlot extends Inline {
  static blotName = 'highlight';
  static tagName = 'SPAN';
  static className = 'highlighted';

  static create(value) {
    const node = super.create(value);
    node.classList.add(this.className);
    return node;
  }
}
Quill.register(HighlightBlot, true);

const QuillEditor = () => {
  const quillRef = useRef(null);

  useEffect(() => {
    // 组件挂载后设置初始内容
    if (quillRef.current) {
      const quill = quillRef.current.getEditor();
      const initialDelta = new Delta()
        .insert('content text with a ')
        .insert('[variable]', { highlight: true })
        .insert('\n');
      quill.setContents(initialDelta);
    }
  }, []);

  // 配置工具栏和允许的格式，必须包含自定义的highlight
  const modules = {
    toolbar: ['bold', 'italic', 'underline'] // 你的工具栏选项
  };

  const formats = [
    'highlight',
    'bold', 'italic', 'underline'
  ];

  return (
    <ReactQuill
      ref={quillRef}
      modules={modules}
      formats={formats}
      theme="snow"
    />
  );
};

export default QuillEditor;

最后：添加高亮的CSS样式 #

别忘了在样式文件里添加highlighted类的样式，不然看不到高亮效果：

.highlighted {
  background-color: #fff3cd; /* 浅黄色，可根据需求调整 */
  padding: 2px 4px;
  border-radius: 3px;
}

这样设置后，编辑器的初始内容就会保留高亮样式，输出时也会正确生成带highlighted类的<span>标签，不会再被剥离啦～

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