The Rich Text widget enables rich inline and toolbar text editing.
- 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 Project
For a demo app project that has been deployed with this widget, see here.
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.
- For all tags:
- For all tags:
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 https://appstore.home.mendix.com/link/app/170/ When the option ‘Sanitize content’ is set to ‘false’ server side sanitating is required before showing any HTML content.
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 App Store Component
To contribute to the development of this widget, follow these steps:
- Install the following:
- Fork and clone the mendixlabs/rich-text repository. The code is in Typescript.
- Set up the development environment by running
- 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
- To run the project unit tests with code coverage (results can be found at
- Run the unit test continuously during development via
We are actively maintaining this widget. Please report any issues or suggestions for improvement at mendixlabs/rich-text.