CKEDITOR и jquery drag and drop заставляют контент исчезать - PullRequest
Новая
       10

CKEDITOR и jquery drag and drop заставляют контент исчезать

3 голосов
/ 16 ноября 2011

Я использую несколько экземпляров CKEditor без CMS и добавил возможность перетаскивать несколько полей, чтобы изменить порядок содержимого для пользователя, чтобы они могли выбирать, как он будет отображаться на внешнем интерфейсе.

Функция перетаскивания работает и правильно размещает контент в интерфейсе сайта, однако контент исчезает из CKEditor.

Он не удаляется, а просто скрывается от просмотра, и при проверке выясняется, что теги html, head и body из CKEditor очищаются.

Кто-нибудь испытывал это раньше или знает почему?

Спасибо

Ответы [ 3 ]

2 голосов
/ 17 апреля 2013

Если вы используете 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();
  }
});
});
2 голосов
/ 28 декабря 2011

У меня возникла такая же проблема, и я заметил, что ckeditor использует iframe для отображения отформатированного текста.Кажется, что Iframes вмешиваются в код перетаскивания jquery (они также перехватывают события, насколько я понимаю).Если вы используете jquery draggable () (а не sortable () или resizable ()), вы можете использовать встроенную конфигурационную переменную с именем iframefix , которая выглядит примерно так: 

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

Если вы используете сортируемую (например, я) или изменяемого размера, вам придется свернуть свое собственное исправление (или найти существующее, не относящееся к юи).Я опубликую решение здесь, как только оно заработает.Я работаю над этим SO вопрос для начинающих: Проблемы с использованием JQuery UI.Resizable () и UI.Draggable () с iFrame ,

0 голосов
/ 03 августа 2018

Как уже упоминалось, именно тот факт, что редактор находится в 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
...