React ProseMirror 使用教程

React ProseMirror 使用教程

react-prosemirrorAn unofficial React component for ProseMirror项目地址:https://gitcode.com/gh_mirrors/reac/react-prosemirror

项目介绍

React ProseMirror 是一个旨在安全地将 ProseMirror 与 React 集成的库。它提供了一组 React 上下文和钩子，确保从 React 组件安全访问 EditorView。这使得我们能够在 React 应用中包含 ProseMirror 视图，即使 EditorState 被提升到 React 状态或全局状态管理系统（如 Redux）中。

项目快速启动

安装

你可以通过 npm 或 yarn 安装 React ProseMirror：

npm install @nytimes/react-prosemirror
# 或者
yarn add @nytimes/react-prosemirror

基本使用

以下是一个简单的示例，展示如何在 React 中使用 React ProseMirror：

import React from 'react';
import { EditorState } from 'prosemirror-state';
import { schema } from 'prosemirror-schema-basic';
import { ProseMirror } from '@nytimes/react-prosemirror';

const defaultState = EditorState.create({ schema });

const App = () => {
  return (
    <ProseMirror
      defaultState={defaultState}
      mount={document.createElement('div')}
    />
  );
};

export default App;

应用案例和最佳实践

案例一：集成 Redux

在复杂的应用中，你可能希望将 ProseMirror 的状态管理集成到 Redux 中。以下是一个示例：

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { EditorState } from 'prosemirror-state';
import { schema } from 'prosemirror-schema-basic';
import { ProseMirror } from '@nytimes/react-prosemirror';

const Editor = () => {
  const editorState = useSelector(state => state.editor);
  const dispatch = useDispatch();

  const handleChange = (newState) => {
    dispatch({ type: 'UPDATE_EDITOR_STATE', payload: newState });
  };

  return (
    <ProseMirror
      state={editorState}
      onChange={handleChange}
      mount={document.createElement('div')}
    />
  );
};

export default Editor;

最佳实践

• 状态管理：尽量将 ProseMirror 的状态管理集成到你的应用状态管理系统中，如 Redux 或 Context API。
• 性能优化：避免在每次渲染时重新创建 EditorState，使用 useMemo 或 useRef 来缓存状态。

典型生态项目

ProseMirror

ProseMirror 是一个强大的富文本编辑器框架，React ProseMirror 是其与 React 的集成库。

Remirror

Remirror 是另一个基于 ProseMirror 的富文本编辑器框架，它提供了更多的功能和抽象层，适合需要更多内置功能的团队。

TipTap

TipTap 是一个“电池包含”的富文本编辑库，非常适合新项目和新手团队。

通过这些生态项目，你可以根据项目需求选择最适合的工具。

react-prosemirrorAn unofficial React component for ProseMirror项目地址:https://gitcode.com/gh_mirrors/reac/react-prosemirror