Rich Text - Marketplace Guide | Mendix Documentation

1 Introduction

The Rich Text widget enables rich inline and toolbar text editing.

1.1 Features

Format selected text
HTML output of formatted text
Show editor options either on a toolbar or as a bubble
Use the custom option to select which editing options you want to show
Input and display text is sanitized

1.2 Demo App

For a demo app that has been deployed with this widget, see here.

2 Configuration

Place the widget in a data view, list view, or template grid with a data source that has a string attribute. Then, select the Value attribute that contains the editable text.

The input and output is sanitized. All unsupported HTML tags and JavaScript is removed for security reasons. The following are supported:

Tags: h1, h2, h3, h4, h5, h6, p, br, a, ul, li, ol, s, u, em, pre, strong, blockquote, span
Attributes:
- For all tags: class, style
- a tag: href, name, target
Schemes: http, https, ftp, mailto

To be fully secure, all user HTML input should be sanitized on the server side too. This could be done with the XSSSanitize action found in the Community Commons. When the option ‘Sanitize content’ is set to ‘false’ server side sanitating is required before showing any HTML content.

3 Usage

The following keyboard shortcuts can be used when editing:

Ctrl + B – bold
Ctrl + I– italicize
Ctrl + U – underline
Ctrl + Z – undo
Ctrl + Y – redo
Ctrl + C – copy
Ctrl + V – paste
- + space – start list
tab – indent the content when tab is configured to indent from the widget XML; otherwise, move the focus to the next element

4 Developing This Marketplace Component

To contribute to the development of this widget, follow these steps:

Install the following:
- Git
- npm
- webpack-cli
- grunt-cli
- karma-cli
Fork and clone the mendixlabs/rich-text repository. The code is in Typescript.
Set up the development environment by running npm install.
Create a folder named dist in the project root.
Create a Mendix test project in the dist folder and rename its root folder to dist/MxTestProject, or get the test project from mendixlabs/rich-text. Changes to the widget code will be automatically pushed to this test project.
To automatically compile, bundle, and push code changes to the running test project, run grunt.
To run the project unit tests with code coverage (results can be found at dist/testresults/coverage/index.html), run: npm test.
Run the unit test continuously during development via karma start.

We are actively maintaining this widget. Please report any issues or suggestions for improvement at mendixlabs/rich-text.