在草案js中实现表支持

Question

我正在使用draft.js

进行桌面支持（一级深度）的黑客攻击

我有一个要求：所有现有的编辑器功能也需要在此表中使用

我向您提出三个选择，请选择一个并解释您为何这样做：

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

Answer 1

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

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

编辑之间的选择处理非常少。

Answer 2

我仅使用主编辑器和自定义TableCell块组件以及ReactDOM.createPortal处理草稿js中的表。

1. 每个TableCell组件只是一个普通的EditorBlock。

2. 但是，我将重新创建表结构所需的基本信息存储在表的第一个块/单元的元数据中：例如，表样式和指定元素类型的二维对象数组（ <td>或<th>）和每个单元格的块级样式。

3. 渲染第一个块时，我渲染了包裹在表的完整DOM结构中的EditorBlock组件。除了第一个单元格以外的所有其他<th> / <td>标签都是空的，但是具有对应于它们在表中位置的数据属性。

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

据draft-js所知，它只是以通常的线性方式渲染块。这使得编辑，管理选择状态以及html的导入/导出比其他任何块类型都简单。