Angular应用中Summernote粗体样式功能异常问题排查

问题背景 #

在Angular应用中集成Summernote富文本编辑器，已引入必要资源：

"./node_modules/summernote/dist/summernote-lite.min.css"
"node_modules/summernote/dist/summernote-lite.min.js"

组件初始化配置如下：

$('#summernote').summernote({
  toolbar: [
    ['style', ['style']],
    ['font', ['bold', 'italic', 'underline', 'clear']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']],
    ['table', ['table']],
  ],
});

遇到的异常：全选编辑器内文本后，点击粗体图标或按Ctrl+B无任何反应；但选中部分文本时粗体功能正常，提前开启粗体再输入也能正常显示粗体。已尝试切换summernote-bs5/bs4版本及对应CSS，问题仍未解决。

可行解决方案 #

1. 确保jQuery加载顺序正确 #

Angular集成jQuery时，必须保证jQuery在Summernote之前加载，避免DOM操作冲突。修改angular.json的scripts配置：

"scripts": [
  "./node_modules/jquery/dist/jquery.min.js",
  "./node_modules/summernote/dist/summernote-lite.min.js"
]

2. 强制使用<strong>标签替代<span> #

默认情况下Summernote可能用<span>标签实现粗体，全选时容易选中根容器导致命令失效。开启styleWithSpan: false强制使用<strong>标签：

$('#summernote').summernote({
  toolbar: [
    // 保留原有工具栏配置
  ],
  styleWithSpan: false
});

3. 手动处理全选状态下的粗体触发 #

通过onInit回调监听粗体按钮点击和快捷键，针对全选场景手动执行粗体切换操作：

$('#summernote').summernote({
  toolbar: [
    // 原有工具栏配置
  ],
  onInit: function() {
    const $editor = $(this);
    
    // 处理工具栏粗体按钮点击
    $editor.summernote('toolbar').find('.note-btn-bold').on('click', function() {
      const range = $editor.summernote('createRange');
      const fullContent = $editor.summernote('code').replace(/<[^>]+>/g, '').trim();
      // 判断是否为全选状态
      if (range.toString().trim() === fullContent) {
        const currentCode = $editor.summernote('code');
        // 切换粗体状态：如果已有strong标签则移除，否则添加
        if (currentCode.startsWith('<strong>') && currentCode.endsWith('</strong>')) {
          $editor.summernote('code', currentCode.replace(/^<strong>(.*)<\/strong>$/, '$1'));
        } else {
          $editor.summernote('code', `<strong>${currentCode}</strong>`);
        }
      } else {
        $editor.summernote('bold');
      }
    });

    // 处理Ctrl+B快捷键
    $editor.on('keydown', function(e) {
      if (e.ctrlKey && e.key.toLowerCase() === 'b') {
        e.preventDefault();
        const range = $editor.summernote('createRange');
        const fullContent = $editor.summernote('code').replace(/<[^>]+>/g, '').trim();
        if (range.toString().trim() === fullContent) {
          const currentCode = $editor.summernote('code');
          if (currentCode.startsWith('<strong>') && currentCode.endsWith('</strong>')) {
            $editor.summernote('code', currentCode.replace(/^<strong>(.*)<\/strong>$/, '$1'));
          } else {
            $editor.summernote('code', `<strong>${currentCode}</strong>`);
          }
        } else {
          $editor.summernote('bold');
        }
      }
    });
  }
});

4. 修正选区焦点后执行命令 #

全选后先让编辑器重新获取焦点，再执行原生粗体命令，确保选区被正确识别：

// 重写粗体按钮事件
$(document).on('click', '.note-btn-bold', function() {
  const $editor = $('#summernote');
  $editor.summernote('focus');
  document.execCommand('bold', false, null);
});

// 重写Ctrl+B快捷键
$(document).on('keydown', '#summernote', function(e) {
  if (e.ctrlKey && e.key.toLowerCase() === 'b') {
    e.preventDefault();
    $(this).summernote('focus');
    document.execCommand('bold', false, null);
  }
});

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