CKEditor 5 React 组件使用教程

最新推荐文章于 2025-05-01 02:20:37 发布

葛微娥Ross

最新推荐文章于 2025-05-01 02:20:37 发布

阅读量773

点赞数 26

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_01043/article/details/142804534

CKEditor 5 React 组件使用教程

ckeditor5-react Official CKEditor 5 React component. 项目地址: https://gitcode.com/gh_mirrors/ck/ckeditor5-react

1. 项目介绍

CKEditor 5 是一个强大的富文本编辑器，提供了丰富的功能和灵活的定制选项。ckeditor5-react 是 CKEditor 5 官方提供的 React 组件，使得在 React 应用中集成 CKEditor 5 变得更加简单和高效。

该项目的主要特点包括：

官方支持：由 CKEditor 官方团队维护，确保与最新版本的 CKEditor 5 兼容。
易于集成：通过简单的 React 组件，可以快速将 CKEditor 5 集成到你的 React 应用中。
丰富的功能：支持多种编辑功能，如格式化文本、插入图片、表格等。

2. 项目快速启动

安装

首先，你需要在你的 React 项目中安装 ckeditor5-react 和 @ckeditor/ckeditor5-build-classic：

npm install @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

使用

在你的 React 组件中引入并使用 CKEditor 5：

import React, { Component } from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h2>使用 CKEditor 5 编辑器</h2>
        <CKEditor
          editor={ ClassicEditor }
          data="<p>Hello from CKEditor 5!</p>"
          onInit={ editor => {
            // 你可以在这里初始化编辑器
          }}
          onChange={ ( event, editor ) => {
            const data = editor.getData();
            console.log( { event, editor, data } );
          }}
        />
      </div>
    );
  }
}

export default App;