ckeditor-reactive
Reactive icon

CKEditor.Reactive

Stable version 1.1.2 (Compatible with OutSystems 11)
Uploaded
 on 11 Jul
 by 
4.2
 (14 ratings)
ckeditor-reactive

CKEditor.Reactive

Documentation
1.1.1

Site Properties:

OnlyAllowLoggedUsers: When is set to true, only authenticated users will be able to upload content, even if the page where component is deployed is anonymous.

VerifyAPIKeyOnUpload: When set to true, the upload requests will only be accepted if the header has the correct API Key

Both Site Properties have default to True, since they are related to security features. 

In case you need the component to act just like it was, change both Site Properties to False.


Timers:

ResetAPIKey:

Resets the APIKey, change the schedule to define what should be the interval to reset the API Key. Currently is defined to change once a day, at 00:00 UTC.


SECURITY WARNING

 

Set the authentication on methods Download and Upload of the REST API according to your user's management settings.

 

1. Core elements and structure

CKEditorReactive is the application that contains the core module that is basically composed of 2 blocks:

- CKEditor with toolbar;

- HTML Viewer of content without a toolbar.

Web blocks available on the component

 

2. How to use the component

Reference the CKEditor component according to the picture below:

Manage your dependencies to have access to the component

 

Add an input or text area widget, name the input and associate it with a variable, then add the web block CKEditor to the screen.

CKEditor web block

 

At the end, your screen should look similar to the picture below.

Input or text area widget + CKEEditor web block

 

Click on CKEditor web block, then in the properties panel, fill in the options according to your needs.

Configure your CKEditor web block

 

3. How to configure the editor toolbar

The toolbar is defined through a configuration structure. The default configuration is loaded on the OnInitialize client action (see picture below). It is possible to create a customized configuration using an automated tool that can be accessed using the button “Toolbar Configuration” in the Demo page.

Configure the toolbar localized on the OnInitialize client action

 

CKEditor adds HTML to manage the style of the text. To display all characters in a non formatted way, use the TransferDataFromEditorToContainer client action to transfer the content to the HTMLViewerContainer block.

TransferDataFromEditorToContainer client action


 


1.0.9

SECURITY WARNING

 

Set the authentication on methods Download and Upload of the REST API according to your user's management settings.

 

1. Core elements and structure

CKEditorReactive is the application that contains the core module that is basically composed of 2 blocks:

- CKEditor with toolbar;

- HTML Viewer of content without a toolbar.

Web blocks available on the component

 

2. How to use the component

Reference the CKEditor component according to the picture below:

Manage your dependencies to have access to the component

 

Add an input or text area widget, name the input and associate it with a variable, then add the web block CKEditor to the screen.

CKEditor web block

 

At the end, your screen should look similar to the picture below.

Input or text area widget + CKEEditor web block

 

Click on CKEditor web block, then in the properties panel, fill in the options according to your needs.

Configure your CKEditor web block

 

3. How to configure the editor toolbar

The toolbar is defined through a configuration structure. The default configuration is loaded on the OnInitialize client action (see picture below). It is possible to create a customized configuration using an automated tool that can be accessed using the button “Toolbar Configuration” in the Demo page.

Configure the toolbar localized on the OnInitialize client action

 

CKEditor adds HTML to manage the style of the text. To display all characters in a non formatted way, use the TransferDataFromEditorToContainer client action to transfer the content to the HTMLViewerContainer block.

TransferDataFromEditorToContainer client action