ORY编辑器 (2)ory-editor-core

2018-12-14 React ORY编辑器阅读量

Core

其核心是ORY编辑器的主系统。它包含创建和修改布局的逻辑，并负责处理插件。

开始

ORY编辑器使用Redux存储来管理内部状态。创建新Editor实例时。

1
2
3

import Editor from 'ory-editor-core'

const editor = new Editor()

Redux store也被创建。因此，在应用程序生命周期中只实例化Editor一次非常重要(这称为单例模式)。

import Editor from 'ory-editor-core'

const editor = new Editor()
const editor2 = new Editor() // 不要这样做.

添加插件

现在我们知道如何创建一个空编辑器。让我们也添加一些插件。我们将使用来自ORY编辑器存储库的插件。我们称这些插件为“ory插件”，因为它们是由我们编写和维护的。

让我们拿一个图像插件作为初学者。图像插件是一个简单的内容插件，它允许您通过将插件指向图像URL来添加图像。目前不支持上传图片。

ory图像插件

要安装image插件，我们使用npm: npm install ory-editor-plugins-image。接下来，我们需要将它添加到编辑器实例中:

import Editor from 'ory-editor-core'

import image from 'ory-editor-plugins-image'
import 'ory-editor-plugins-image/lib/index.css'

const editor = new Editor({
  plugins: {
    content: [image],
  }
})

让我们从头到尾来。首先，我们导入图像插件和所需的CSS:

1 2	import image from 'ory-editor-plugins-image' import 'ory-editor-plugins-image/lib/index.css'

我们假设您正在运行webpack，其中有一个能够导入CSS的插件。如果这让你感到困惑，去https://gitter.im/webpack/webpack寻求帮助——他们非常好

接下来，我们创建编辑器实例并通过构造函数传递图像内容插件。

const editor = new Editor({
  plugins: {
    content: [image],
  }
})

也可以在运行时(即创建编辑器实例之后)同时add/set/remove布局和内容插件，如下所示。使用这些方法将强制editor re-render。

1
2
3

editor.addContentPlugin(image)
editor.removeContentPlugin(image)
editor.setContentPlugins([image])

渲染

接下来，我们显然希望呈现编辑器。核心包导出一个名为Editable的反应物js组件。我们假设HTML是这样的:

<!DOCTYPE html>
<html>
  <body>
    <div id="editable-1"></div>
    <div id="controls"></div>
  </body>
</html>

在这种情况下，javascript应用程序看起来是这样的:

import React from 'react'
import ReactDOM from 'react-dom'

import Editor, { Editable } from 'ory-editor-core'

import image from 'ory-editor-plugins-image'
import 'ory-editor-plugins-image/lib/index.css'

const editor = new Editor({
  plugins: {
    content: [image]
  }
})

ReactDOM.render((
  <Editable editor={editor} />
), document.getElementById('editable-1'))

我们所做的就是使用ReactJS呈现Editable组件并传递editor实例。然而，这里有一个问题——什么也不会发生。这是因为没有可用的内容可以呈现。让我们改变!

创建一个空状态

为了创建一个空状态，core导出了一个名为createEmptyState的方法。返回是一个JSON对象，其中包含一个惟一的id。

import { createEmptyState } from 'ory-editor-core'

const editable = createEmptyState()
console.log(editable.id) // 提供类似 "29fb21c6-6e00-416f-a8e1-2be9fb84801c"

把这个加到上面的代码中，我们得到:

import React from 'react'
import ReactDOM from 'react-dom'

import Editor, { Editable, createEmptyState } from 'ory-editor-core'

import image from 'ory-editor-plugins-image'
import 'ory-editor-plugins-image/lib/index.css'

const editable = createEmptyState()

const editor = new Editor({
  plugins: {
    content: [image]
  },
  editables: [editable],
})

ReactDOM.render((
  <Editable
    editor={editor}
    id={editable.id}
  />
), document.getElementById('editable-1'))

注意，我们将id={editable.id}添加到<Editable>。这是必需的，因为我们需要告诉组件我们想要在那里呈现哪个editable，我们也可以这样做:

ReactDOM.render((
  <div>
    <div className="left">
      <Editable editor={editor} id="1" />  
    </div>

    <div className="right">
      <Editable editor={editor} id="2" />
    </div>
  </div>
), document.getElementById('editable-1'))

保存和加载

您接收到的状态是内部编辑器状态的序列化版本。它只包含基本值(字符串、数字、数组、映射)，可以安全地序列化为JSON。

假设您有一个名为saveToBackend的函数，它将内容存储在数据库中。你可以从onChange调用这个方法:

ReactDOM.render((
  <Editable
    editor={editor}
    id="1"
    onChange={(editable) => {
      saveToBackend(editable)
    }}
  />
), document.getElementById('editable-1'))

要加载内容，只需将其传递给构造函数

const editable = loadFromBackend() // 只是一个例子

const editor = new Editor({
  plugins: {
    content: [image]
  },
  editables: [editable],
})

或者用 trigger API.

// const editor = new Editor( ...

const editable = loadFromBackend() // 只是一个例子

editor.editable.update(editable) // 如果还不存在，update将添加一个可编辑的，或者当它存在于存储中时更新它.