Remirror 项目教程

Remirror 项目教程

remirror ProseMirror toolkit for React 🎉 项目地址: https://gitcode.com/gh_mirrors/re/remirror

1. 项目介绍

Remirror 是一个基于 ProseMirror 的 React 工具包，旨在帮助开发者构建跨平台的文本编辑器。ProseMirror 是一个强大的富文本编辑器框架，而 Remirror 在此基础上提供了更高级的抽象和工具，使得在 React 应用中集成和扩展富文本编辑器变得更加容易。

Remirror 提供了丰富的扩展功能，支持多种编辑器功能，如加粗、斜体、下划线等，并且可以通过组合这些扩展来创建自定义的编辑器。此外，Remirror 还支持国际化（i18n）、移动设备优化、协作编辑等功能。

2. 项目快速启动

安装依赖

首先，你需要安装 Remirror 及其相关依赖：

npm install remirror @remirror/react @remirror/pm

或者使用 Yarn：

yarn add remirror @remirror/react @remirror/pm

创建一个简单的编辑器

以下是一个简单的 Remirror 编辑器示例：

import React from 'react';
import { BoldExtension, ItalicExtension, UnderlineExtension } from 'remirror/extensions';
import { Remirror, useRemirror, OnChangeJSON } from '@remirror/react';

const extensions = () => [
  new BoldExtension(),
  new ItalicExtension(),
  new UnderlineExtension()
];

const Editor = ({ onChange }) => {
  const { manager, state } = useRemirror({
    extensions,
    content: '<p>Hi <strong>Friend</strong></p>',
    stringHandler: 'html',
    selection: 'end'
  });

  return (
    <Remirror manager={manager} initialContent={state}>
      <OnChangeJSON onChange={onChange} />
    </Remirror>
  );
};

export default Editor;

在这个示例中，我们创建了一个支持加粗、斜体和下划线功能的编辑器。useRemirror 钩子用于初始化编辑器的状态和扩展，而 Remirror 组件则用于渲染编辑器。

3. 应用案例和最佳实践

应用案例

Remirror 可以用于多种场景，例如：

• 博客平台：在博客平台中，Remirror 可以用于创建富文本编辑器，支持用户发布带有格式的文章。
• 协作工具：Remirror 支持协作编辑功能，可以用于构建实时协作的文档编辑工具。
• 内容管理系统（CMS）：在 CMS 中，Remirror 可以用于创建内容编辑器，支持用户编辑和发布内容。

最佳实践

• 扩展组合：通过组合不同的扩展，可以创建出功能丰富的编辑器。例如，可以添加表格、代码块、链接等功能。
• 国际化支持：Remirror 支持国际化，可以通过配置 lingui 来实现多语言支持。
• 性能优化：在移动设备上使用时，可以通过优化扩展和减少不必要的渲染来提高性能。

4. 典型生态项目

Remirror 作为一个强大的文本编辑器工具包，与以下生态项目紧密结合：

• ProseMirror：Remirror 基于 ProseMirror 构建，ProseMirror 提供了底层的编辑器框架。
• React：Remirror 是一个 React 组件库，与 React 生态系统无缝集成。
• Yjs：用于实现协作编辑功能，支持多人实时编辑。
• Lingui：用于实现国际化支持，支持多语言编辑器界面。

通过这些生态项目的结合，Remirror 可以构建出功能强大且灵活的文本编辑器应用。

remirror ProseMirror toolkit for React 🎉 项目地址: https://gitcode.com/gh_mirrors/re/remirror