What is @ckeditor/ckeditor5-ui?
@ckeditor/ckeditor5-ui is a package that provides a set of UI components and utilities for building rich text editors using CKEditor 5. It includes various UI elements like buttons, dropdowns, toolbars, and more, which can be customized and extended to create a tailored editing experience.
What are @ckeditor/ckeditor5-ui's main functionalities?
Button
This code demonstrates how to create a simple button using the ButtonView class from @ckeditor/ckeditor5-ui. The button is labeled 'Click me' and is appended to the document body.
const ButtonView = require('@ckeditor/ckeditor5-ui').ButtonView;
const button = new ButtonView();
button.set({
label: 'Click me',
withText: true
});
button.render();
document.body.appendChild(button.element);
Toolbar
This code shows how to create a toolbar and add a button to it using the ToolbarView class from @ckeditor/ckeditor5-ui. The toolbar is then rendered and appended to the document body.
const ToolbarView = require('@ckeditor/ckeditor5-ui').ToolbarView;
const toolbar = new ToolbarView();
toolbar.items.add(button); // Assuming 'button' is a ButtonView instance
toolbar.render();
document.body.appendChild(toolbar.element);
Dropdown
This code demonstrates how to create a dropdown menu using the DropdownView class from @ckeditor/ckeditor5-ui. The dropdown button is labeled 'Options' and is appended to the document body.
const DropdownView = require('@ckeditor/ckeditor5-ui').DropdownView;
const dropdown = new DropdownView();
dropdown.buttonView.set({
label: 'Options',
withText: true
});
dropdown.render();
document.body.appendChild(dropdown.element);
Other packages similar to @ckeditor/ckeditor5-ui
quill
Quill is a modern WYSIWYG editor built for compatibility and extensibility. It provides a rich API for creating and customizing the editor's UI components, similar to @ckeditor/ckeditor5-ui. However, Quill is a complete editor solution, whereas @ckeditor/ckeditor5-ui focuses on UI components for CKEditor 5.
slate
Slate is a completely customizable framework for building rich text editors. It offers a more flexible approach to creating and managing UI components compared to @ckeditor/ckeditor5-ui, allowing developers to build their own UI from scratch or use third-party components.
draft-js
Draft.js is a JavaScript rich text editor framework maintained by Facebook. It provides a set of React components and utilities for building rich text editors. While it offers similar functionalities to @ckeditor/ckeditor5-ui, it is more tightly integrated with React, making it a good choice for React-based projects.
43.1.1 (September 25, 2024)
We are happy to announce the release of CKEditor 5 v43.1.1.
During a recent internal audit, we identified a Cross-Site Scripting (XSS) vulnerability in the CKEditor 5 clipboard package (CVE-2024-45613
). This vulnerability could be triggered by a specific user action, leading to unauthorized JavaScript code execution, if the attacker managed to insert malicious content into the editor, which might happen with a very specific editor configuration.
This vulnerability affects only installations where the editor configuration meets the following criteria:
- The Block Toolbar plugin is enabled.
- One of the following plugins is also enabled:
You can read more details in the relevant security advisory and contact us if you have more questions.
Taking the occasion, we decided to introduce additional hardening to some parts of our codebase that introduce theoretical and unexploitable issues. Our security team confirmed that none of these issues were exploitable in a real scenario, however, we decided to fix them, in order to increase the overall security posture of our software.
Released packages
Check out the Versioning policy guide for more information.
<details>
<summary>Released packages (summary)</summary>
Other releases:
</details>