[CKEditor.Reactive] ReferenceError: CKEditor.Reactive OR is not defined Outsystems11

Forge Component
(1)
Published on 7 May by João Rafael Capucha
1 vote
Published on 7 May by João Rafael Capucha

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)


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


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)

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.


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

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


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