在 draft js 中实现 table 支持

Implementing table support in draft js

我正在使用 draft.js

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

我有一个要求：所有现有的编辑器功能也需要在此 table

中运行

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

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

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

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

虽然编辑器之间的选择处理很少。

我在 draft-js 中有一个 tables 的解决方案，对我们来说效果很好。我没有为每个单元格使用单独的编辑器，只是使用常规的 EditorBlocks，它们都是主编辑器树的一部分。这里有一个工作示例 https://draft-js-rte-evanmorrison.netlify.app/ and the repo here https://github.com/EvanMorrison/draft-js-rte

  1. 我有一个“TableCell”自定义块类型，它主要只呈现标准的 EditorBlock，但使用 React.createPortal 呈现到适用的 table 单元格中。

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

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

    中的位置

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

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

的选择和编辑采取预防措施