jquery sortable

Question

में TinyMCE उदाहरणों में मदद के लिए इतना समय है कि मैं स्टंप और निराश हूं। बहुत सारे गुगल हो गए लेकिन अभी तक एक समाधान ढूंढना जो मेरे लिए काम करता है।

मेरे पास जो कुछ है वह divs का एक समूह है जिसे Jquery sortable का उपयोग करके सॉर्ट किया जा सकता है, कुछ divs में एक TinyMCE उदाहरण होता है। जब तक आप एक TinyMCE उदाहरण वाले div को स्थानांतरित करने का प्रयास नहीं करते हैं, तब तक यह ठीक है - जब आप TinyMCE स्वयं को रीफ्रेश करते हैं और एक नया उदाहरण बनाता है जिसे आप तब डेटा खो देते हैं आदि। और फिर पूरा पृष्ठ जावास्क्रिप्ट के रूप में नहीं टूटता है काम करता है :)। इस समय के दौरान मुझे फायरबग में जावास्क्रिप्ट कन्स्ट्रक्टर त्रुटियां आदि मिलती हैं।

क्या मैं जाने के लिए है सबसे अच्छा तरीका है का फैसला किया है जब div पाठ क्षेत्र से निकालने TinyMCE घसीटा पाने के लिए शुरू होता है और जब यह में रखा गया है नई स्थिति डालने TinyMCE में वापस आ गया है।

मैं इसे ठीक से हटा सकते हैं लेकिन इसे वापस जोड़ने में परेशानी हो रही है - क्योंकि मुझे और अधिक कन्स्ट्रक्टर त्रुटियां मिलती हैं।

नोट: TinyMCE स्वचालित रूप से सिस्टम के भीतर मेरे सभी टेक्स्ट क्षेत्रों में जोड़ा जाता है, इसलिए मैं TinyMCE के साथ गड़बड़ से बचने की कोशिश कर रहा हूं।

नीचे दिए गए कोड में मैं परीक्षण उद्देश्यों के लिए बस एक विशिष्ट टेक्स्टरी आईडी को लक्षित कर रहा हूं।

$cols.sortable({ 
          cursor: 'move', 
          revert: true, 
          opacity: 0.6, 
          placeholder: 'widgetplaceholder', 
          forcePlaceholderSize: true, 
          connectWith: cols, 
          zIndex:9000, 
          cancel: ".collapsable_box_editpanel_groups, .collapsable_box_content", 
          start: function(e, ui) { 
            // removes tinymce ok from textarea 
            tinyMCE.execCommand('mceRemoveControl', false, 'textarea1'); 

          }, 
          stop: function(e,ui) { 
            // breaks here - constructor error 
            tinyMCE.execCommand('mceAddControl', true, 'textarea1'); 
            $(this).sortable("refresh"); 
          } 
        }); 

किसी और के पास कोई अन्य समाधान है? अगर आपको अधिक जानकारी चाहिए तो कृपया मुझे दें :)

Answer 1

नहीं, कोई अन्य समाधान नहीं है। इस तरह से इसे करने की जरूरत है। जब tinymce उदाहरण वाले मैनिप्लैटिन डोम तत्वों को आपको निष्क्रिय करने की आवश्यकता होती है और mceRemoveControl और mceAddControl का उपयोग करके डोम ऑपरेशन के साथ किया जाता है तो उन्हें पुनः सक्रिय करने की आवश्यकता होती है।

Answer 2

गतिशील रूप से "textarea1" असाइन करने की कोशिश करने वाले किसी भी व्यक्ति के लिए, ड्रैगगेबल ui.item के रूप में ui ऑब्जेक्ट में है। sortable प्रति एक पाठ क्षेत्र के लिए:

tinyMCE.execCommand('mceAddControl', false, $('textarea',ui.item)[0].id); 

tinyMCE.execCommand('mceRemoveControl', false, $('textarea',ui.item)[0].id); 

Answer 3

अरे आप पहले से ही अपने MCE अवस्थाओं में डेटा है, यह नष्ट होने से बचाने के लिए है, तो आप इस कोशिश कर सकते हैं:

start: function(e, ui){ 
    $(this).find('.tinyMCE').each(function(){ 
     tinyMCE.execCommand('mceRemoveControl', false, $(this).attr('id')); 
    }); 
}, 
stop: function(e,ui) { 
    $(this).find('.tinyMCE').each(function(){ 
     tinyMCE.execCommand('mceAddControl', true, $(this).attr('id')); 
     $(this).sortable("refresh"); 
    }); 
} 

मेरे मामले में मैं के साथ सभी MCE उदाहरण वर्गीकृत

Answer 4

TinyMCE

start: function (e, ui) { 
    $(ui.item).find('textarea').each(function() { 
    tinymce.execCommand('mceRemoveEditor', false, $(this).attr('id')); 
    }); 
}, 
stop: function (e, ui) { 
    $(ui.item).find('textarea').each(function() { 
    tinymce.execCommand('mceAddEditor', true, $(this).attr('id')); 
    }); 
} 

Answer 5

के संस्करण 4 के लिए .tinyMCE मैं कई अनुच्छेदों के साथ एक गतिशील रूप है जिसे सभी को TinyMCE के साथ संपादित किया जा सकता है। पैराग्राफ को फिर से क्रमबद्ध करने की अनुमति देने के लिए, मैंने बटन जोड़े जो टेक्स्टरी को ऊपर और नीचे ले जाते हैं।

मैं बटन है कि एक पाठ क्षेत्र ऊपर या नीचे ले जाता है पर एक alt = "textareaid" का उपयोग कर, और mceRemoveEditor और mceAddEditor आदेशों के लिए इस textareaid का उपयोग कर काम करने के लिए इसे पाने में कामयाब रहे। Textarea वर्ग = "textarea_container" के साथ एक div में होना है।

