多功能
一个适应性强的生态系统，能够处理端到端的文档编辑、与第三方工具的互操作性、文档管理和协作。
简单设置
以下是如何使用 React 富文本编辑器的快速示例
CKEditor 5 的组件，使用 Vite！
1
创建项目
使用基本的 Vite 模板创建项目，并将工作目录更改为新创建的项目。
npm create vite@latest ckeditor5-react -- --template react && cd ckeditor5-react2
安装软件包
安装富文本编辑器 React 组件和所选编辑器类型的依赖项
根据您的首选编辑体验。在本例中，我们使用经典版本。
npm install ckeditor5 @ckeditor/ckeditor5-react3
添加组件
用负责导入和初始化编辑器的代码替换 src/App.jsx 的内容。
import { CKEditor } from '@ckeditor/ckeditor5-react';
import {
ClassicEditor,
Bold,
Essentials,
Heading,
Indent,
IndentBlock,
Italic,
Link,
List,
MediaEmbed,
Paragraph,
Table,
Undo
} from 'ckeditor5';
import 'ckeditor5/ckeditor5.css';
export default function App() {
return (
<CKEditor
editor={ ClassicEditor }
config={ {
toolbar: [
'undo', 'redo', '|',
'heading', '|', 'bold', 'italic', '|',
'link', 'insertTable', 'mediaEmbed', '|',
'bulletedList', 'numberedList', 'indent', 'outdent'
],
plugins: [
Bold,
Essentials,
Heading,
Indent,
IndentBlock,
Italic,
Link,
List,
MediaEmbed,
Paragraph,
Table,
Undo
],
initialData: '<h1>Hello from CKEditor 5!</h1>',
} }
/>
);
}
4
完成！
通过执行以下命令运行应用程序
在您项目的目录中。
npm run dev