[CKEditor] CKEditor in a Popup Editor

[CKEditor] CKEditor in a Popup Editor

Forge Component
Published on 2017-02-19 by Carlos Henriques
13 votes
Published on 2017-02-19 by Carlos Henriques
I'm having a problem that was mentioned in the "discussion" discussion long ago (5 years ago) and I'm not having great luck getting it to work.

I have the CKEditor being used in a popup editor that's bound to a local variable. If I pre-load the variable in preparation or add to the variable with an action, I can see in the debugger that the values are and tend to stick around in the local variable, but it never shows up on screen.

I downloaded the CKEditor sample, and the only thing I could see that was "different" was the following "onclick" property on the "Save" button of the form. I've tried adding similar to my page, but it doesn't seem to work.


Maybe I'm putting it in the wrong spot? How do I get, and REFRESH the CKEditor to show the contents of the variable that it's bound to?
You need that line to be able to save anything. Make sure that in the popup screen you Navigate to, the CKEditor web block is bound to the text box and that the text box is bound to the local variable containing the text.
It is, that's the normal way to build it. I've used the CKEditor webblock in other forms, but when I try to use it in the popup editor, it doesn't work.

I mean, the editor itself will show up, but the text area is blank. It doesn't get filled from the contents of the variable. And the bindings are correct. Web block to input field, input field to local variable used.
Put the text in a Session variable and use that to transfer the text back and forth. See attached example.
Okay, after a LOT of digging around, I found what actually worked (the Session variable idea would not work with our use case).

And it's the stupidest thing.

In order for the CKEditor to load content from a variable and all, you don't even need to use the Javascript (for submit either, actually. Works fine without).

You need to set the width and, more importantly, the LENGTH of your text field to have several lines of text. That's right... just make the text box bigger and multi-lined and it works fine.
What we did in Version 4.3.1 is add a new expression to the CKEditor webblock containing the text:
<script type='text/javascript'>for (var i in CKEDITOR.instances) { CKEDITOR.instances[i].on('change', function() { $('#'+InputId+"').val(this.getData()); }); }; </script>
and added the onchange plugin in CKEditor.
Now we are able to use the save with an ajax submit, since the hidden inputfield is continuously synchronized with the ckeditor and not depending on a form-submit.