CKEDITOR Not Displaying Content and becomes uneditable after Sorting using Jquery UI Sortable

Question

I am trying to reorder my list items using jquery UI sortable. i have a Div(a container div which holds

several div's having class "section") and a List on right( the "li" on the list has the same name of the

Section inside my container Div )

the Container Can have a number of Div with class Section like

<div class="container">
    <div class="section" id="section1" />
    <div class="section" id="section2" />
    <div class="section" id="section3" />
</div>

and each of these Div(section) can have a number of blocks like

<div class="section" id="section1">

    <div class="dynamic" id="block-1" />
    <div class="dynamic" id="block-2" />
    <div class="dynamic" id="block-3" />

</div>

inside each block i am having text area with CKEDITOR with it (ie : there can be multiple textarea's inside of a section DIV) and these blocks are Sortable, i had an issue with CKEDITOR before, ie : when i sort the Blocks the CKEDITOR went uneditable and lost the Contents in it ,some How i have fixed it and its working fine now.

But the New issue is on my right side of this div i have an UL with li having Section Names as Text So that on Clicking each li i will show each sections at a time (works like tab)

these li's are Sortable and on sorting these li's the section's inside my container also gets sorted accordingly.

ie: say i got 3 Sections

<div class="container">
    <div class="section" id="section1" />
    <div class="section" id="section2" />
    <div class="section" id="section3" />
</div>

and li like this

<ul class="sortableul">
    <li class="sectionlist">My Section 1</li>
    <li class="sectionlist">My Section 2</li>
    <li class="sectionlist">My Section 3</li>
</ul>

each li indicates sections if i sort the My Section 3 and move it to the top it will be like this

    <li class="sectionlist">My Section 3</li>
    <li class="sectionlist">My Section 1</li>
    <li class="sectionlist">My Section 2</li>

and as a result the div's also gets reordered like

<div class="container">
    <div class="section" id="section3" />
    <div class="section" id="section1" />
    <div class="section" id="section2" />

</div>

Text area's with ckeditor inside the div (section3) is getting uneditable and no content is displayed but text area's with ckeditor inside the rest of the sections are working fine

in short the text area's inside of the Div which get dragged is becoming uneditable and no content is Displayed.

Don't know what's happening ...

Does this answer your question? CKEditor 4 and jQuery UI sortable removes content after sorting — caramba

Reinmar Reinmar · Accepted Answer · 2015-06-02T12:39:17

The classic type of editor (one that's based on iframe) will be always lost when it's moved or detached from DOM. You will find more details about why it happens and how to deal with that in a general situation here – CKEditor loses content when removed from DOM and added again.

As I explained in the other answer, you will have two options – either you'll need to reinitialise editor after user moved it or you can use the divarea plugin.

CKEDITOR Not Displaying Content and becomes uneditable after Sorting using Jquery UI Sortable

1 Answers