Plate 富文本编辑器手动安装与配置指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00474/article/details/148391650

Plate 富文本编辑器手动安装与配置指南

plate The rich-text editor for React. 项目地址: https://gitcode.com/gh_mirrors/pl/plate

前言

Plate 是一款基于 Slate 框架构建的现代化富文本编辑器，专为 React 应用设计。它提供了模块化的插件系统，让开发者能够灵活地构建符合项目需求的编辑器体验。本文将详细介绍如何在不依赖任何 UI 组件库的情况下，手动安装和配置 Plate 编辑器。

环境准备

创建 React 项目

首先，我们需要一个基础的 React 项目作为起点。推荐使用 Vite 创建项目，因为它提供了快速的开发体验和现代化的构建流程：

npm create vite@latest my-plate-editor -- --template react-ts

这条命令会创建一个使用 TypeScript 的 React 项目。Plate 完全支持 TypeScript，并且推荐使用它来获得更好的类型安全和开发体验。

核心依赖安装

Plate 采用模块化设计，我们可以按需安装所需的包：

npm add @udecode/plate @udecode/plate-basic-elements @udecode/plate-basic-marks

这三个包构成了 Plate 的基础功能：

@udecode/plate：包含核心编辑器和 React 组件
@udecode/plate-basic-elements：提供段落、标题等块级元素支持
@udecode/plate-basic-marks：提供加粗、斜体等文本格式支持

TypeScript 配置

Plate 使用现代 JavaScript 模块系统（ESM），因此需要确保 TypeScript 配置正确：

{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "bundler",
    "target": "esnext",
    "jsx": "react-jsx"
  }
}

如果你的项目需要使用 CommonJS 模块系统，可以将 module 设置为 "commonjs"，但需要注意 ESM 和 CJS 之间的互操作性问题。

创建基础编辑器

让我们创建一个最简单的编辑器组件：

import React from 'react';
import { Plate, PlateContent, usePlateEditor } from '@udecode/plate/react';

export function BasicEditor() {
  const editor = usePlateEditor();

  return (
    <Plate editor={editor}>
      <PlateContent 
        style={{ padding: '16px', minHeight: '200px', border: '1px solid #ddd' }}
        placeholder="开始输入内容..."
      />
    </Plate>
  );
}

这个基础编辑器已经可以接收用户输入，但还没有任何格式化功能。

添加文本格式支持

基础文本样式

让我们为编辑器添加加粗、斜体和下划线支持：

import { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';

const editor = usePlateEditor({
  plugins: [BasicMarksPlugin],
  components: {
    bold: (props) => <strong {...props.attributes}>{props.children}</strong>,
    italic: (props) => <em {...props.attributes}>{props.children}</em>,
    underline: (props) => <u {...props.attributes}>{props.children}</u>
  }
});

自定义样式组件

Plate 提供了 PlateLeaf 组件来简化叶子节点的渲染：

import { PlateLeaf } from '@udecode/plate/react';

const components = {
  bold: (props) => <PlateLeaf {...props} as="strong" />,
  italic: (props) => <PlateLeaf {...props} as="em" />,
  underline: (props) => <PlateLeaf {...props} as="u" />
};

添加块级元素支持

基础块级元素

让我们添加标题、段落和引用等块级元素：

import { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';

const editor = usePlateEditor({
  plugins: [BasicElementsPlugin, BasicMarksPlugin],
  components: {
    h1: (props) => <PlateElement {...props} as="h1" style={{ fontSize: '2em' }} />,
    h2: (props) => <PlateElement {...props} as="h2" style={{ fontSize: '1.5em' }} />,
    p: (props) => <PlateElement {...props} as="p" />,
    blockquote: (props) => (
      <PlateElement 
        {...props} 
        as="blockquote" 
        style={{ 
          borderLeft: '3px solid #eee',
          paddingLeft: '1em',
          color: '#666'
        }} 
      />
    ),
    // ...之前的文本样式组件
  }
});

初始内容设置

我们可以为编辑器设置初始内容：

const initialValue = [
  {
    type: 'h1',
    children: [{ text: '欢迎使用 Plate 编辑器' }]
  },
  {
    type: 'p',
    children: [
      { text: '这是一个 ' },
      { text: '功能丰富', bold: true },
      { text: ' 的 ' },
      { text: '现代化', italic: true },
      { text: ' 编辑器。' }
    ]
  }
];

const editor = usePlateEditor({
  value: initialValue,
  // ...其他配置
});

内容持久化

在实际应用中，我们通常需要保存和加载编辑器内容：

function EditorWithPersistence() {
  const [content, setContent] = React.useState(initialValue);
  
  const editor = usePlateEditor({
    value: content,
    // ...其他配置
  });

  return (
    <Plate 
      editor={editor}
      onChange={(newValue) => {
        setContent(newValue);
        localStorage.setItem('editor-content', JSON.stringify(newValue));
      }}
    >
      <PlateContent /* ... */ />
    </Plate>
  );
}

进阶配置

自定义插件

Plate 的强大之处在于它的插件系统。我们可以轻松添加自定义行为：

const myCustomPlugin = {
  key: 'myPlugin',
  withOverrides: (editor) => {
    // 在这里可以扩展编辑器行为
    return editor;
  }
};

const editor = usePlateEditor({
  plugins: [BasicElementsPlugin, BasicMarksPlugin, myCustomPlugin],
  // ...其他配置
});

响应式设计

为了让编辑器在不同设备上都有良好的体验，可以添加响应式样式：

<PlateContent
  style={{
    padding: '16px',
    minHeight: '300px',
    maxWidth: '800px',
    margin: '0 auto',
    '@media (max-width: 768px)': {
      padding: '8px',
      minHeight: '200px'
    }
  }}
/>