Next-gen, highly customizable content editor for the browser - based on React and Redux. WYSIWYG on steroids.
JavaScript CSS Shell
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
config Upgrade material ui 1.2.0 (#547) Aug 9, 2018
docs docs: Updates tutorials.md (#530) Apr 19, 2018
examples Upgrade material ui 1.2.0 (#547) Aug 9, 2018
flow-typed/npm all: update flow definitions Oct 16, 2017
packages Resolve issues in paralax background plugin (#556) Aug 17, 2018
.babelrc all: greatly improve build toolchain (#370) May 14, 2017
.editorconfig 0.0.1: public early access release 🔥 🚒 🔥 Nov 9, 2016
.eslintignore all: greatly improve build toolchain (#370) May 14, 2017
.eslintrc all: greatly improve build toolchain (#370) May 14, 2017
.flowconfig Upgrade material ui 1.2.0 (#547) Aug 9, 2018
.gitignore plugins/content: add html5-video plugin Aug 29, 2017
.travis.yml travis: run on trusty (#485) Oct 24, 2017
.yarnclean core: mix resize indicator with background for better visibility Sep 8, 2017
CONTRIBUTING.md 0.0.1: public early access release 🔥 🚒 🔥 Nov 9, 2016
LICENSE license: update to lgpl Jun 12, 2017
Procfile all: implement heroku deploy May 14, 2017
README.md docs: Updates banner in README (#520) Mar 14, 2018
babelrc all: greatly improve build toolchain (#370) May 14, 2017
book.json 0.0.1: public early access release 🔥 🚒 🔥 Nov 9, 2016
lerna.json vendor: update lerna, remove parallel flag from build (#430) Aug 11, 2017
logo.png 0.0.1: public early access release 🔥 🚒 🔥 Nov 9, 2016
nodemon.json 0.0.1: public early access release 🔥 🚒 🔥 Nov 9, 2016
package.json Upgrade material ui 1.2.0 (#547) Aug 9, 2018
postcss.config.js all: add license header Feb 27, 2018
travis-deploy.sh ci: add deploy script May 14, 2017
yarn.lock Upgrade material ui 1.2.0 (#547) Aug 9, 2018

README.md

ORY Editor - Cloud Native Content Toolchain

Build Status Coverage Status Docs Guide

Join the chat at https://discord.gg/PAMQWkr Follow twitter Follow GitHub

ORY is a company building and maintaining developer tools for a safer, more accessible web. You might also like our other Open Source projects! The ORY Editor is a smart, extensible and modern editor ("WYSIWYG") for the web written in React. If you are fed up with the limitations of contenteditable, you are in the right place.

ORY Editor demo

The ORY Editor is used at Germany's largest (~800k uniques per month) E-Learning Website www.serlo.org to improve the wiki experience.

We use the ORY Editor for ORY Sites, a tool for creating websites. It's similar to squarespace, but it works offline, the sites you created are stored on your device, and you are able to create your own designs and plugins.

Check out the demo at editor.ory.am!


Please Note: ORY Editor is pre-release and backwards compatibility is not guaranteed. However, we try our best to make breaking changes visible and easy to recover from!

Introduction

We have been running the Wikipedia for learning for almost a decade now. The experience and the lessons learned made us embark on the journey to build the ORY Editor. We wanted to make content editing on the web easy and enrich the Open Source Community with technology that moves the needle significantly for how content is created and edited on the web.

What's the problem?

We had to realize that existing open source content editing solutions had one of the three flaws:

  • The produced markup was horrific, a lot of sanitation had to take place and XSS is always a threat.
  • The author must learn special mark up, like markdown, before being able to produce content. These text-based solutions are usually unable to specify a layout and complex data structures like tables are annoying to edit.
  • Promising libraries potentially solving the above where abandoned by their maintainers, because it started as a special use case, or a free-time project.

So what's different?

We concluded that a solution must meet the following principles:

  • The state is a normalized JSON object, no HTML involved.
  • It is a visual editor that does not require programming experience or special training.
  • It is built by a company, reducing the likelihood of abandonment.
  • Based on reusable React Components, it gives developers, authors and designers new ways of working together and creating better and richer experiences more easily.
  • It works on mobile and touch devices.

With these principles in mind, we went out and implemented the ORY Editor, which you are looking at right now.

ORY Sites

ORY Sites is an innovative open source static site generator, similar to Jekyll or Hugo. Content creation is done in your browser, with the full extensibility of the ORY Editor.

Learn more about ORY Sites!

ORY Sites

Quickstart

Currently our focus is on optimizing the ORY Editor for usage with React. We will work on, and ship versions that do not require React in the future. Please check the ReactJS tutorial!

$ npm install --save ory-editor

Note: The ory-editor package is a metapackage. It includes the core, our default ui and some plugins we officially support. Use this package primarily for convenience.

Documentation

Check out the user guide on gitbook.

How to run, develop, and contribute

Do you want to run, develop or contribute to the ORY Editor? For that you need Node installed on your system. Use git to check out this repository as followed.

$ git clone https://github.com/ory/editor.git
$ cd editor

Install dependencies

The ORY Editor is a monorepo that you initialise with:

$ npm i

Run the example(s)

Here are some examples that are a good starting point if you want to familiarize yourself with the editor. To run the examples, use one of the following commands:

$ npm run build
$ cd examples
$ npm run start

Run the toolchain

Our toolchain contains tests, eslint and flow types. We highly recommend to run this toolchain while developing.

# run the tests in watch mode
$ npm run test:watch

# run eslint in watch mode
$ npm run lint:watch

# run flowtype in watch mode
$ npm run flow:watch

Run the documentation

To run the guide in watch mode, do:

$ npm run docs:guide

To generate API docs, run:

$ npm run docs:api

Known issues

We keep track of known issues in the issues tab.