ORY编辑器

2018-12-15 前端 GitHub精选阅读量

下一代，高度定制的内容编辑器为浏览器-React和Redux。所见即所得。https://ory-editor.aeneas.io

ORY编辑器是一个智能、可扩展和现代的编辑器(“所见即所得”)，用于用React编写的web。如果您受够了contenteditable的限制，那么您是正确的。

ORY编辑器用于德国最大的电子学习网站www.serlo.org(每月约800k uniques)，以改善wiki的体验。

查看演示在ory-editor.aeneas.io!

重要的: 此编辑器是预发布的，不能保证向后兼容。它是由它的作者和核心维护者Aeneas Rekkas作为一个个人项目进行维护的

介绍

我已经在维基百科学习了将近十年。
这段经历和学到的教训让我踏上了构建ORY编辑器的征程。
我想让web上的内容编辑变得简单，并通过技术丰富开放源码社区，从而显著地改变web上的内容创建和编辑方式。

有什么问题?

我必须意识到，现有的开源内容编辑解决方案存在以下三个缺陷之一:

制作的标记非常可怕，必须进行许多安全工作，XSS总是一个威胁.
作者必须学习特殊的上层标签，如markdown，才能产生内容。这些基于文本的解决方案通常无法指定布局，而且像表这样的复杂数据结构很难编辑.
基于contenteditable的编辑器无法使用布局 (e.g. flexbox 或浮动网格).

所以有什么不同?

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

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

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

快速入门

目前的重点是优化使用React的ORY编辑器。将来不需要React的版本可能会在某个时候发布. 请检查 ReactJS 教程!

1	$ npm install --save ory-editor

请注意: ory-editor包是一种元包。它包括核心、默认ui和一些官方支持的插件。使用这个包主要是为了方便.

文档

查看gitbook的用户指南.

如何运行、开发和贡献

您希望运行、开发或向ORY编辑器提供内容吗?为此，您需要在系统上安装Node。按照下面的方式使用git签出这个存储库

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

安装依赖关系

ORY编辑器是monorepo，您可以使用它初始化:

$ yarn i

要正常工作，您需要yarn.

运行示例

如果您想熟悉编辑器，这里有一些例子是一个很好的起点。
要运行示例，请使用以下命令之一

1
2
3

$ yarn run build
$ cd examples
$ yarn run start

运行工具链

工具链包含测试、eslint和流类型。强烈建议在开发时运行此工具链.

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

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

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

运行该文档

要在watch模式下运行指南，请执行:

1	$ yarn run docs:guide

To generate API docs, run:

1	$ yarn run docs:api