Question

我在CMS中使用多个CKEditor实例，并添加了拖放多个框以重新排序用户内容的功能，以便他们可以选择在前端显示的内容。

拖放工作并将内容正确放置在网站的前端，但内容从CKEditor中消失。

它没有删除它只是将其隐藏在视图中，并且在检查时看起来CKEditor的html，head和body标签正在被清空。

之前有人经历过这个或知道为什么吗？

由于

Answer 1

我遇到了同样的问题，并注意到ckeditor使用iframe来显示格式化文本。似乎iframe干扰了jquery拖放代码（它们也是拦截事件，是我的理解）。如果您使用的是jquery draggable（）（而不是sortable（）或resizable（）），那么您可以使用名为iframefix的内置配置变量，它看起来像：

$( ".selector" ).draggable({ iframeFix: true });

如果您使用的是可排序（如我）或可调整大小，则必须自行修复（或找到现有的非jui）。一旦我开始工作，我会在这里发布解决方案。我正在为初学者解决这个问题：Trouble Using JQuery UI.Resizable() and UI.Draggable() with an iFrame，

Answer 2

如果您使用的是draggable + sortable，也许您想要卸载编辑器并在以后重新加载它。这对我有用：

function unloadEditors() {
    $('textarea.editor:hidden').each(function(){
        var tagId = $(this).attr('id');
        CKEDITOR.instances[ tagId ].destroy();
    });
}

function loadEditors() {
    $('textarea.editor:visible').each(function(){
        var tagId = $(this).attr('id');
        CKEDITOR.replace( tagId );
    });
}

$(document).ready(function(){

$( "#blocks" ).sortable({
  revert: true,
  start: function(event,ui){
    unloadEditors();
  },
  stop: function(event,ui){
    loadEditors();
  }
});
});

Answer 3

正如已经提到的，事实是编辑器位于iframe中会导致问题。

一个与您使用的拖放库无关的独立修补程序是，将CKEditor加载到div而不是iframe中。您所需要做的就是加载此插件：

https://ckeditor.com/cke4/addon/divarea

然后只需将其添加到编辑器的插件配置中即可：

config.extraPlugins  = 'divarea';  // If it's the only plugin you're using
config.extraPlugins += ',divarea'; // To add it on to existing plugins

CKEDITOR和jquery拖放使内容消失

3 个答案: