From fad13ab1971cedaac2b55b411e575865c23c0791 Mon Sep 17 00:00:00 2001 From: gjulivan Date: Thu, 13 Aug 2026 00:16:12 +0200 Subject: [PATCH 1/3] Update documentation for rich text version 5. --- .../widgets/richtext/_index.md | 58 ++++++++++++++++++- 1 file changed, 55 insertions(+), 3 deletions(-) diff --git a/content/en/docs/marketplace/platform-supported-content/widgets/richtext/_index.md b/content/en/docs/marketplace/platform-supported-content/widgets/richtext/_index.md index d42eed9b4a9..5fed0ca6d18 100644 --- a/content/en/docs/marketplace/platform-supported-content/widgets/richtext/_index.md +++ b/content/en/docs/marketplace/platform-supported-content/widgets/richtext/_index.md @@ -13,7 +13,6 @@ This documentation applies to Rich Text widget versions 4.0 and above. For documentation on Rich Text widget versions 3 with TinyMCE, see [Rich Text v3](/appstore/widgets/rich-text-v3/). For documentation on Rich Text widget versions 2 with CKEditor4, see [Rich Text v2](/appstore/widgets/rich-text-v2/). -Due to TinyMCE changing its public license, we transitioned to the Quill V2 library in Rich Text 4. {{% /alert %}} The [Rich Text](https://marketplace.mendix.com/link/component/74889/) widget provides the user with an WYSIWYG editor, where the user can enter and edit rich-text content. The widget automatically converts the rich-text content into a string in HTML format, which can be stored in an attribute of an entity. @@ -67,9 +66,12 @@ To configure this widget, follow these steps: * **Hide** – if selected, toolbar will be hidden or not shown. * **Editable** – determines when user can edit content in the editor and when it is read-only. - * **Read-only style** - determines the style of the rich text when set to read-only. + * **Read-only style** - determines the style of the rich text when set to read-only. + * **Rich Text** – shows disabled rich text with similar look and feel as being enable. + * **Bordered** – shows content only with surrounding border. + * **Read panel** – shows only html rendering of rich text content. + For more information, see the [Editability Section](/refguide/common-widget-properties/#editability) in *Properties Common in the Page Editor*. - * **Form orientation** - configures the form orientation used in the widget's modal dialog window, such as in **insert image**, **insert video**, **insert link**, and **view code modal**. * **Visible** – determines if the widget is visible on the page. For more information, see the [Visibility Section](/refguide/common-widget-properties/#visibility-properties) in *Properties Common in the Page Editor*. @@ -92,6 +94,7 @@ To configure this widget, follow these steps: * **View** - items: fullscreen. * **Removal** - items: clear. * **Table** - items: table. + * **Help** - items: help dialog contains keyboard shortcuts. (available in rich text version 5 and above) * **Advanced** – if selected, you can configure buttons for different toolbar groups: {{% alert color="info" %}}All the toolbar groups that you configure will be available in the toolbar. With vertical bars or separator options ("|"), you can separate different toolbar groups.{{% /alert %}} @@ -136,6 +139,10 @@ To configure this widget, follow these steps: * **Word count** – displays the number of words in the status bar. * **Character count (text only)** – displays the number of characters displayed in the editor. * **Character count (includeing HTML)** – displays the number of characters saved into the attribute value. This includes the HTML tag inserted for the formatting of rich text. +* **Style data format** - available on Rich text version 5 and above. This allows user to use classnames for the styling of rich text's content. + * **Inline** - use inline styles on styling the html content. This is the current and default options. Inline styling is more reliable in styling the content. But using inline styles meant that the data cannot be parsed in [strict-CSP environment](/howto/security/csp/). + * **Inline** - use class name to style the html content. Use this setting if rich text is deployed in strict CSP environment. + ### Common Tab @@ -285,6 +292,47 @@ export async function selectImage(fileGuid) { This code will trigger a new event called **imageSelected** and bubble up the event back to Rich Text widget to continue the flow. The user then can use the **image id** instead of **base64 string** as the image source. +## Keyboard shortcuts + + + + + + + + + + + + +
FormattingParagraphHistory
+ + + + + + + + + +
ActionShortcut
BoldCtrl+B
ItalicCtrl+I
UnderlineCtrl+U
StrikethroughCtrl+Shift+S
Inline codeCtrl+E
SuperscriptCtrl+.
SubscriptCtrl+,
+ 		+ + + + + + + +
ActionShortcut
BlockquoteCtrl+Shift+B
Bullet listCtrl+Shift+8
Ordered listCtrl+Shift+7
Increase indentCtrl+]
Decrease indentCtrl+[
+ 		+ + + + +
ActionShortcut
UndoCtrl+Z
RedoCtrl+Y
+
+ ## Limitations Rich Text version 4 still has limitations that we will continue improving in the future. Current notable limitations are as follows: @@ -293,3 +341,7 @@ Rich Text version 4 still has limitations that we will continue improving in the * Nested tables * Table header * Table caption + +Rich Text version 5 has offered "class" styling to allow Rich Text to works in strict CSP environment. This is currently has limitations that we will continue to improve in the future. Current notable limitations are as follows: +* Resizing image, video, and tables will not work properly +* Switching format from inline to class will cause partial data loss on styling. From c01c3fcf2f7b66c9053d1bcaf1a997afadbde5c0 Mon Sep 17 00:00:00 2001 From: ConnorLand <47385345+ConnorLand@users.noreply.github.com> Date: Fri, 21 Aug 2026 10:15:09 +0200 Subject: [PATCH 2/3] edit --- .../widgets/richtext/_index.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/en/docs/marketplace/platform-supported-content/widgets/richtext/_index.md b/content/en/docs/marketplace/platform-supported-content/widgets/richtext/_index.md index 5fed0ca6d18..f4a254d7509 100644 --- a/content/en/docs/marketplace/platform-supported-content/widgets/richtext/_index.md +++ b/content/en/docs/marketplace/platform-supported-content/widgets/richtext/_index.md @@ -139,9 +139,9 @@ To configure this widget, follow these steps: * **Word count** – displays the number of words in the status bar. * **Character count (text only)** – displays the number of characters displayed in the editor. * **Character count (includeing HTML)** – displays the number of characters saved into the attribute value. This includes the HTML tag inserted for the formatting of rich text. -* **Style data format** - available on Rich text version 5 and above. This allows user to use classnames for the styling of rich text's content. - * **Inline** - use inline styles on styling the html content. This is the current and default options. Inline styling is more reliable in styling the content. But using inline styles meant that the data cannot be parsed in [strict-CSP environment](/howto/security/csp/). - * **Inline** - use class name to style the html content. Use this setting if rich text is deployed in strict CSP environment. +* **Style data format** - available from Rich text version 5 and above. This allows user to use classnames for the styling of rich text's content. + * **Inline** - uses inline styles on styling the HTML content. This is the current and default option. Inline styling is more reliable in styling the content. But using inline styles meant that the data cannot be parsed in [strict-CSP environment](/howto/security/csp/). + * **Inline** - uses class name to style the HTML content. Use this setting if rich text is deployed in a strict CSP environment. ### Common Tab @@ -292,7 +292,7 @@ export async function selectImage(fileGuid) { This code will trigger a new event called **imageSelected** and bubble up the event back to Rich Text widget to continue the flow. The user then can use the **image id** instead of **base64 string** as the image source. -## Keyboard shortcuts +## Keyboard Shortcuts @@ -342,6 +342,6 @@ Rich Text version 4 still has limitations that we will continue improving in the * Table header * Table caption -Rich Text version 5 has offered "class" styling to allow Rich Text to works in strict CSP environment. This is currently has limitations that we will continue to improve in the future. Current notable limitations are as follows: -* Resizing image, video, and tables will not work properly -* Switching format from inline to class will cause partial data loss on styling. +Rich Text version 5 offers "class" styling to allow Rich Text to works in a strict CSP environment. This has limitations that we will continue to improve in the future. Current notable limitations are as follows: +* Resizing image, video, and tables does not work properly +* Switching format from inline to class causes partial data loss on styling From fcb9f166ce71db60aec3251871141dd7aac9c6d6 Mon Sep 17 00:00:00 2001 From: ConnorLand <47385345+ConnorLand@users.noreply.github.com> Date: Fri, 21 Aug 2026 10:21:47 +0200 Subject: [PATCH 3/3] edit --- .../widgets/richtext/_index.md | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/content/en/docs/marketplace/platform-supported-content/widgets/richtext/_index.md b/content/en/docs/marketplace/platform-supported-content/widgets/richtext/_index.md index f4a254d7509..5c3f68611ac 100644 --- a/content/en/docs/marketplace/platform-supported-content/widgets/richtext/_index.md +++ b/content/en/docs/marketplace/platform-supported-content/widgets/richtext/_index.md @@ -65,11 +65,11 @@ To configure this widget, follow these steps: * **Bottom** – if selected, toolbar will be placed on the bottom of the editor. * **Hide** – if selected, toolbar will be hidden or not shown. -* **Editable** – determines when user can edit content in the editor and when it is read-only. - * **Read-only style** - determines the style of the rich text when set to read-only. - * **Rich Text** – shows disabled rich text with similar look and feel as being enable. - * **Bordered** – shows content only with surrounding border. - * **Read panel** – shows only html rendering of rich text content. +* **Editable** – determines when the user can edit content in the editor and when it is read-only. + * **Read-only style** - determines the style of the rich text widget when set to read-only. + * **Rich Text** – shows disabled rich text with a similar look and feel as when it is enabled. + * **Bordered** – shows content only with a surrounding border. + * **Read panel** – shows only an HTML rendering of rich text content. For more information, see the [Editability Section](/refguide/common-widget-properties/#editability) in *Properties Common in the Page Editor*. @@ -94,7 +94,7 @@ To configure this widget, follow these steps: * **View** - items: fullscreen. * **Removal** - items: clear. * **Table** - items: table. - * **Help** - items: help dialog contains keyboard shortcuts. (available in rich text version 5 and above) + * **Help** - items: help dialog contains keyboard shortcuts (available in rich text version 5 and above). * **Advanced** – if selected, you can configure buttons for different toolbar groups: {{% alert color="info" %}}All the toolbar groups that you configure will be available in the toolbar. With vertical bars or separator options ("|"), you can separate different toolbar groups.{{% /alert %}} @@ -139,11 +139,10 @@ To configure this widget, follow these steps: * **Word count** – displays the number of words in the status bar. * **Character count (text only)** – displays the number of characters displayed in the editor. * **Character count (includeing HTML)** – displays the number of characters saved into the attribute value. This includes the HTML tag inserted for the formatting of rich text. -* **Style data format** - available from Rich text version 5 and above. This allows user to use classnames for the styling of rich text's content. +* **Style data format** - available from rich text version 5 and above. This allows user to use classnames for the styling of rich text's content. * **Inline** - uses inline styles on styling the HTML content. This is the current and default option. Inline styling is more reliable in styling the content. But using inline styles meant that the data cannot be parsed in [strict-CSP environment](/howto/security/csp/). * **Inline** - uses class name to style the HTML content. Use this setting if rich text is deployed in a strict CSP environment. - ### Common Tab For more information, see [Common Section](/refguide/common-widget-properties/#common-properties) in *Properties Common in the Page Editor*.