Welcome to the ORY Editor guide. Seeing is believing, so let's start with a demo!
This a demo available at editor.ory.am so go ahead and try it yourself!
Before founding ORY, we built something like the Wikipedia, but for learning. The content is crowd sourced and over half a million people use this platform every month. We had to realize that existing open source content editing solutions had one of the three flaws:
We concluded that a solution must meet the following principles:
With these principles in mind, we went out and implemented the ORY Editor, which you are looking at right now.
The ORY Editor is primarily a tool to create and modify layouts. At the core, there are Cells and Rows. The layout system is very similar to the bootstrap grid system where you have rows and columns.
An empty editable ("document") is a cell without any children. As you create new cells, the structure quickly changes to something like this:
1. Editable 1. 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)
Cells can be populated with plugins, such as a text editor or rich media (video, audio). There are two types of cells, layout cells and content cells. Content cells are always leafs in the tree, meaning that they do not have any children. Layout cells are always branches, meaning that they do have children. A content cell is usually text, media (video, audio) whilst layout cells are usually things like a spoiler box, a parallax background image and so on.
In the example above, cells 18.104.22.168, 22.214.171.124.1.1, 126.96.36.199.1.2 are all content cells, because they do not have any children rows. Cells 1.1, 188.8.131.52 are layout cells, because they do have children rows.
Content and layout plugins are simple React components that receive properties such as
state by the editor
and render and execute arbitrary logic. The data model can be chosen freely by the plugin author.