use-prosemirror 项目教程

use-prosemirror 项目教程

use-prosemirror ProseMirror + React made easy 项目地址: https://gitcode.com/gh_mirrors/us/use-prosemirror

1. 项目介绍

use-prosemirror 是一个用于快速集成 ProseMirror 和 React 的开源项目。ProseMirror 是一个强大的富文本编辑器库，而 use-prosemirror 则通过现代 React 的最佳实践，提供了一个最小化且无偏见的 React 集成方案。该项目的主要特点包括：

• 状态与展示分离：允许将状态保持在 React 组件树的尽可能高的位置。
• 使用 EditorView 属性作为 React 属性：提供了更灵活的属性传递方式。
• TypeScript 支持：项目本身是用 TypeScript 编写的，提供了类型安全的开发体验。

2. 项目快速启动

安装

首先，确保你已经安装了 React 和 ProseMirror。然后，使用以下命令安装 use-prosemirror：

npm install --save use-prosemirror
# 或者
yarn add use-prosemirror

基本使用

以下是一个简单的示例，展示了如何使用 use-prosemirror 创建一个基本的富文本编辑器：

import 'prosemirror-view/style/prosemirror.css';
import React from 'react';
import { schema } from 'prosemirror-schema-basic';
import { useProseMirror, ProseMirror } from 'use-prosemirror';

export function MyEditor() {
  const [state, setState] = useProseMirror({ schema });

  return <ProseMirror state={state} onChange={setState} />;
}

高级配置

useProseMirror 钩子维护编辑器的状态，并接受一个与 EditorState.create 相同的对象作为参数。<ProseMirror /> 组件则包装了 ProseMirror 的 EditorView，显示由 useProseMirror() 提供的状态，并使用更新函数分派状态更新。

const [state, setState] = useProseMirror({ schema });
const viewRef = React.useRef();

return (
  <ProseMirror
    ref={viewRef}
    state={state}
    onChange={(state) => {
      setState(state);
      console.log(viewRef.current.view.hasFocus());
    }}
  />
);

3. 应用案例和最佳实践

应用案例

use-prosemirror 已经在 Pony Messenger 中投入生产使用，并被开源以贡献给 ProseMirror 生态系统，确保 Pony 用户获得最佳体验。

最佳实践

• 状态管理：尽量将编辑器的状态保持在组件树的较高位置，以便更好地管理全局状态。
• 自定义视图：通过 editorViewFactory 属性，可以自定义 EditorView 的实例化方式，适用于需要扩展 EditorView 或以特殊方式实例化 EditorView 的场景。

4. 典型生态项目

• ProseMirror：use-prosemirror 的核心依赖，提供了强大的富文本编辑器功能。
• React：use-prosemirror 的另一个核心依赖，用于构建用户界面。
• TypeScript：项目本身是用 TypeScript 编写的，提供了类型安全的开发体验。

通过这些模块的结合，use-prosemirror 提供了一个高效且灵活的富文本编辑器解决方案，适用于各种 React 项目。

use-prosemirror ProseMirror + React made easy 项目地址: https://gitcode.com/gh_mirrors/us/use-prosemirror