सीकेएडिटर jQuery यूआई रीडर

Question

पर फ्रीज करता है मैं jQuery यूआई फ्रेमवर्क का उपयोग कर सीकेईडिटर की गतिशील रूप से बनाई गई सूची को पुन: व्यवस्थित करने का प्रयास कर रहा हूं, लेकिन मुझे संपादक को मुक्त करने में कोई समस्या है। यह पूरी तरह से काम करता था जब मैं सिर्फ <textarea> का उपयोग कर रहा था, लेकिन अब, खींचने की क्रिया पूरी होने के बाद, यह उपयोगकर्ता को कोई भी टेक्स्ट लिखने नहीं देता है।

$(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(); 
} 

यह एचटीएमएल कोड है:

<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> 

Answer 1

हालांकि आदर्श नहीं, मैं एक संभावित समाधान पाया है:

$(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(); 
    } 

यह मेरे लिए काम किया है, क्योंकि यह स्वीकार्य है संपादकों के सभी नष्ट कर दिया और जाने के लिए फिर से बनाया जब आप कुछ खींचें । यह शायद आइटम को खींचने के लिए केवल tweaked किया जा सकता है।

Answer 2

मैं एक ही समस्या थी आप पुन: व्यवस्थित करें बात पूरा करने के बाद, CKEditor की init समारोह से कॉल करके

यह जावा स्क्रिप्ट कोड है।

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


createckeditor() 

}); 

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

Answer 3

खैर मेरे पास एक और समाधान है जो ड्रैग से पहले एक div में संपादक की सामग्री डालने के बारे में है और उसके बाद इसे बंद कर देता है, इसे वापस संपादक में डाल दें। इस तरह सॉर्ट करने के बाद संपादक को तुरंत चालू करने की आवश्यकता नहीं है।

$(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 दिया वर्ग के नाम जो खींचने योग्य है अंदर sortable और अंदर .attribute_div वर्तमान attribute_val जो संपादक की सामग्री को संग्रहीत किया जाता है छिपा तत्व के वर्ग नाम है।

Answer 4

मैं इस समस्या में आए और एक हैक की कुछ हद तक साथ यह तय - यहाँ जाता है:

 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); 
      } 
     }); 

जब एक साथ इन दोनों का उपयोग कर (sortable और CKEditor), मुझे पता चला है कि आप में वापस डेटा के लिए मजबूर करता है, तो संपादक, यह फिर से लोड हो जाता है जैसे कि यह छुआ नहीं था। "Ckedname" (या "सीके संपादक नाम") का उपयोग किया गया था ताकि उचित CKEditor इंस्टेंस स्थित हो। धारणा यह है कि आपके पास एक ही पृष्ठ पर एकाधिक संपादक हैं जो गतिशील रूप से रखे जा सकते हैं। बेशक, यदि आप अपने संपादकों के इंस्टेंस नामों को जानते हैं, तो आप "प्रारंभ" और "स्टॉप" कॉलबैक क्लोजर दोनों में पहली तीन पंक्तियां छोड़ सकते हैं। (नोट: मेरा "टेक्स्टकेंटेनर" div वर्ग है जिसमें सीकेएडिटर शामिल है)

Answer 5

सीकेएडिटर और jQuery UI सॉर्ट करने योग्य का उपयोग करते समय मुझे एक ही समस्या थी। मेरे मामले में, अगर मैं एक ही समय में दोनों का उपयोग कर रहा था, तो सीकेएडिटर पूरी तरह उत्तरदायी नहीं होगा। <div> इनलाइन संपादन योग्य बनाने का एकमात्र तरीका नियंत्रण + <div> पर क्लिक करके था जिसे मैं संपादित करने का प्रयास करूंगा।

दोनों के काम करने के लिए, मैं a <span> that contains an up/down drag image to sort प्रयोग किया है:

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

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