Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ckeditor5

Package Overview
Dependencies
Maintainers
1
Versions
754
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ckeditor5

A set of ready-to-use rich text editors created with a powerful framework. Made with real-time collaborative editing in mind.

  • 44.0.0
  • latest
  • staging
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created

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

Keywords

FAQs

Package last updated on 02 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc