如何在Summernote编辑器中启用/禁用工具栏按钮且不移除按钮

Summernote官方没有提供直接禁用指定工具栏按钮的API，但可以通过DOM操作结合样式和状态设置来实现需求，具体步骤如下：

• 定位目标按钮：初始化Summernote后，找到工具栏中的「color」按钮。通常可以通过类名或属性选择器定位，比如选择器 .note-color 或 button[data-original-title="Color"]（不同版本类名可能略有差异，可通过浏览器开发者工具查看实际DOM结构调整）。

• 添加禁用样式与状态：给按钮添加disabled属性，并设置灰化样式来提示禁用状态：

.note-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

• 封装启用/禁用函数：写一个通用函数来切换按钮状态，方便随时调用：

// 切换color按钮的启用/禁用状态
function toggleColorButton(enabled) {
  const colorBtn = $('.note-color');
  if (enabled) {
    colorBtn.removeClass('disabled').removeAttr('disabled');
  } else {
    colorBtn.addClass('disabled').attr('disabled', 'disabled');
  }
}

// 调用函数禁用color按钮
toggleColorButton(false);

• 注意事项：如果工具栏是动态生成的，要确保在Summernote初始化完成后再执行上述代码；若选择器不生效，可通过浏览器开发者工具查看按钮的实际类名或属性来调整选择器。

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