在草稿js中实现表格支持

Question

我正在使用draft.js 进行表格支持（一层深）的hack

我有一个要求：所有现有的编辑器功能也需要在这个表中工作

我给你三个选择，请选择一个并解释你这样做的原因：

1. 嵌套编辑器（每个单元格一个） - 我猜我必须在编辑器之间实现选择处理
2. 表格单元格作为实体，包装在一个自定义块组件中，该组件呈现表格并管理列和行。- 开发它会很昂贵，因为我需要干扰很多事件处理和渲染。
3. 您认为还有其他方法可以更好地工作吗？

Answer 1

我有一个针对 Draft-js 中的表格的解决方案，非常适合我们。我不会为每个单元格使用单独的编辑器，而只是使用主编辑器树中的常规编辑器块。这里有一个工作示例https://draft-js-rte-evanmorrison.netlify.app/和这里的存储库https://github.com/EvanMorrison/draft-js-rte

1. 我有一个“TableCell”自定义块类型，主要仅渲染标准 EditorBlock，但使用 React.createPortal 渲染到适用的表格单元格中。

2. 重新创建表结构所需的信息存储在表的第一个单元格的元数据中。

3. 渲染第一个块时，我渲染其包含在表的完整 DOM 结构中的 EditorBlock 组件。除第一个单元格之外的所有单元格的<th>/<td>标记都是空的，但被赋予了与其在表中的位置相对应的数据属性。

4. 然后，我在将每个后续 TableCell 块渲染到表中的正确位置时使用 ReactDOM.createPortal。

就 Draft-js 而言，它只是以通常的线性方式渲染块。这使得编辑、管理选择状态以及 html 的导入/导出在大多数情况下并不比任何其他块类型更困难。尽管您确实必须对跨入或跨出表格的选择和编辑采取预防措施。

Answer 2

我在每个单元格中使用嵌套编辑器（选项 1）。在每个单元格内实现样式功能要容易得多。您可以使用已在“主”编辑器中使用的功能。

我的表实现有两个主要组件。该Table组件，一个自定义块组件。该组件的每个单元格内部都是Subeditor（嵌套的编辑器组件）。每个的 EditorStateSubeditor都存储在 Redux 存储中。

不过，编辑器之间的选择处理相当少。