$('.move_textarea_up').click(function(){ 
    var tinymceid= $(this).attr("alt"); 
    tinyMCE.execCommand('mceRemoveEditor', false, tinymceid); 
    $(this).closest('div.textarea_container').insertBefore($(this).closest('div.textarea_container').prev()); 
    tinyMCE.execCommand('mceAddEditor', false, tinymceid); 
}); 
$('.move_textarea_down').click(function(){ 
    var tinymceid= $(this).attr("alt"); 
    tinyMCE.execCommand('mceRemoveEditor', false, tinymceid); 
    $(this).closest('div.textarea_container').insertAfter($(this).closest('div.textarea_container').next()); 
    tinyMCE.execCommand('mceAddEditor', false, tinymceid); 
}); 

Answer 6

मेरे लिए समाधान समाधान यहां है। TinyMCE

मेरे केस के संस्करण 4 के लिए: मैं मेटा बॉक्स अंदर वर्डप्रेस के लिए पुनरावर्तक क्षेत्र के साथ sortable jQuery उपयोग कर रहा हूँ। प्रत्येक क्रमबद्ध तत्व में textarea tinyMCE संपादक में परिवर्तित होता है।

जब मैं एक तत्व को क्रमबद्ध वस्तुओं से स्थानांतरित कर रहा था, तो केवल एक तत्व के अंदर संपादक टूट गया और दृश्य टैब में कोई सामग्री प्रदर्शित नहीं हुई। मैं mceRemoveEditor और mceAddEditor समस्या को रोकने के लिए इस्तेमाल किया।

तो मैं ऊपर दिए गए कुछ समाधानों के संयोजन के बाद इस अंतिम समाधान में आया था। @Honorable Chow, @pragmar @Sonicdesign के लिए धन्यवाद, आपके समाधान मेरे लिए काम नहीं करते थे, इसलिए मैंने उन्हें संशोधित किया। यहां मेरा कोड है जो मेरे लिए ठीक काम करता है।

start: function(e, ui){ 
     tinyMCE.execCommand('mceRemoveEditor', false, jQuery('textarea',ui.item)[0].id); 
    }, 
    stop: function(e,ui) { 
     tinyMCE.execCommand('mceAddEditor', false, jQuery('textarea',ui.item)[0].id); 
    } 

Answer 7

मैं के साथ इसी तरह की समस्या का समाधान करने में सक्षम होते हैं:

tinymce.activeEditor.setMode ('केवल पढ़ने के लिए');

और

tinymce.activeEditor.setMode ('डिजाइन');

इस संस्करण 4.3.x

Answer 8

मैं किया है

$("#stores-container").sortable({ 

     stop: function(event, ui) { 

      textareaID = $(ui.item).find(' textarea').attr('id'); 

      textareaVal=$(ui.item).find(' textarea').val(); 

      editorID=$(ui.item).find('.mce-container').attr('id'); 

      $("#"+editorID).remove(); 

      $('#'+textareaID).show(); 
      tinymce.init({selector: '#'+textareaID}); 
     } 

    }); 

Answer 9

खैर, यह समस्या का एक स्थायी समाधान के लिए काम करता है, TinyMCE v.4 के लिए + है:

start: function(e, ui){ 
     tinyMCE.triggerSave(); 
    }, 
    stop: function(e,ui) { 

     $(this).find('textarea').each(function(){ 
      tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id')); 

      // if your tinymce instance have different settings 
      tinymce.init(tinymce_settings($(this).attr('data-type'))); 

      tinyMCE.execCommand('mceAddEditor', false, $(this).attr('id')); 
     }); 
    } 

हैं आपके टेक्स्टरेरा में एक से अधिक प्रकार की सेटिंग्स लागू होती हैं, आपको प्रत्येक रीसेट से पहले tinymce.init(settings) घोषित करना होगा, अन्यथा लागू अंतिम आवेदन सभी पर लागू होगा।

<textarea data-type="settings_one"></textarea> <textarea data-type="settings_two"></textarea>

और फिर एक लोडर समारोह जो distrubute जाएगा आवश्यक एक का उपयोग करें:

function tinymce_settings(type) { 

var settings; 

switch(type) { 

    case 'settings_one' : 
    settings = {...} 
    break; 
    }  
return settings; 
} 

सेटिंग्स variate एक आसान तरीका की सेटिंग में इस तरह के रूप में अपने पाठ क्षेत्र पर टाइप एक ध्वज सेट करने के लिए है

Answer 10

start: function (e, ui) { 
    tinyMCE.execCommand('mceRemoveEditor', false, editor_id); 
}, 
stop: function (e, ui) { 
    tinymce.execCommand('mceAddEditor', true, editor_id); 
} 

यह अच्छा काम करता है बस मैं एक संपादक के लिए इस्तेमाल किया। आपका बहुत बहुत धन्यवाद :) ।

Answer 11

मैं बस को नष्ट करने और sortable स्टॉप पर संपादित पुनः समाप्त हो गया() घटना: एक आकर्षण की तरह

stop: function (e, ui) { 
    $(this).find('textarea').each(function() { 
    tinyMCE.get($(this).attr('id')).destroy(); 
    // the code below locates and evals the editor init script 
    eval($(this).parents('.item').find('script').html()); 
    }); 
} 

काम करता है और शायद() घटना अन्य सुझावों से एक बेहतर विकल्प प्रारंभ पर संपादक को नष्ट करने और है फिर स्टॉप() पर फिर से बनाएं - क्योंकि इस तरह से आप अभी भी दृश्यमान आकर्षक संपादक खींच रहे हैं। अनुलेख TinyMCE का उपयोग 4.5.2