Versatile
An adaptable ecosystem capable of handling end-to-end document editing, interoperability with third-party tools, document management, and collaboration.
Get insights on the trends and future of collaboration in RTEs Download now
An adaptable ecosystem capable of handling end-to-end document editing, interoperability with third-party tools, document management, and collaboration.
Modular architecture where everything is a plugin. You can tune up, add, or remove plugins as you wish. Use custom processors to handle HTML, Markdown, or JSON output.
Takes advantage of a superb team of 50+ industry experts and 20+ years of experience in WYSIWYG editing. We are releasing new features every month.
Here is a quick example of how to use the React Rich Text Editor
component for CKEditor 5 by using Vite!
Create a project using a basic Vite template and change the working directory to a newly created project.
npm create vite@latest ckeditor5-react -- --template react && cd ckeditor5-react
Install dependencies to Rich Text Editor React Component and a chosen Editor Type
according to the editing experience of your preference. In this case, we use the classic one.
npm install ckeditor5 @ckeditor/ckeditor5-react
Replace contents of src/App.jsx
with code responsible for importing and the initialization of the editor.
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>',
} }
/>
);
}
Run the app by executing the following command
in your project's directory.
npm run dev
Congratulations on setting up CKEditor! To make the most of it, visit the CKEditor documentation
for comprehensive guidance on how to fully customize and integrate the editor.
Hi there, any questions about products or pricing?
Contact our Sales Representatives.
Thank you for reaching out to the CKEditor Sales Team. We have received your message and we will contact you shortly.