jquery可排序div拖放文本不可由ckeditor编辑

我有以下的源代码

$（函数（）{
$（“#可排序1，#可排序2”）。可排序({
connectWith:“.connectedSortable”
}).disableSelection（）；
} );
内联编辑
.create（document.querySelector（'.editor'））
.catch（错误=>{
控制台错误（error）；
});
#可排序1，#可排序2{
边框：1px实心#eee；
宽度：142px；
最小高度：20px；
列表样式类型：无；
保证金：0；
填充：5px0；
浮动：左；
右边距：10px；
}
#可排序1 li，#可排序2 li{
保证金：0 5px 5px 5px；
填充物：5px；
字体大小：1.2米；
宽度：120px；
}

jQuery UI可排序-连接列表
由ckeditor编辑的文本外部排序表可由ckeditor编辑


第1项
第2项
第3项
第4项
第5项


排序表内由ckeditor编辑的文本不能由ckeditor编辑
第2项
第3项
第4项
第5项

您必须为HTML标记提供一个
id
属性，这可能是为了确保库不会错误地将您的标记与其他标记混淆

更新：实现此情况的最佳方法是将
sortable（）
配置为禁用选项，并在
dbclick（）
时启用内联编辑器并禁用可排序选项，然后在
blur（）上
我们销毁内联编辑器并重新启用元素的排序功能

我没有进行足够多的测试，因此，您可能会遇到一些与CKeditor上未正确触发的
blur（）
相关的错误，我将把这些留给您。只需双击编辑器
元素，这将启用CKeditor，然后再次在其中单击以显示编辑器，然后您可以单击页面中的任意位置以禁用编辑器并重新存储可排序（）功能

下面是一个工作片段



jQuery UI可排序-连接列表
#排序1，#排序2{
边框：1px实心#eee；
宽度：142px；
最小高度：20px；
列表样式类型：无；
保证金：0；
填充：5px0；
浮动：左；
右边距：10px；
}
#可排序1 li，#可排序2 li{
保证金：0 5px 5px 5px；
填充物：5px；
字体大小：1.2米；
宽度：120px；
}
由ckeditor编辑的文本外部排序表可由ckeditor编辑


第1项
第2项
第3项
第4项
第5项


由ckeditor编辑的文本在可排序表中不能由ckeditor编辑
第2项
第3项
第4项
第5项

$（函数（）{
var髓鞘器；
$（“#可排序1，#可排序2”）。可排序({
connectWith:“.connectedSortable”，
取消：“.unsortable”
});
document.querySelector（“#editor”）.addEventListener（'dblclick'，function（）{
$（this.addClass（'unsortable'）；
myEditor=InlineEditor
.create（document.querySelector（'#editor'））
.catch（错误=>{
控制台错误（error）；
}).然后（编辑器=>myEditor=editor）
});
document.querySelector（“#editor”）.addEventListener（'blur'，function（）{
myEditor.destroy（）.then（编辑器=>$（this.removeClass（'unsortable'））
});
} );
使用代码段，项目不能通过拖放进行排序，只有内联文本编辑器处于活动状态。我希望这两个活动都是项目应该可以拖放和内联文本编辑。我更新了我的代码段，但似乎事件相互覆盖，现在将检查它，但如果有一个按钮在排序拖动和编辑之间切换，这将是一个解决方案？抱歉，我需要这两个活动，项目应该是可排序的，并且项目文本将由ckeditor编辑。@OptimuPrime，我更新了我的答案，请检查它。很高兴提供帮助：）