Welcome to the ORY Editor guide. Please be aware that the ORY Editor requires substantial knowledge of ReactJS, build tools like webpack, and ES6. If you lack this knowledge ask in our Chat for help.
Seeing is believing, so let's start with a demo!
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 exemplary structure of an editable (other editors call this "document") could be the following:
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)
There are four distinct data types:
1.in the tree) - the editable is a container for cells and rows. You can have multiple editables on a page and it is possible to drag and drop cells from one editable to another.
1.1in the tree) - the container cell is a cell without a plugin and gives structure to the tree. These cells are generated automatically when required and also removed automatically when no longer required.
1.2.1, ... in the tree) - the content cell is always a leaf in the tree (it has no children) and its behaviour is defined by a content plugin (which can be written by you or downloaded from npm). A content plugin is usually something like rich text, video, audio, a soundcloud widget and so on.
<figcaption align="center">A content cell with the image plugin</figcaption> </figure>
<figcaption align="center">A layout cell with a switchable background image plugin</figcaption> </figure>
The grid system is baked into the ORY Editor. It takes care of any drag and drop logic, resizing, focus detection and so
on. As a developer, you will primarily extend the functionality using layout and content plugins. Additionally,
the editor takes care of the whole data model. The plugins are just simple ReactJS components that receive
properties such as
state by the editor. You will learn in later sections how plugins
work exactly, what their API looks like, and also how to write your own.