在TipTap 2.0中为选中段落单独添加类的技术问询

你当前的代码会全局修改所有<paragraph>节点的属性，导致所有段落都被加上lead类。要实现仅给选中的段落单独设置类，需要针对选区范围内的段落节点进行操作：

方法一：遍历选区节点添加类 #

使用forEach遍历选区覆盖的节点，仅对段落节点更新属性：

this.editor.chain()
  .focus()
  .forEach(node => {
    if (node.type.name === 'paragraph') {
      // 直接设置类（会覆盖原有类）
      return this.editor.setNodeAttribute(node, 'class', 'lead');
    }
  })
  .run();

方法二：追加类而非覆盖 #

如果需要保留段落原有类名，仅追加lead类，可以修改为：

this.editor.chain()
  .focus()
  .forEach(node => {
    if (node.type.name === 'paragraph') {
      const existingClass = node.attrs.class || '';
      // 避免重复添加类
      const newClass = existingClass.includes('lead') 
        ? existingClass 
        : `${existingClass} lead`.trim();
      return this.editor.setNodeAttribute(node, 'class', newClass);
    }
  })
  .run();

注意事项 #

• 确保操作前有明确的选区（选中目标段落的部分或全部内容），否则forEach不会匹配到任何节点。
• 如果需要点击段落即可选中并添加类，可以结合选区判断，自动选中当前点击的段落节点后再执行上述逻辑。

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