Slate-Editor 技术文档

Slate-Editor 技术文档

slate-editor A complete rich text editor based on SlateJS framework 项目地址: https://gitcode.com/gh_mirrors/sl/slate-editor

安装指南

安装方式

slate-editor 是一个基于 SlateJS 框架的富文本编辑器，可以通过 npm 包管理器进行安装。

yarn add slate-editor

项目使用说明

基本使用

slate-editor 提供了丰富的插件系统，用户可以根据需要选择使用不同的插件。以下是一个基本的使用示例，仅添加了 bold 插件及其按钮到工具栏中。

import React from 'react'
import { SlateEditor, SlateToolbar, SlateContent } from 'slate-editor'
import { BoldPlugin, BoldButton } from '@slate-editor/bold-plugin'

const plugins = [BoldPlugin()]

const SlateRichTextEditor = () => (
  <SlateEditor plugins={plugins}>
    <SlateToolbar>
      <BoldButton />
    </SlateToolbar>

    <SlateContent />
  </SlateEditor>
)

export default SlateRichTextEditor

高级使用

对于更复杂的使用场景，可以参考项目中的 完整工作示例。

项目API使用文档

插件列表

slate-editor 提供了多种插件，用户可以根据需要选择安装和使用。以下是插件列表及其对应的 npm 包名：

| 插件名称 | npm 包名 | |:------------|:-------------| | Alignment | @slate-editor/alignment-plugin | | Bold | @slate-editor/bold-plugin | | Color | @slate-editor/color-plugin | | Embed | @slate-editor/embed-plugin | | FontFamily | @slate-editor/font-family-plugin | | FontSize | @slate-editor/font-size-plugin | | Grid | @slate-editor/grid-plugin | | Image | @slate-editor/image-plugin | | Italic | @slate-editor/italic-plugin | | Link | @slate-editor/link-plugin | | List | @slate-editor/list-plugin | | StateLogger | @slate-editor/state-logger | | Strikethrough | @slate-editor/strikethrough-plugin | | ToggleReadonly | @slate-editor/toggle-readonly | | Underline | @slate-editor/underline-plugin |

贡献指南

开发环境设置

如果你想为 slate-editor 贡献代码，设置开发环境非常简单。只需按照以下步骤操作：

1. 克隆项目

git clone git@github.com:nossas/slate-editor.git

2. 启动示例

yarn dev

环境变量设置

为了使 ImagePlugin 完全正常工作，你需要在 .env 文件中定义以下环境变量：

• REACT_APP_API_URL: 例如 https://api.bonde.org
  • API 的 URL
• REACT_APP_SIGNING_URL_ENDPOINT: 例如 /uploads
  • 用于签署 URL 以将图像上传到 AWS S3 的端点。
  • 你可以在 API 中签署 URL，例如使用 RoR 的示例 在此。

slate-editor A complete rich text editor based on SlateJS framework 项目地址: https://gitcode.com/gh_mirrors/sl/slate-editor