939
Views
13
Comments
Solved
[CKEditor.Reactive] ReferenceError: CKEditor.Reactive OR is not defined Outsystems11
Question
ckeditor-reactive
Reactive icon
Forge asset by Fábio Fantato

Hi All

 It would be greate if someone can help on the below issue.


 We are getting the below error while using the CKEditor.Reactive(4) component(OutSystems11).



ReferenceError: CKEDITOR is not defined

    at https://hostname/MyApp/scripts/CKEditorReactive.controller.js?Qk6NmZAi1zQA+_atGvFfnw:356:18

    at Controller.e.safeExecuteJSNode (https://hostname/MyApp/scripts/OutSystems.js?rtZ3zI4kwkj_X7T0xT9+gQ:11:1005)

    at Controller.CKEditorReactiveController.default.setEditorData$Action (https://hostname/MyApp/scripts/CKEditorReactive.controller.js?Qk6NmZAi1zQA+_atGvFfnw:313:12)


Detail scenario is below.


1. We have screen which display the List of Pages created. And PageName is the link which takes user to CKEDITOR content page.



2. Open application first time CKEditor loads the page content successfully.    


--------------------------------------------


Problem.  ---------------


 When user go back Page List screen and click on another link to edit the content

 CKEDITOR doest not show the data and Text Editor goes disabled/uneditable.


Java Script Error message is below 


ReferenceError: CKEDITOR is not defined

    at https://hostname/MyApp/scripts/CKEditorReactive.controller.js?Qk6NmZAi1zQA+_atGvFfnw:356:18

    at Controller.e.safeExecuteJSNode (https://hostname/MyApp/scripts/OutSystems.js?rtZ3zI4kwkj_X7T0xT9+gQ:11:1005)

    at Controller.CKEditorReactiveController.default.setEditorData$Action (https://hostname/MyApp/scripts/CKEditorReactive.controller.js?Qk6NmZAi1zQA+_atGvFfnw:313:12)


2020-01-07 03-17-38
ShiXuan Teng
Solution

Hi all,

I think the likelihood of the error is because CKEditor is not ready at the point in time.

I think a easier way to solve it will be using events under the component, there is 2 events that came with the component:

1. CKeditorReady

2. ContentChanged

We can make use of 1/ CKEditorReady, once it is ready you can call the setEditorData() method.

Hope this helps.

Regards,

ShiXuan

UserImage.jpg
ragu pathmanathan

Thanks, this really helped me!

UserImage.jpg
Priya Agrawal

Hi, can you please elaborate how and where can we use CKEditorReady event?

I am new to Outsystems and facing the same issue.


Thanks

UserImage.jpg
Priya Agrawal

Hi, can you help me how you did this?

Thanks

UserImage.jpg
ragu pathmanathan

Hope this is not too late for you but just saw your comment. I thought i resolved by following the steps mentioned by ShiXuan but it didn't then i did what Sylvain Billot mentioned in his solution and it worked. Let me know if you need any help with it!


UserImage.jpg
Alexandr Ribaruc

CKEditorReady event doesn't fire in version 4.14.0 

2019-11-04 15-29-58
Sylvain Billot

Hi All,

I had the same problem.

To solve it i tried that:

  1. Copy the Client Action SetEditorData from CKEditor.Reactive to your current module and rename it SetEditorDataCustom
  2. Modify the javascript in that Client Action by adding a try catch block like that
    try {
        var objEditor1 = CKEDITOR.instances[$parameters.EditorId];
        objEditor1.setData($parameters.HTML);
    } catch(error){
        //do nothing
    }
  3. Add an OnAfterFetch event to your Aggregate and use your SetEditorDataCustom to refresh CKEditor


I think it's not a perfect solution, but it seem it's worked


2021-07-21 12-04-07
George.Qiao

Any update on this? I am aslo getting the error. I tried to put the SetEditorData in the reactive page OnReady. Usually, the first time page load will hit this error. After that, the error seems not occurring.


Putting the SetEditorData in the post data aggregate does not work for me at all (blank content in editor)

2020-08-14 15-28-36
Paulo Bastos

I am having a similar behavior, If you navigate to and from the page with ckEditor on it, the second time around there are a lot of errors on the browser console and the Block does not load the configurations (for example height of the editor). The same happens on the demo App if you add a screen just no navigate to and from.


2026-02-26 14-24-43
Rui Coutinho

I had a similar behavior, and solve it by using the OnDestroy event to clean CK Editor

Then on the event, create JavaScript node, and add the following script:

 

It will delete the CKEditor instance, so that when you return a second time, it will be recreated.

Keep in mind reactive web is different from traditional web, so you need to clean your objects, or they will be available between screen. The same way as mobile, reactive web are single page applications and it has screen transitions, not navigation.

Cheers,

Rui Coutinho

UserImage.jpg
Christoph Newe
 
MVP

This works great when you navigate away from the screen and come back (in reactive).

However I found that when you navigate to the screen while you are already on it the CKEditor instance is not recreated (e.g. click on the menu link twice). Any idea to force recreation?


"CKEDITOR is not defined"

UserImage.jpg
Alexandr Ribaruc

It's not enough even for your first variant of befavior - "This works great when you navigate away from the screen and come back (in reactive). ". Doesn't work great. There is the same problem "CKEDITOR is not defined".

But what we need to do is to give little time for initiallizing CKEDITOR. 

Just create JS timer with 0.5 sec delay (enough in my case) in OnReady action of your block and, after the delay, call the action which fetches data and calls SetEditorData() function.


var delayInMilliseconds = 500;

setTimeout(function() {  $actions.NameOfYourAction();}, delayInMilliseconds);


2026-03-09 12-26-51
Fábio Fantato
 
MVP

Hi Rui,

Thanks for your help on this topic. I am working in a fully react version of this component, but for now, we can do some workaround about it. 


Regards

Fabio


2020-01-07 03-17-38
ShiXuan Teng
Solution

Hi all,

I think the likelihood of the error is because CKEditor is not ready at the point in time.

I think a easier way to solve it will be using events under the component, there is 2 events that came with the component:

1. CKeditorReady

2. ContentChanged

We can make use of 1/ CKEditorReady, once it is ready you can call the setEditorData() method.

Hope this helps.

Regards,

ShiXuan

UserImage.jpg
ragu pathmanathan

Thanks, this really helped me!

UserImage.jpg
Priya Agrawal

Hi, can you please elaborate how and where can we use CKEditorReady event?

I am new to Outsystems and facing the same issue.


Thanks

UserImage.jpg
Priya Agrawal

Hi, can you help me how you did this?

Thanks

UserImage.jpg
ragu pathmanathan

Hope this is not too late for you but just saw your comment. I thought i resolved by following the steps mentioned by ShiXuan but it didn't then i did what Sylvain Billot mentioned in his solution and it worked. Let me know if you need any help with it!


UserImage.jpg
Alexandr Ribaruc

CKEditorReady event doesn't fire in version 4.14.0 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.