The situation:
I have a field collection field within a content type.
The field collection consists of the following fields:
-Select list "data type"
-Text area
-Image field
-file field
-youtube video field

Only one of the last 4 fields is shown (controlled by the value of the data type field via the States API). The data type field is never visible to the user (it is set by my custom module), but i don't think it matters.

The field collection can contain an unlimited amount of rows. But I had to disable the default "add more" button and instead there are now custom buttons which start a custom ajax request (to a path, not a callback) and then the new field collection item is returned to a custom javascript function (via ajax_command_invoke), which appends it to the field collection (it wasn't possible through one of the other ajax commands).

The problem:
It works fine, when using a plain textarea (without CKEditor), but when using the CKEditor, the following problems occure when a new field collection item is added via ajax:

  • the CKEditor doesn't appear and the states controlling the visibility of the new field collection item aren't applied.
  • Javascript errors: Uncaught TypeError: Cannot read property 'document' of null in ckeditor.js and Uncaught TypeError: Cannot read property 'frameElement' of undefined in plugin.js

When the page is completely reloaded (after making a preview of the node or similar) it looks fine. So, I guess, it's a problem with my ajax / javascript code, because the initial page load looks fine too.

So my question is: What is the correct way to apply the CKEditor to a textarea which was added via javascript or better: How do I resolve the problem I mentioned above? :D
Usually I would try to solve it by myself, but I don't know how to use an uncompressed version of the ckeditor and I really don't want to read compressed javascript code, so I'm not able to determine where the javascript errors come from.