CKEditor 5

Content Type: Widget
Categories: User Interface,Visualization,Communication

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

  1. Installation:

    • Import the widget into your Mendix project.

    • Place the widget on a page where rich text editing is required.

  2. 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).

      .

Releases

Version: 1.0.5
Framework Version: 9.0.5
Release Notes: XSS protection added
Version: 1.0.4
Framework Version: 9.0.5
Release Notes: bug fix - for optional attribute (initial value)
Version: 1.0.3
Framework Version: 9.0.5
Release Notes: compatible with mendix 10
Version: 1.0.2
Framework Version: 9.0.5
Release Notes: bug fix - initial value now is optional and if it's not filled , it will be the content value.
Version: 1.0.1
Framework Version: 9.0.5
Release Notes: • Viewer mode has been added to the widget, allowing developers to manage it directly from the widget's configuration. • Validation has been implemented, ensuring that validation messages are displayed when triggered by the microflow logic. • UI improvements have been made for an enhanced user experience.