如何在Jodit中实现类似CKEditor StyleSets的块元素切换与CSS类添加？

Jodit本身没有直接对应CKEditor StyleSets的内置功能，但可以通过自定义按钮+DOM操作实现完全相同的效果，支持给h2/h3/p/a等任意元素添加预定义类。

实现步骤 #

1. 定义样式集配置

先把需要的预定义样式整理成配置数组，结构和CKEditor风格保持一致：

const customStyles = [
  { name: '模块标题', element: 'h2', attributes: { class: 'modultitel' } },
  { name: '副标题', element: 'h3', attributes: { class: 'zwischentitel' } },
  { name: '图片说明', element: 'p', attributes: { class: 'bildlegende' } },
  { name: '橙色按钮', element: 'a', attributes: { class: 'btn orange', href: '#' } }
];

2. 给Jodit添加自定义下拉按钮

在Jodit初始化时，通过addButton方法添加一个自定义下拉按钮，处理样式的应用和切换逻辑：

const editor = new Jodit('#editor', {
  buttons: ['bold', 'italic', 'customStyles'], // 把自定义按钮加入工具栏
  buttonsExtends: {
    customStyles: {
      name: '样式集',
      type: 'select',
      options: customStyles.map(style => ({
        value: JSON.stringify(style),
        text: style.name,
        // 给下拉选项加预览样式
        css: `
          display: block;
          padding: 4px 8px;
          ${style.element === 'h2' ? 'font-size: 1.5em; font-weight: bold;' : ''}
          ${style.element === 'h3' ? 'font-size: 1.2em; font-weight: bold;' : ''}
          ${style.attributes.class.includes('btn orange') ? 'background: orange; color: white; padding: 4px 12px; border-radius: 4px;' : ''}
        `
      })),
      onSelect: function(styleStr) {
        const style = JSON.parse(styleStr);
        const { element, attributes } = style;
        const editor = this;
        const selection = editor.selection;
        
        // 获取当前选中的元素或父元素
        const currentElement = selection.getCurrentElement() || selection.getParentElement();
        
        // 情况1：当前元素就是目标元素，切换类
        if (currentElement && currentElement.tagName.toLowerCase() === element.toLowerCase()) {
          const targetClass = attributes.class;
          if (currentElement.classList.contains(targetClass)) {
            // 移除类，恢复默认
            currentElement.classList.remove(targetClass);
            // 如果是链接，可选移除href
            if (element === 'a') {
              currentElement.removeAttribute('href');
            }
          } else {
            // 先移除其他同类型样式的类
            customStyles
              .filter(s => s.element === element)
              .forEach(s => currentElement.classList.remove(s.attributes.class));
            // 添加目标类
            currentElement.classList.add(targetClass);
            // 如果是链接，设置href
            if (element === 'a') {
              currentElement.setAttribute('href', attributes.href || '#');
            }
          }
          return;
        }
        
        // 情况2：选中文本，包裹成目标元素并添加类
        const newElement = editor.createInside.element(element, attributes);
        selection.surround(newElement);
      }
    }
  }
});

3. 可选：添加样式预览的全局CSS

如果需要让编辑器内的样式和实际显示一致，添加对应的CSS：

.modultitel {
  font-size: 1.8em;
  color: #2c3e50;
  margin: 1.5em 0 0.5em;
}
.zwischentitel {
  font-size: 1.4em;
  color: #34495e;
  margin: 1.2em 0 0.4em;
}
.bildlegende {
  font-size: 0.9em;
  color: #7f8c8d;
  text-align: center;
  margin-top: 0.5em;
}
.btn.orange {
  background-color: #f39c12;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
}

功能说明 #

• 选中已有元素时，点击对应样式会切换类（有则移除，无则添加，同时会移除同元素类型的其他自定义样式类）
• 选中文本时，会直接将文本包裹成目标元素并添加预定义类
• 链接元素会自动设置href属性（可根据需求调整）

内容的提问来源于stack exchange，提问作者li-life