CKEditor 5
Overview
This widget integrates CKEditor 5, a highly customizable, React-based, and modern WYSIWYG HTML editor, into your Mendix applications.
Built on React, CKEditor 5 delivers a robust and seamless rich text editing experience with a clean UI, outstanding performance, and an extensive feature set, catering to a wide range of use cases.
Documentation
Description
The CKEditor 5 Widget is a rich text editor designed to provide an enhanced text editing experience in Mendix applications. This widget is built using CKEditor 5, a modern JavaScript text editor framework. It offers a wide range of text formatting tools and features, making it suitable for various use cases such as content management, form input, and collaborative editing.
This widget supports embedding images, tables, code blocks, and media content, ensuring an interactive and user-friendly interface for developers and end-users.
Features
Text Formatting
-
Basic Formatting: Bold, italic, strikethrough, subscript, superscript, and code.
-
Font Options: Change font family, size, color, and background color.
-
Headings: Multiple heading styles for better content organization.
Alignment and Indentation
-
Align text (left, center, right, justify).
-
Indent and outdent content.
Lists and Quotes
-
Bulleted lists, numbered lists, and to-do lists.
-
Block quotes for highlighting key text.
Tables and Media
-
Create and customize tables.
-
Embed media content such as videos.
-
Upload and manage images with support for Base64 encoding.
Advanced Features
-
Code blocks for developers to display code snippets.
-
Undo and redo functionality.
-
Link insertion for interactive content.
-
General HTML support for additional customization.
Plugins Included
-
Essentials: Core editor functionalities like undo/redo.
-
StyleEditing: Advanced styling options.
-
Base64UploadAdapter: Upload images in Base64 format.
-
Font and Alignment Tools: Font color, font size, font background, and alignment settings.
-
Code Support: Code block plugin for technical content.
Usage Instructions
-
Installation:
-
Import the widget into your Mendix project.
-
Place the widget on a page where rich text editing is required.
-
-
Configuration:
-
Set the Initial data for Editor property to provide default content (Optional).
-
Use the Content Data 0f Editor Property that stores the editor's content data (Required).
.
-