CKEditor. Reactive In OutSystems

Introduction

CKEditor. Reactive is a rich text editor which enables writing content directly inside the web pages or online applications. It 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 Open Office.

CKEditor offers a wide range of features, including text formatting options (such as bold, italic, and underline), paragraph styling, lists, tables, image insertion, hyperlink creation, and more. It supports various content types, including plain text, rich media, and code snippets. Users can easily switch between the editing mode and the source code view for advanced customization.

How to Install and Use It

Create an application in OutSystems with rich text editing (Ck Editor). We are going to use one of the text editors through forge. So, install the required editor through your environmental login. Now we are going to create a blank application just keep it simple. In this case we are going to create a web application and one module. Now going to create an entity called article. And this article will have a title with 150 characters and it will have an article description with 5000 characters, we have one table and now we are going to create screen, so now we don't have any text editing all we have is listing the articles information in the first page and we also create a  article title page so if we navigate you will see that we have a  listing of articles and off course we have the detail of our articles Open the application in the browser and here we can see that we have the article listing page with article. We don't have any rich text editing capabilities let’s go back to our application and now let's improve it adding the rich text editing capability.

For this click manage dependencies to add Ck editor components. We want to use a visual widget that is provided by the Ckedtior component and now we will see how easy it is to make this a rich text editor.

All we need to drag this new CkEditor widget that is available in our application and we want to apply rich text editing to the article text component and we use this article text ID that gives us the runtime ID of this object in the page and now we made that into a rich text editor.

Drag and drop HTML Viewer in Description area and give the required information in that HTML field. After that need to implement some logics for rich text editor. In save action need to implement the client action called (GetDataFromEditor) that we have already took dependency for CKEditor, in that client action pass the InputId.

After that Assign the required variable and required value.

By clicking one click publish we will be able to see the updated version of the application now with the rich text editing capabilities. So, now create a new article to see the rich text editor features.

For Example: In article you see we can give bold, you have different fonts and font size, you could change the Colour you can just use Italic, check box, tables, Bullet points and you can also upload images.

Click image and you have multiple ways of uploading your image one of them of course the simplest form is simply select one image from your hard drive send it to the server it will be automatically stored in the server and here you can actually format your image.

For Example: Give the image link in that URL field .Suppose we don't want it as big we can just change width and height of the image.

Conclusion:

It is User-Friendly Interface, CKEditor offers a true editing experience Extensive Formatting Options and Cross-Browser Compatibility.

By leveraging these benefits, CKEditor simplifies the process of content creation, enhances the editing experience, and empowers users to create visually appealing and well-formatted content for the web.