CKEDITOR不显示内容,在使用Jquery UI Sortable进行排序后变得不可编辑
我正在尝试使用jquery UI sortable对列表项重新排序。我有一个Div(可容纳 几个div有类“section”)和右侧的列表(列表中的“li”与 我的容器分区内的部分) 容器可以有许多带有类节的Div 像CKEDITOR不显示内容,在使用Jquery UI Sortable进行排序后变得不可编辑,ckeditor,jquery-ui-sortable,Ckeditor,Jquery Ui Sortable,我正在尝试使用jquery UI sortable对列表项重新排序。我有一个Div(可容纳 几个div有类“section”)和右侧的列表(列表中的“li”与 我的容器分区内的部分) 容器可以有许多带有类节的Div 像 每个Div(section)可以有多个块 像 在每个块中,我都有一个文本区域,带有CKEDITOR(即:一个节DIV内可以有多个文本区域) 这些块是可排序的,我以前对CKEDITOR有一个问题,即:当我对块进行排序时,CKEDITOR变得不可编辑,并且丢失了其中的内容,我
每个Div(section)可以有多个块
像
在每个块中,我都有一个文本区域,带有CKEDITOR(即:一个节DIV内可以有多个文本区域)
这些块是可排序的,我以前对CKEDITOR有一个问题,即:当我对块进行排序时,CKEDITOR变得不可编辑,并且丢失了其中的内容,我如何修复它,现在它工作正常
但新问题是
在我右边的这个分区,我有一个UL和李的部分名称作为文本
因此,单击每个li时,我将一次显示每个部分(与tab类似)
这些li是可排序的,在对这些li进行排序时,我的容器中的部分也会相应地进行排序
ie:假设我有3个部分
<div class="container">
<div class="section" id="section1" />
<div class="section" id="section2" />
<div class="section" id="section3" />
</div>
我喜欢这样
<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>
<li class="sectionlist">My Section 3</li>
<li class="sectionlist">My Section 1</li>
<li class="sectionlist">My Section 2</li>
- 我的第1节
- 我的第二节
- 我的第三节
每个li表示区段
如果我对My Section 3进行排序并将其移到顶部,则会是这样
<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>
<li class="sectionlist">My Section 3</li>
<li class="sectionlist">My Section 1</li>
<li class="sectionlist">My Section 2</li>
我的第三节
我的第1节
我的第二节
因此,div也被重新排序为
<div class="container">
<div class="section" id="section3" />
<div class="section" id="section1" />
<div class="section" id="section2" />
</div>
div(section3)中带有ckeditor的文本区域变得不可编辑,并且没有显示任何内容,但其余部分中带有ckeditor的文本区域工作正常
简而言之,被拖动的Div内部的文本区域变得不可编辑,并且没有显示任何内容
不知道发生了什么 当它从DOM中移动或分离时,经典类型的编辑器(基于
iframe
)总是会丢失。您将在这里找到更多关于为什么会发生这种情况以及如何在一般情况下处理这种情况的详细信息
正如我在另一个答案中所解释的,您将有两个选项–要么在用户移动编辑器后需要重新初始化编辑器,要么可以使用插件。通过销毁编辑器实例并再次替换它来重新初始化?我在jquery sortable
var ckeditorId=$('.contentContainer>div:eq('+pos+)).find('.ckeditor').attr('id');var thisEditorInstance=CKEDITOR.instances[ckeditorId];if(thisEditorInstance){thisEditorInstance.destroy(true);CKEDITOR.remove(ckeditorId);CKEDITOR.replace(ckeditorId);}
pos是div的索引不幸的是,我不知道jQ sortable的详细工作原理,因此我无法进一步帮助您。不过还有一个提示——编辑器必须在从DOM分离之前销毁。否则,销毁它将变得更加困难,您将丢失数据。这是否回答了您的问题?