ORY编辑器 (1)介绍

介绍

欢迎来到ORY编辑器指南。请注意，ORY编辑器需要大量的关于ReactJS、构建工具(如webpack)和ES6的知识。如果你缺乏这方面的知识，请在我们的聊天中寻求帮助。

示范

眼见为实，让我们从一个演示开始!

示范

一个可用的演示在editor.ory.sh，所以去试试它自己!

为什么它是不同的

在创建ORY之前，我们建立了类似维基百科的东西，但只是为了学习。内容是众包的，每个月有超过50万人使用这个平台。我们必须认识到，现有的开源内容编辑解决方案存在以下三个缺陷之一:

1. 制作的标记非常可怕，必须进行许多安全工作，XSS总是一个威胁。
2. 作者必须学习特殊的上层标签，如markdown，才能产生内容。这些基于文本的解决方案通常无法指定布局，而且像表这样的复杂数据结构很难编辑。
3. 有前途的库有可能解决上述问题，因为它最初是作为一个特殊用例或空闲项目而被维护者抛弃的。

我们的结论是，解决办法必须符合下列原则:

1. 该状态是一个规范化JSON对象，不涉及HTML。
2. 它是一个不需要编程经验或特殊培训的可视化编辑器。
3. 它是由一家公司建造的，减少了被遗弃的可能性。
4. 基于可重用的React组件，它为开发人员、作者和设计人员提供了新的合作方式，从而更容易地创建更好更丰富的体验。
5. 它适用于移动和触控设备。

带着这些原则，我们出去实现了ORY编辑器，也就是您现在看到的编辑器。

它是如何工作的

ORY编辑器主要是创建和修改布局的工具。核心是单元格和行。布局系统非常类似于bootstrap网格系统，其中包含行和列。

可编辑(其他编辑器称之为“文档”)的示例结构可以是:

1. Editable
+-1. Container cell
  +-1. Row
  | +-1. Cell (text)
  | |-2. Cell (parallax background image)
  |   +-1. Row
  |     +-1. Cell (image)
  |     |-2. Cell (image)
  |-2. Row
  | +-1. Cell (image)
  | |-2. Cell (image)

有四种不同的数据类型:

1. Editable (树中 1.) - editable是单元格和行的容器。您可以在一个页面上有多个可编辑的单元格，并且可以将单元格从一个可编辑的单元格拖放到另一个可编辑的单元格中。
2. Container cell (树中 1.1) - 容器单元格是一个没有插件的单元格，它为树提供了结构。这些单元格在需要时自动生成，在不再需要时自动删除。
3. Content cell (树中 1.1.1, 1.2.1, ...) - 内容单元格始终是树中的叶子(它没有子元素)，它的行为由内容插件定义(可以由您编写或从npm下载)。内容插件通常是富文本、视频、音频、soundcloud小部件等。
4. Layout cell 布局单元格包含嵌套单元格和行(容器、内容、布局)的列表。布局单元格的思想是它给它的子单元格一个布局(例如视差背景，一个扰流框，一个所有文本都是红色的框)。布局是由布局插件定义的。布局单元格必须总是至少有一个子单元格，否则它将被自动删除。

一个带有图像插件的内容单元格

带有可切换背景图像插件的布局单元格

网格系统被烘焙到ORY编辑器中。它负责任何拖放逻辑、调整大小、焦点检测等等。作为开发人员，您将主要使用布局和内容插件扩展功能。此外，编辑器负责整个数据模型。插件只是简单的反应物js组件，它们接收编辑器接收的属性如onChange、readOnly、state。在后面的部分中，您将了解插件的工作原理，它们的API是什么样子的，以及如何编写自己的API。