富文本编辑器中如何正确插入并编辑表格？

在 Draft.js 中处理表格确实比较棘手，因为它的设计初衷并不是为了处理这种复杂的嵌套结构。不过我们可以通过一些技巧来实现这个功能。

首先，我们需要把表格当作一个自定义的 block 来处理，而不是简单地插入 HTML 字符串。这样做有几个好处：一是可以更好地控制编辑行为，二是能和 Draft.js 的状态管理机制更好集成。

这里是一个可行的方案：

// 定义表格 block 的类型

const BLOCK_TYPE_TABLE = 'table';



// 创建一个空表格的 ContentBlock

function createTableBlock() {

  const tableHtml = '<table><tr><td></td><td></td></tr></table>';

  // 注意这里要用 convertFromHTML 转换 HTML 到 ContentBlock

  const contentBlocks = convertFromHTML(tableHtml);

  return contentBlocks[0]; // 返回第一个 block

}



// 插入表格的函数

function insertTable(editorState) {

  const newBlock = createTableBlock();

  

  // 获取当前 selection

  const selection = editorState.getSelection();

  

  // 创建新的 ContentState 并插入 block

  let contentState = editorState.getCurrentContent();

  const withTable = Modifier.splitBlock(

    contentState,

    selection

  );

  

  // 把新 block 加到当前光标位置后面

  const targetSelection = withTable.getSelectionAfter();

  contentState = Modifier.insertBlock(

    withTable,

    targetSelection,

    newBlock

  );

  

  // 更新 editor state

  return EditorState.push(editorState, contentState, 'insert-table');

}

这里需要注意几个关键点：
1. 我们用了 convertFromHTML 来解析 HTML 表格为 ContentBlock，这比直接插入字符串要靠谱得多。
2. 使用 splitBlock 和 insertBlock 来正确处理插入逻辑，避免破坏现有的 ContentState 结构。

为了让表格内容可编辑，我们还需要给 Draft.js 提供一个自定义的 block render 组件：

const blockRenderMap = Map({

  [BLOCK_TYPE_TABLE]: {

    element: 'div', // 这里用 div 包装表格元素

    wrapper: 


      {content}

    


  }

});



// 在你的 Editor 组件中使用这个 render map


  customStyleMap={styleMap}

  blockRenderMap={blockRenderMap}

/>

这段代码的核心思想是：让 Draft.js 认识到这是一个特殊的 block，并且用我们指定的方式来渲染它。这样就能解决光标无法进入单元格的问题了。

最后提醒一句：Draft.js 的表格支持不是开箱即用的功能，可能需要根据具体需求做一些定制化开发。但上面这个方案应该能帮你解决大部分问题。如果遇到其他特殊情况，欢迎继续讨论。

你这个问题很典型，Draft.js 本身是基于 block 的编辑器，你用 Modifier.replaceText 插入 HTML 字符串，它只会当成纯文本处理，不会解析成真正的 DOM 结构，更别谈交互了。

核心问题在于：Draft.js 的 block 是独立的编辑单元，你想在 block 内部再搞出可编辑的单元格，必须用自定义 block render。

标准做法是这样的：

1. 先定义一个自定义 block type，比如叫 table

2. 用 blockRendererFn 捕获这个 block，返回一个自定义组件

// 定义表格 block

const BLOCK_TYPE = 'table';



// 在 editorState 中插入表格 block

const insertTable = () => {

  const contentState = editorState.getCurrentContent();

  const selection = editorState.getSelection();



  // 创建一个 atomic block

  const newBlock = ContentState.createBlock({

    type: BLOCK_TYPE,

    text: ' ',

    data: fromJS({

      rows: [

        [{ content: '' }, { content: '' }],

        [{ content: '' }, { content: '' }]

      ]

    })

  });



  const newContentState = Modifier.replaceWithFragment(

    contentState,

    selection,

    List([newBlock])

  );



  setEditorState(EditorState.push(editorState, newContentState, 'insert-table'));

};



// blockRendererFn

const blockRenderer = (block) => {

  if (block.getType() === BLOCK_TYPE) {

    return {

      component: TableBlock,

      editable: false,  // 表格整体不参与 Draft.js 的编辑

      props: {

        onChange: (newData) => {

          // 将修改后的数据同步回 block

          const newContentState = Modifier.mergeIn(

            editorState.getCurrentContent(),

            [block.getKey()],

            { data: newData }

          );

          setEditorState(EditorState.push(editorState, newContentState, 'update-table-data'));

        }

      }

    };

  }

  return null;

};

3. 表格组件内部用原生 contentEditable 实现编辑

const TableBlock = (props) => {

  const { data, onChange } = props.blockProps;

  const [tableData, setTableData] = useState(data);



  const handleCellChange = (rowIndex, colIndex, value) => {

    const newData = {

      ...tableData,

      rows: tableData.rows.map((row, ri) =>

        row.map((cell, ci) =>

          ri === rowIndex && ci === colIndex ? { ...cell, content: value } : cell

        )

      )

    };

    setTableData(newData);

    onChange(newData);

  };



  return (

    <table className="rich-table">

      <tbody>

        {tableData.rows.map((row, rowIndex) => (

          <tr key={rowIndex}>

            {row.map((cell, colIndex) => (

              <td key={colIndex}>

                <div

                  contentEditable

                  suppressContentEditableWarning

                  onBlur={(e) => handleCellChange(rowIndex, colIndex, e.target.innerText)}

                >

                  {cell.content}

                </div>

              </td>

            ))}

          </tr>

        ))}

      </tbody>

    </table>

  );

};

几个关键点：

- 表格 block 的 editable 要设为 false，否则 Draft.js 会尝试把它当成普通文本编辑，导致行为混乱
- 表格内部用独立的 contentEditable div，每个单元格独立处理
- 数据通过 onChange 回写到 Draft.js 的 block data 中，保持状态同步
- 方向键问题需要在表格组件的 keyDown 处理里自己实现，或者用键盘事件冒泡

如果你还需要在表格里支持更复杂的操作（比如合并单元格），原理是一样的，数据结构设计好就行。