CODEWITHSUNDEEP
jqueryhtmldrupal-7ckeditor
Vitor Villar
Vitor Villar

Reputation: 1925

Issue when i move CKEditor form

I'm using CKEditor to create an WYSIWYG for some textarea i'm my site.

The thing is, in the comment section of the site, i move the DOM of the form where the CKEditor is loaded, to another <div> in my site to show below of the comments which will be edited by the user.

So, when the CKEditor appears in the other div, nothing works. I cannot edit the content and the buttons don't work too.

For contextualize, i do this:

<div class='ckeditor-hidden'>
    <form action="/" class="form-edit-content">
         <textarea id="someid"></textarea>
    </form>
</div>
<div class="div-where-ckeditor-will-be-placed">

</div>

In jQuery, i do this:

$(".form-edit-content").appendTo(".div-where-ckeditor-will-be-placed");

Now, why i'm doing this? Because i use the same form in different places on my site, so that's why i move them.

So, when i move, the CKEditor now work anymore.

Just to know, i'm using Drupal 7 on my site, and i install the Module CKEditor for Drupal (https://www.drupal.org/project/ckeditor).

Someone know why this happend?

Upvotes: 3

Views: 1354

Answers (1)

Reinmar
Reinmar

Reputation: 22013

This happens because by default CKEditor uses iframes and iframes are unloaded when you detached them from the DOM or move somewhere else. There are couple of ways handle that.

  1. Destroy the editor before it's detached from the DOM and initialise it again once the form is moved.
  2. Use the divarea plugin which makes CKEditor use a div instead of an iframe. You lose a useful features of the classic editor, but no more problems with iframes.
  3. Use an inline editor.

Upvotes: 5

Related Questions