CKEditor is an open source WYSIWYG rich text (HTML) editor that can be embedded in reactive web and mobile apps. It brings to the web common editing features found on desktop editing applications like Microsoft Word and OpenOffice.

Main features

Paste from Word, Excel and Google Docs. Excellent tables support with columns resizing, selecting rows and columns. Toolbar customization using automated code created in the page available here.

Documentation

1. Core elements and structure

This documentation explains how to use the CKEditor and uses as reference the modules available in the demo application.

CKEditorReactiveDemo is the demo application and CKEditorReactive is the application that contains the core module that is basically composed of 02 web blocks:

CKEditor with toolbar and

HTML Viewer of content without toolbar

2.How to reuse the components

Create a new application and module and make reference to the CKEditor component according picture below

Add an input field, supply a name  for it and associate with a variable in your new web page. Add a new web block and a search window will appear. Search for CKEditor and click on OK button.

At the end your screen will be similar to the picture below. Click on CKEditor web block.

In the properties pane, fill in all options according description available in the tooltip for each field.

3.How to configure the editor toolbar

The appearance of the toolbar is defined through a configuration structure and the default configuration is loaded in the OnInitialize client action (see picture below). It is possible to create a customized configuration using an automated tool that can be accessed here.

CKEditor adds html to manage the appearance of the text. To display all characters in a not formatted way, use TransferDataFromEditorToContainer and transfer the content to HTMLViewerContainer web block.

This component is a reactive version of the web component https://www.outsystems.com/forge/component-overview/97/ckeditor