使用JS函數sortable()對CK編輯器進行拖曳時,會導致textarea被鎖定無法編輯,這是一個很頭痛的問題,還好在ckeditor官網找到解決方案,就是當拖曳觸發時(start)先銷毀CKEDITOR,拖曳結束(stop)在重建CKEDITOR,解決方法如下:
function dragmenufunction() {$(".sortable").sortable({
items: ".sortablebox", //指定拖曳元件或ID及CLASS
//拖曳開始
start: function(event, ui){
var textareaId = ui.item.find('.editor').attr('id' ); //紅字的.editor為textarea->class
if (typeof textareaId != 'undefined') {
var editorInstance = CKEDITOR.instances[textareaId];
editorInstance.destroy();
CKEDITOR.remove( textareaId );
}
},
//拖曳結束
stop: function(event, ui){
var textareaId = ui.item.find('.editor').attr('id'); //紅字的.editor為textarea->class
if (typeof textareaId != 'undefined') {
CKEDITOR.replace( textareaId );
}
}
});
}
start: function(event, ui){
var textareaId = ui.item.find('.editor').attr('id' ); //紅字的.editor為textarea->class
if (typeof textareaId != 'undefined') {
var editorInstance = CKEDITOR.instances[textareaId];
editorInstance.destroy();
CKEDITOR.remove( textareaId );
}
},
//拖曳結束
stop: function(event, ui){
var textareaId = ui.item.find('.editor').attr('id'); //紅字的.editor為textarea->class
if (typeof textareaId != 'undefined') {
CKEDITOR.replace( textareaId );
}
}
});
}
實際測試看看,當拖曳時ck編輯器會被銷毀呈現原生textarea狀態
當完成拖曳後,ck編輯器又會重新產生,內文也能編輯,不會被鎖定
這樣問題就解決了,收工,有需要的朋友參考看看!!
參考資料來源:https://ckeditor.com/old/forums/CKEditor/CKEditor-Becomes-Disabled-When-Moved-with-Javascript
工作心得撰寫:徐嘉裕 Neil hsu
留言
張貼留言