CKEditor凍結在jQuery UI重新排序

我正在嘗試重新排序使用jQuery UI框架動態創建的CKEditors列表，但我遇到了編輯釋放問題。它在我剛剛使用<textarea>時非常有效，但現在拖動動作完成後，它不會讓用戶編寫任何文本。CKEditor凍結在jQuery UI重新排序

這是Javascript代碼：

$(function() { 
    $("#list").sortable({ 
     placeholder: 'ui-state-highlight' 
    }); 
    $("#list").disableSelection(); 

    for (i=0;i<10;i++) 
    { 
     addEditor(); 
    } 
}); 

function addEditor() 
{ 
    alert("Hello"); 
    var editor_fields = document.editors.elements["editor[]"]; 

    var editorAmount = 0; 

    if (editor_fields.length) 
    { 
     editorAmount = editor_fields.length; 
    } 
    else 
    { 
     editorAmount = 1; 
    } 

    var newElem = $('#editor_container' + editorAmount).clone().attr('id', 'editor_container' + (editorAmount + 1)); 

    newElem.html("<textarea class='editor' name='editor[]' id='editor" + (editorAmount + 1) + "' rows='4' cols='30'></textarea>"); 

    $("#editor_container" + editorAmount).after(newElem); 

    $("#editor" + (editorAmount + 1)).ckeditor(); 
}

這是HTML代碼：

<form name="editors"> 
    <ul id="list"> 
     <li name="editor_container1" id="editor_container1"><textarea name='editor[]' id='editor1' rows='4' cols='30'></textarea></li> 
    </ul> 
</form>

來源

2010-07-31 PF1

雖然不是很理想，我發現了一個潛在的解決方案：

$(function() { 
     $("#list").sortable({ 
      placeholder: 'ui-state-highlight', 
      start: function() { 
       $('.editor').each(function() { 
        $(this).ckeditorGet().destroy(); 
       }); 
      }, 
      stop: createckeditor() 
     }); 
     $("#list").disableSelection(); 

     for (i = 0; i < 10; i++) { 
      createckeditor() 
     } 
    }); 

    function createckeditor() { 
     $(".editor").ckeditor(); 
    }

這爲我工作，因爲它是可以接受的所有編輯器被破壞並重新創建，當你拖動的東西。它可能會被調整隻能刪除被拖動的項目。

來源

2010-08-25 18:06:27

我有同樣的問題，嘗試調用的CKEditor的初始化函數，你完成了重新排序之後的事情。

$(function() { 
$("#list").sortable({ 
placeholder: 'ui-state-highlight', 
stop: createckeditor() 
}); 
$("#list").disableSelection(); 


createckeditor() 

}); 

function createckeditor() { 
$(".editor").ckeditor(); 
}

來源

2010-07-31 20:36:04 Tim

喜添：這似乎沒有爲我工作。 – PF1 2010-07-31 21:24:52

嘗試將類編輯器添加到所有textareas（class ='editor'）。我編輯的帖子，我認爲這將工作 – Tim 2010-08-14 16:18:52

在for循環內調用createckeditor（）是相當無用的，因爲createckeditor（）將在一次調用中啓動所有現有的.editor類... – 2012-06-12 09:23:08

那麼我有另一個解決方案是關於把編輯器的內容在拖動之前，然後停止後，把它放回編輯器。這種方式在排序後不需要實例化編輯器。

$(function() { 
    $("#sortable").sortable({ 
     start:function (event,ui) { 
      //alert($('.attribute_text',ui.item).val()) 
      $('.attribute_val',ui.item).html($('.attribute_text',ui.item).val()).show(); 
      $('.attribute_div',ui.item).hide(); 
     }, 
     stop: function(event, ui) { 
      $('.attribute_val',ui.item).hide(); 
      $('.attribute_div',ui.item).show(); 
      $('.attribute_text',ui.item).val($('.attribute_val',ui.item).html());    

     } 
    }); 
    $("#sortable").disableSelection(); 

});

這裏attribute_text是給出的textara類名其爲可拖動內的排序，並且本內.attribute_div attribute_val是隱藏的元素的類名，其是用來存儲編輯的內容。

來源

2011-02-24 10:39:49 pradeep

我遇到了這個問題，並有黑客有點固定它 - 這裏有雲：

 var current_ck_text = ""; 
     $("#editor-list").sortable({ 
      start: function(event, ui){ 
       var ckedname = $(ui.item).find(".textcontainer").find("span").attr("id"); 
       var ckedname_arr = ckedname.split("_"); 
       ckedname = ckedname_arr[1]; 
       current_ck_text = CKEDITOR.instances[ckedname].getData(); 
      }, 
      stop: function(event, ui){ 
       var ckedname = $(ui.item).find(".textcontainer").find("span").attr("id"); 
       var ckedname_arr = ckedname.split("_"); 
       ckedname = ckedname_arr[1]; 
       CKEDITOR.instances[ckedname].setData(current_ck_text); 
      } 
     });

當使用這兩個在一起（排序和CKEditor的），我發現，如果你強制數據回編輯器，它會重新加載，就像它沒有被觸摸一樣。使用「ckedname」（或「CK編輯器名稱」），以便找到正確的CKEditor實例。假設您在單個頁面上有多個編輯器可能已被動態放置。當然，如果您知道編輯器的實例名稱，則可以跳過「開始」和「停止」回調關閉中的前三行。（注意：我的「textcontainer」是包含CKEditor的div類）

來源

2011-04-11 05:57:23 eugene

我在使用CKEditor和jQuery UI Sortable時遇到類似問題。就我而言，如果我同時使用兩者，CKEditor將完全沒有響應。我可以通過點擊控制 + <div>來嘗試編輯<div>。

爲了使雙方的工作，我用a <span> that contains an up/down drag image to sort：

<span class="handle">up down image</span> 

$("#sortable").sortable({ 
    handle: '.handle', 
})

來源

2014-10-19 17:48:23 user3026316

CKEditor凍結在jQuery UI重新排序

回答

相關問題