ckeditor5

What is ckeditor5?

CKEditor 5 is a modern JavaScript rich text editor with a modular architecture. It offers a wide range of features and is highly customizable, making it suitable for various types of content editing needs.

What are ckeditor5's main functionalities?

Basic Text Editing

This code initializes a basic CKEditor 5 instance with classic build, allowing users to perform basic text editing tasks such as bold, italic, and underline.

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

ClassicEditor.create(document.querySelector('#editor'))
  .then(editor => {
    console.log('Editor was initialized', editor);
  })
  .catch(error => {
    console.error(error);
  });

Custom Plugins

This code demonstrates how to initialize CKEditor 5 with custom plugins. In this example, only the Bold and Italic plugins are included, and the toolbar is customized to show only these options.

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';

ClassicEditor.create(document.querySelector('#editor'), {
  plugins: [Essentials, Bold, Italic],
  toolbar: ['bold', 'italic']
})
  .then(editor => {
    console.log('Editor was initialized with custom plugins', editor);
  })
  .catch(error => {
    console.error(error);
  });

Real-time Collaboration

This code initializes CKEditor 5 with real-time collaboration features, allowing multiple users to edit the same document simultaneously and see each other's changes in real-time.

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import RealTimeCollaborativeEditing from '@ckeditor/ckeditor5-real-time-collaboration/src/realtimecollaborativeediting';
import RealTimeCollaborativeComments from '@ckeditor/ckeditor5-real-time-collaboration/src/realtimecollaborativecomments';

ClassicEditor.create(document.querySelector('#editor'), {
  plugins: [RealTimeCollaborativeEditing, RealTimeCollaborativeComments],
  toolbar: ['comment', 'trackChanges']
})
  .then(editor => {
    console.log('Editor was initialized with real-time collaboration', editor);
  })
  .catch(error => {
    console.error(error);
  });

Other packages similar to ckeditor5

tinymce

TinyMCE is another popular rich text editor that offers a wide range of features and customization options. It is known for its ease of integration and extensive plugin library. Compared to CKEditor 5, TinyMCE has a more traditional architecture but offers similar functionalities.

quill

Quill is a lightweight, open-source rich text editor with a focus on simplicity and extensibility. It provides a clean API and is highly customizable. While it may not have as many built-in features as CKEditor 5, it is a good choice for projects that require a simple and flexible editor.

draft-js

Draft.js is a rich text editor framework for React, developed by Facebook. It provides a lot of flexibility and control over the editor's behavior and appearance. Unlike CKEditor 5, which is a complete solution, Draft.js is more of a toolkit for building custom editors.

README

Security holding package

This package name is not currently in use, but was formerly occupied by another package. To avoid malicious use, npm is hanging on to the package name, but loosely, and we'll probably give it to you if you want it.

You may adopt this package by contacting [e-mail] and requesting the name.