javascript - 在草案 js 中实现表格支持

Question

我正在使用 draft.js 进行表支持(一层深)的破解

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

我给你三个选择，请选择一个并解释你为什么这样做 :

嵌套编辑器(每个单元格一个)- 我猜我必须在编辑器之间实现选择处理

表格单元格作为实体，包装在自定义 block 组件中，该组件呈现表格并管理列和行。 - 开发它的成本很高，因为我需要干扰大量的事件处理和渲染。

您认为还有其他方法可以更好地工作吗？

Answer 1

我有一个适用于我们的 Draft-js 表格的解决方案。我不为每个单元格使用单独的编辑器，只是常规的 EditorBlocks，它们都是主编辑器树的一部分。这里有一个工作示例 https://draft-js-rte-evanmorrison.netlify.app/和这里的 repo https://github.com/EvanMorrison/draft-js-rte

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

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

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

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

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