Froala Editor表格内修改列表样式类型功能失效问题

问题复现步骤 #

• 在Froala Editor中插入表格
• 选中表格内任意单元格
• 点击工具栏的有序/无序列表按钮，为单元格内内容添加列表
• 再次点击工具栏的列表样式按钮（切换有序/无序或修改列表类型）

问题描述 #

修改列表样式类型时，原有列表样式无变化，反而会生成同类型的嵌套列表；重复操作会持续增加嵌套层级。

• 异常效果：反复操作后编辑器内出现多层嵌套的同类型列表
• 场景说明：表格单元格内的列表在样式切换时触发错误的嵌套逻辑

预期行为 #

选择新的列表样式类型后，当前列表应直接切换为所选样式，而非生成嵌套列表

实际行为 #

列表样式未切换，每次操作都会在原有列表外层添加同类型的嵌套列表

解决方案 #

1. 自定义工具栏按钮，重写样式切换逻辑 #

通过自定义工具栏按钮的点击事件，先移除当前列表再应用新样式，避免嵌套：

import React, { useRef } from 'react';
import FroalaEditor from 'react-froala-wysiwyg';
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';

const FroalaEditorWithFix = () => {
  const editorRef = useRef(null);

  // 自定义列表样式切换逻辑
  const switchListStyle = (targetType) => {
    const editor = editorRef.current?.editor;
    if (!editor) return;

    // 定位当前选中的列表项及所在表格单元格
    const selection = editor.selection.get();
    const listItem = editor.node.findParent(selection.startNode, 'LI');
    const tableCell = listItem ? editor.node.findParent(listItem, 'TD, TH') : null;

    if (tableCell && listItem) {
      // 移除当前列表格式
      editor.commands.exec('removeFormat', { tag: 'UL, OL' });
      // 应用目标列表样式
      editor.commands.exec(targetType === 'ordered' ? 'insertOrderedList' : 'insertUnorderedList');
    } else {
      // 非表格内场景使用默认逻辑
      editor.commands.exec(targetType === 'ordered' ? 'insertOrderedList' : 'insertUnorderedList');
    }
  };

  return (
    <FroalaEditor
      ref={editorRef}
      config={{
        toolbarButtons: [
          'bold', 'italic', 'insertTable',
          {
            name: 'customListTools',
            buttons: [
              {
                text: '有序列表',
                onClick: () => switchListStyle('ordered')
              },
              {
                text: '无序列表',
                onClick: () => switchListStyle('unordered')
              }
            ]
          }
        ]
      }}
    />
  );
};

export default FroalaEditorWithFix;

2. 升级Froala Editor至最新稳定版 #

该问题大概率是编辑器的已知bug，建议检查当前使用版本，升级到官方最新稳定版，查看是否已修复表格内列表样式切换的异常逻辑。

3. 注册自定义命令处理样式切换 #

通过Froala的命令注册机制，实现更精准的列表样式替换：

// 在项目初始化时注册自定义命令
import FroalaEditor from 'froala-editor';

FroalaEditor.RegisterCommand('switchListStyle', {
  execute: function(targetType) {
    const $list = this.selection.closest('ul, ol');
    // 仅处理表格内的列表
    if ($list.length && this.selection.closest('td, th').length) {
      const listContainer = $list[0].parentNode;
      const listItems = Array.from($list[0].children);
      // 创建新列表元素
      const newList = document.createElement(targetType === 'ordered' ? 'ol' : 'ul');
      // 迁移列表项到新列表
      listItems.forEach(item => newList.appendChild(item));
      // 替换原有列表
      listContainer.replaceChild(newList, $list[0]);
    } else {
      // 非表格内使用默认命令
      this.execCommand(targetType === 'ordered' ? 'insertOrderedList' : 'insertUnorderedList');
    }
  },
  title: '切换列表样式'
});

之后在编辑器配置中添加调用该命令的工具栏按钮即可。

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