Plate 如何手动安装无头包并搭建第一个编辑器【免费下载链接】plateRich-text editor with AI and shadcn/ui项目地址: https://gitcode.com/GitHub_Trending/pl/plate如果你不想依赖 shadcn/ui 这类 UI 组件库希望完全自己控制编辑器的样式和组件渲染Plate 提供了 Manual Installation手动安装路径只安装核心包platejs和基础节点包platejs/basic-nodes用 React 组件从零搭出编辑器。这篇文章按官方文档 Manual Installation 的完整流程从创建项目、安装无头包、配置 TypeScript到写出第一个可编辑、支持基础标记和块级元素、并能持久化内容的编辑器。什么时候选手动安装Plate 文档提供了多条安装路径基于 shadcn/ui 组件的 React 和 Plate UI 路径适合直接用预置组件手动安装路径则面向不使用 shadcn/ui 或 Tailwind CSS 的项目文档原话是 “ideal if youre not using a UI library like shadcn/ui or Tailwind CSS”。代价是要自己写工具栏、自己给元素注册渲染组件。准备条件一个 React 项目。文档用Vite演示初始搭建并说明 Plate 与框架无关同样的原则可以迁移到 Next.js、Remix 等其他 React 环境。React 版本platejs和platejs/basic-nodes的package.json中声明 peer dependency 为react 18.0.0、react-dom 18.0.0见 packages/plate/package.json。如果使用 TypeScript推荐 TypeScript 5.0并配置moduleResolution: bundler原因见下文。第一步创建 Vite 项目npm create vitelatest按提示选择React TypeScript模板。第二步安装核心无头包npm install platejs platejs/basic-nodes两个包的分工文档原文说明包职责platejsPlate 核心引擎和 React 组件platejs/basic-nodes基础节点插件标题、加粗、斜体、下划线等 marks 和 elements第三步配置 TypeScriptPlate 发布的是 ESM 包需要导入platejs/react这类子路径模块。文档推荐的最小配置是 TypeScript 5.0 加上moduleResolution: bundler// tsconfig.json { compilerOptions: { // ... other options module: esnext, // or commonjs if your setup requires it and handles ESM interop moduleResolution: bundler, // ... other options }, }如果你的 TypeScript 版本较旧、无法使用moduleResolution: bundler文档给出了基于 path aliases 的替代配置方案完整内容见 TypeScript 指南/typescript.mdx)。第四步写出第一个编辑器在src/App.tsx中创建一个最简编辑器import React from react; import type { Value } from platejs; import { Plate, PlateContent, usePlateEditor } from platejs/react; export default function App() { const editor usePlateEditor(); return ( Plate editor{editor} PlateContent style{{ padding: 16px 64px, minHeight: 100px }} placeholderType your amazing content here... / /Plate ); }这里的三个组件分工Plate提供编辑器上下文PlateContent是实际可编辑区域usePlateEditor创建编辑器实例。文档特别说明usePlateEditor返回的是 memoized 实例在组件重渲染时保持稳定如果你不需要 memoization用platejs/react导出的createPlateEditor。启动 Vite 模板自带的开发服务后打开页面文档描述此时的结果是一个“非常基础的编辑器能够显示和编辑纯文本”。这就是手动安装路径的第一步验证点。第五步添加基础标记加粗、斜体、下划线在src/App.tsx中追加的改动从platejs/basic-nodes/react导入 mark 插件并传入usePlateEditor的plugins数组。import { BoldPlugin, ItalicPlugin, UnderlinePlugin, } from platejs/basic-nodes/react; // ... const editor usePlateEditor({ plugins: [BoldPlugin, ItalicPlugin, UnderlinePlugin], value: initialValue, // 可带一个含 marks 的初始 Value });文档给出的示例初始内容initialValue类型标注为platejs的Valueconst initialValue: Value [ { type: p, children: [ { text: Hello! Try out the }, { text: bold, bold: true }, { text: , }, { text: italic, italic: true }, { text: , and }, { text: underline, underline: true }, { text: formatting. }, ], }, ];两个文档明确的边界BoldPlugin、ItalicPlugin、UnderlinePlugin自带默认组件分别渲染为strong、em、u不注册自定义组件也能正常显示。手动安装路径不提供现成工具栏应用 marks 需要自己实现。文档给出的示例调用是editor.tf.bold.toggle()。第六步添加块级元素标题、引用块级元素比 marks 多一步需要为插件注册 React 组件推荐写法是Plugin.withComponent(Component)。文档示例为 H1/H2/H3 和 blockquote 定义组件并注册import { BlockquotePlugin, H1Plugin, H2Plugin, H3Plugin, } from platejs/basic-nodes/react; import { Plate, PlateContent, PlateElement, usePlateEditor, type PlateElementProps, } from platejs/react; // Define element components function H1Element(props: PlateElementProps) { return PlateElement ash1 {...props} /; } function H2Element(props: PlateElementProps) { return PlateElement ash2 {...props} /; } function H3Element(props: PlateElementProps) { return PlateElement ash3 {...props} /; } function BlockquoteElement(props: PlateElementProps) { return ( PlateElement asblockquote style{{ borderLeft: 2px solid #eee, marginLeft: 0, marginRight: 0, paddingLeft: 24px, color: #666, fontStyle: italic, }} {...props} / ); } export default function App() { const editor usePlateEditor({ plugins: [ BoldPlugin, ItalicPlugin, UnderlinePlugin, H1Plugin.withComponent(H1Element), H2Plugin.withComponent(H2Element), H3Plugin.withComponent(H3Element), BlockquotePlugin.withComponent(BlockquoteElement), ], value: initialValue, }); return ( Plate editor{editor} PlateContent style{{ padding: 16px 64px, minHeight: 100px }} / /Plate ); }PlateElement的as属性指定渲染的 HTML 标签style是手动安装路径下你自己负责的部分。文档把withComponent称为“需要自定义样式或行为时把 React 组件与 Plate 插件关联的推荐方式”。第七步处理编辑器值与持久化让内容可保存、可恢复。文档示例用localStorage涉及三处改动usePlateEditor的value选项支持传函数用来读取初始值Plate的onChangeprop 拿到每次变化的valueeditor.tf.setValue(initialValue)恢复初始内容。const editor usePlateEditor({ plugins: [ BoldPlugin, ItalicPlugin, UnderlinePlugin, H1Plugin.withComponent(H1Element), H2Plugin.withComponent(H2Element), H3Plugin.withComponent(H3Element), BlockquotePlugin.withComponent(BlockquoteElement), ], value: () { const savedValue localStorage.getItem(plate-manual-demo); return savedValue ? JSON.parse(savedValue) : initialValue; }, }); return ( Plate editor{editor} onChange{({ value }) { localStorage.setItem(plate-manual-demo, JSON.stringify(value)); }} {/* Toolbar would go here */} button onClick{() editor.tf.setValue(initialValue)} style{{ padding: 4px 8px, margin: 0 4px, border: 1px solid #ccc, borderRadius: 4px, cursor: pointer, }} Reset /button PlateContent style{{ padding: 16px 64px, minHeight: 100px, border: 1px solid #eee, borderRadius: 4px, }} placeholderType your amazing content here... / /Plate );localStorage只是文档示例的存储位置换成自己的后端存储时保持value选项 onChange这个读写模式即可。若要深入受控值controlled value文档指向 Controlled Value/controlled.mdx)。结果验证文档没有给出统一的检查命令验证点按步骤对应第四步完成后页面出现可点击的编辑区可以显示和编辑纯文本文档描述为 “a very basic editor capable of displaying and editing plain text”。第五步完成后示例initialValue中的 bold/italic/underline 文本分别以strong、em、u渲染出来选中文字后调用editor.tf.bold.toggle()可以切换加粗。第六步完成后initialValue里的h3标题、blockquote 引用块按你注册的组件和样式渲染。第七步完成后刷新页面内容从localStorage恢复点击 Reset 按钮内容回到initialValue。限制与常见边界Node.js 环境不能用 React 导入。如果你的脚本是在服务端读取、转换或序列化编辑器内容迁移、校验、搜索索引不要从platejs/react或platejs/*/react导入而应从platejs导入createSlateEditor配合基础入口的插件。Node.js 安装指南 给出了BaseBasicBlocksPlugin、BaseBasicMarksPlugin等 base 插件的用法和运行时边界表。旧版 TypeScript无法使用moduleResolution: bundler时不要硬套上文配置参考 TypeScript 指南/typescript.mdx) 中 path aliases 的替代方案。没有预置工具栏这是手动安装与 shadcn/ui 路径的核心差异marks 和元素切换都要自己写按钮并调用editor.tf上的 transforms。文档示例中的组件预览ComponentPreview只用于展示效果本地效果以你的渲染结果为准。下一步文档在 Manual Installation 结尾给出的延伸方向继续用 CSS、CSS-in-JS 等方案手动加样式如果之后想改用预置组件可看 Plate UI安装更多插件包例如platejs/table并加入plugins数组构建自己的工具栏通过 Editor Transforms 应用格式如editor.tf.bold.toggle()、editor.tf.h1.toggle()详见 Toolbar 指南/(functionality)/toolbar.mdx)深入阅读 Editor 配置/editor.mdx)、Plugin 配置/plugin.mdx)、Plugin 组件/plugin-components.mdx)。按这条路径走完后你拥有一个不依赖任何 UI 库、样式与组件完全自己控制、内容可持久化的 Plate 编辑器可以作为后续加插件和自定义渲染的起点。【免费下载链接】plateRich-text editor with AI and shadcn/ui项目地址: https://gitcode.com/GitHub_Trending/pl/plate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Plate 如何手动安装无头包并搭建第一个编辑器？
Plate 如何手动安装无头包并搭建第一个编辑器【免费下载链接】plateRich-text editor with AI and shadcn/ui项目地址: https://gitcode.com/GitHub_Trending/pl/plate如果你不想依赖 shadcn/ui 这类 UI 组件库希望完全自己控制编辑器的样式和组件渲染Plate 提供了 Manual Installation手动安装路径只安装核心包platejs和基础节点包platejs/basic-nodes用 React 组件从零搭出编辑器。这篇文章按官方文档 Manual Installation 的完整流程从创建项目、安装无头包、配置 TypeScript到写出第一个可编辑、支持基础标记和块级元素、并能持久化内容的编辑器。什么时候选手动安装Plate 文档提供了多条安装路径基于 shadcn/ui 组件的 React 和 Plate UI 路径适合直接用预置组件手动安装路径则面向不使用 shadcn/ui 或 Tailwind CSS 的项目文档原话是 “ideal if youre not using a UI library like shadcn/ui or Tailwind CSS”。代价是要自己写工具栏、自己给元素注册渲染组件。准备条件一个 React 项目。文档用Vite演示初始搭建并说明 Plate 与框架无关同样的原则可以迁移到 Next.js、Remix 等其他 React 环境。React 版本platejs和platejs/basic-nodes的package.json中声明 peer dependency 为react 18.0.0、react-dom 18.0.0见 packages/plate/package.json。如果使用 TypeScript推荐 TypeScript 5.0并配置moduleResolution: bundler原因见下文。第一步创建 Vite 项目npm create vitelatest按提示选择React TypeScript模板。第二步安装核心无头包npm install platejs platejs/basic-nodes两个包的分工文档原文说明包职责platejsPlate 核心引擎和 React 组件platejs/basic-nodes基础节点插件标题、加粗、斜体、下划线等 marks 和 elements第三步配置 TypeScriptPlate 发布的是 ESM 包需要导入platejs/react这类子路径模块。文档推荐的最小配置是 TypeScript 5.0 加上moduleResolution: bundler// tsconfig.json { compilerOptions: { // ... other options module: esnext, // or commonjs if your setup requires it and handles ESM interop moduleResolution: bundler, // ... other options }, }如果你的 TypeScript 版本较旧、无法使用moduleResolution: bundler文档给出了基于 path aliases 的替代配置方案完整内容见 TypeScript 指南/typescript.mdx)。第四步写出第一个编辑器在src/App.tsx中创建一个最简编辑器import React from react; import type { Value } from platejs; import { Plate, PlateContent, usePlateEditor } from platejs/react; export default function App() { const editor usePlateEditor(); return ( Plate editor{editor} PlateContent style{{ padding: 16px 64px, minHeight: 100px }} placeholderType your amazing content here... / /Plate ); }这里的三个组件分工Plate提供编辑器上下文PlateContent是实际可编辑区域usePlateEditor创建编辑器实例。文档特别说明usePlateEditor返回的是 memoized 实例在组件重渲染时保持稳定如果你不需要 memoization用platejs/react导出的createPlateEditor。启动 Vite 模板自带的开发服务后打开页面文档描述此时的结果是一个“非常基础的编辑器能够显示和编辑纯文本”。这就是手动安装路径的第一步验证点。第五步添加基础标记加粗、斜体、下划线在src/App.tsx中追加的改动从platejs/basic-nodes/react导入 mark 插件并传入usePlateEditor的plugins数组。import { BoldPlugin, ItalicPlugin, UnderlinePlugin, } from platejs/basic-nodes/react; // ... const editor usePlateEditor({ plugins: [BoldPlugin, ItalicPlugin, UnderlinePlugin], value: initialValue, // 可带一个含 marks 的初始 Value });文档给出的示例初始内容initialValue类型标注为platejs的Valueconst initialValue: Value [ { type: p, children: [ { text: Hello! Try out the }, { text: bold, bold: true }, { text: , }, { text: italic, italic: true }, { text: , and }, { text: underline, underline: true }, { text: formatting. }, ], }, ];两个文档明确的边界BoldPlugin、ItalicPlugin、UnderlinePlugin自带默认组件分别渲染为strong、em、u不注册自定义组件也能正常显示。手动安装路径不提供现成工具栏应用 marks 需要自己实现。文档给出的示例调用是editor.tf.bold.toggle()。第六步添加块级元素标题、引用块级元素比 marks 多一步需要为插件注册 React 组件推荐写法是Plugin.withComponent(Component)。文档示例为 H1/H2/H3 和 blockquote 定义组件并注册import { BlockquotePlugin, H1Plugin, H2Plugin, H3Plugin, } from platejs/basic-nodes/react; import { Plate, PlateContent, PlateElement, usePlateEditor, type PlateElementProps, } from platejs/react; // Define element components function H1Element(props: PlateElementProps) { return PlateElement ash1 {...props} /; } function H2Element(props: PlateElementProps) { return PlateElement ash2 {...props} /; } function H3Element(props: PlateElementProps) { return PlateElement ash3 {...props} /; } function BlockquoteElement(props: PlateElementProps) { return ( PlateElement asblockquote style{{ borderLeft: 2px solid #eee, marginLeft: 0, marginRight: 0, paddingLeft: 24px, color: #666, fontStyle: italic, }} {...props} / ); } export default function App() { const editor usePlateEditor({ plugins: [ BoldPlugin, ItalicPlugin, UnderlinePlugin, H1Plugin.withComponent(H1Element), H2Plugin.withComponent(H2Element), H3Plugin.withComponent(H3Element), BlockquotePlugin.withComponent(BlockquoteElement), ], value: initialValue, }); return ( Plate editor{editor} PlateContent style{{ padding: 16px 64px, minHeight: 100px }} / /Plate ); }PlateElement的as属性指定渲染的 HTML 标签style是手动安装路径下你自己负责的部分。文档把withComponent称为“需要自定义样式或行为时把 React 组件与 Plate 插件关联的推荐方式”。第七步处理编辑器值与持久化让内容可保存、可恢复。文档示例用localStorage涉及三处改动usePlateEditor的value选项支持传函数用来读取初始值Plate的onChangeprop 拿到每次变化的valueeditor.tf.setValue(initialValue)恢复初始内容。const editor usePlateEditor({ plugins: [ BoldPlugin, ItalicPlugin, UnderlinePlugin, H1Plugin.withComponent(H1Element), H2Plugin.withComponent(H2Element), H3Plugin.withComponent(H3Element), BlockquotePlugin.withComponent(BlockquoteElement), ], value: () { const savedValue localStorage.getItem(plate-manual-demo); return savedValue ? JSON.parse(savedValue) : initialValue; }, }); return ( Plate editor{editor} onChange{({ value }) { localStorage.setItem(plate-manual-demo, JSON.stringify(value)); }} {/* Toolbar would go here */} button onClick{() editor.tf.setValue(initialValue)} style{{ padding: 4px 8px, margin: 0 4px, border: 1px solid #ccc, borderRadius: 4px, cursor: pointer, }} Reset /button PlateContent style{{ padding: 16px 64px, minHeight: 100px, border: 1px solid #eee, borderRadius: 4px, }} placeholderType your amazing content here... / /Plate );localStorage只是文档示例的存储位置换成自己的后端存储时保持value选项 onChange这个读写模式即可。若要深入受控值controlled value文档指向 Controlled Value/controlled.mdx)。结果验证文档没有给出统一的检查命令验证点按步骤对应第四步完成后页面出现可点击的编辑区可以显示和编辑纯文本文档描述为 “a very basic editor capable of displaying and editing plain text”。第五步完成后示例initialValue中的 bold/italic/underline 文本分别以strong、em、u渲染出来选中文字后调用editor.tf.bold.toggle()可以切换加粗。第六步完成后initialValue里的h3标题、blockquote 引用块按你注册的组件和样式渲染。第七步完成后刷新页面内容从localStorage恢复点击 Reset 按钮内容回到initialValue。限制与常见边界Node.js 环境不能用 React 导入。如果你的脚本是在服务端读取、转换或序列化编辑器内容迁移、校验、搜索索引不要从platejs/react或platejs/*/react导入而应从platejs导入createSlateEditor配合基础入口的插件。Node.js 安装指南 给出了BaseBasicBlocksPlugin、BaseBasicMarksPlugin等 base 插件的用法和运行时边界表。旧版 TypeScript无法使用moduleResolution: bundler时不要硬套上文配置参考 TypeScript 指南/typescript.mdx) 中 path aliases 的替代方案。没有预置工具栏这是手动安装与 shadcn/ui 路径的核心差异marks 和元素切换都要自己写按钮并调用editor.tf上的 transforms。文档示例中的组件预览ComponentPreview只用于展示效果本地效果以你的渲染结果为准。下一步文档在 Manual Installation 结尾给出的延伸方向继续用 CSS、CSS-in-JS 等方案手动加样式如果之后想改用预置组件可看 Plate UI安装更多插件包例如platejs/table并加入plugins数组构建自己的工具栏通过 Editor Transforms 应用格式如editor.tf.bold.toggle()、editor.tf.h1.toggle()详见 Toolbar 指南/(functionality)/toolbar.mdx)深入阅读 Editor 配置/editor.mdx)、Plugin 配置/plugin.mdx)、Plugin 组件/plugin-components.mdx)。按这条路径走完后你拥有一个不依赖任何 UI 库、样式与组件完全自己控制、内容可持久化的 Plate 编辑器可以作为后续加插件和自定义渲染的起点。【免费下载链接】plateRich-text editor with AI and shadcn/ui项目地址: https://gitcode.com/GitHub_Trending/pl/plate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考