TinyMCE - एक चालू/बंद टॉगल स्विच

Question

जोड़ना मैं अपने Magento व्यवस्थापक अनुभाग में टेक्स्ट-क्षेत्रों पर TinyMCE का उपयोग कर रहा हूं। मेरे पास मेरा TinyMCE संपादक प्रारंभिक रूप है, लेकिन मैं इसे अक्षम/पुनः सक्षम करने का विकल्प चाहता हूं।

मैं jQuery प्लगइन संस्करण का उपयोग कर रहा हूं, इसलिए मैंने कुछ स्क्रिप्ट जोड़ा, जो लगभग काम कर रहा है। हालांकि, यह केवल TinyMCE के पहले उदाहरण को प्रभावित कर रहा है - यदि पृष्ठ पर इसके किसी भी अन्य उदाहरण हैं, तो वे प्रभावित नहीं हैं।

मैंने इस उदाहरण का उपयोग http://tinymce.moxiecode.com/examples/example_23.php के लिए किया है जो मैंने अभी तक किया है। लेकिन अभी भी यह पता नहीं लगाया जा सकता है कि यह केवल पहले उदाहरण को क्यों प्रभावित कर रहा है। कोई विचार?

var $j = jQuery.noConflict(); 
// Add ON OFF toggle switch 
$j(function() { 
$j('textarea').after("<br/><span class=\"toggle form-button\">Toggle TinyMCE</span>"); 
$j("span.toggle").toggle(function(){ 
$j('.wrapper').find('textarea').tinymce().hide(); 
     }, function() { 
$j('.wrapper').find('textarea').tinymce().show(); 
    }); 
}); 

Answer 1

ठीक काम करता है अगर मैं प्रत्येक अलग-अलग पाठ क्षेत्र के लिए स्क्रिप्ट को दोहराने, पाठ क्षेत्र की तरह: eq (0), पाठ क्षेत्र: eq (1) आदि क्यों पता नहीं है, लेकिन यह हूँ यहाँ मेरी कोड है कर।

अद्यतन:

तरह वे TinyMCE साइट पर jQuery दिखाएँ/छिपाएँ उदाहरण वास्तव में काम नहीं करता है। संपादक को छिपाने के बजाय, आपको वास्तव में अनलोड करना होगा और फिर इसे पुनः लोड करना होगा, या फिर "toggled off" स्थिति में किए गए कोई भी परिवर्तन फ़ॉर्म सबमिट होने पर सहेजे नहीं जाएंगे। तो आप निम्नलिखित की तरह कुछ करना चाहिए:

$(function() { 
    var id = 'tinytextareaID'; // ID of your textarea (no # symbol) 
     $("a.toggle").toggle(function(){ 
      tinyMCE.execCommand('mceRemoveControl', false, id); 
     }, function() { 
      tinyMCE.execCommand('mceAddControl', false, id); 
    }); 
}); 

Answer 2

मामले में यह किसी को भी मदद कर सकते हैं, मैं कह सकता हूँ कि मैं यह सही jQuery सहायक के साथ काम कर जब मैं ही पृष्ठ पर एकाधिक TinyMCE उदाहरणों था नहीं मिला। असल में, मुझे यकीन नहीं है कि इसके लिए jquery का उपयोग करना समझ में आता है क्योंकि आप "init एक बार" पद्धति में काम करने का मौका खो देंगे जो tinymce सक्षम करता है। तो मैं सिर्फ टॉगल संभालने के लिए एक जोड़ी कार्यों लिखा है: इसके अलावा

function showBlogEditor(strItemId){ 
    var theeditor = tinyMCE.get(strItemId); //strItemId is the ID of the HTML element 
    if(theeditor && theteditor.initialized){ 
     //you can do something here if you need 
    }else{ 
     tinyMCE.execCommand('mceAddControl', false, strItemId); 
    } 
} 
function hideBlogEditor(strItemId){ 
    if (tinyMCE.getInstanceById(strItemId)) 
    { 
      tinyMCE.execCommand('mceFocus', false, strItemId); 
      tinyMCE.execCommand('mceRemoveControl', false, strItemId); 
    }   
} 

, मैं सिर्फ प्रारंभ करने में jQuery सहायक उपयोग बंद कर दिया और इस तरह प्रारंभ:

/* it is the mode: "none" that matters here. You are initializing the tinymce object without creating a visual manifestation of it. Then the show and hide functions will turn the control on and off */ 
    tinyMCE.init({ 
     theme : "advanced",mode : "exact", 
     mode : "none", 
     plugins : strplgns, 
     theme_advanced_buttons1 : strbtns1, 
     theme_advanced_buttons2 : strbtns2, 
     theme_advanced_buttons3 : strbtns3, 
     content_css : "/css/hlsl.css" 
    });  

वास्तव में, हर समय मैं व्यर्थ के बाद jquery के साथ काम करने की कोशिश कर रहा हूं, मैं सिर्फ tinymce ऑब्जेक्ट का सीधे उपयोग करता हूं। चूंकि इनिट को सिर्फ एक बार बुलाया जाता है, इसलिए सभी संपादक इसे देखकर काम करते हैं।

Answer 3

TinyMCE संस्करण 4.x की तलाश में किसी को भी के लिए आप उपयोग कर सकते हैं:

tinymce.EditorManager.execCommand('mceToggleEditor', true, textarea_id); 

Answer 4

अपने पृष्ठों मैं वेनिला एचटीएमएल 'पाठ क्षेत्र' और TinyMCE संपादक के बीच स्विच पर। मैं TinyMCE 4. का उपयोग recepies ऊपर संस्करण 4 में अब और काम नहीं करते आदेश या तो मामले में प्रस्तुत पर पाठ क्षेत्र सामग्री खोना नहीं में मैं इस समाधान पाया:

<script> 
 
function toggle_tinymce_checkbutton(checkButtonId,strItemId){ 
 
var toggle = $('#'+checkButtonId); // checkButtonId = id of checkbutton w/o # 
 
if(toggle.attr('value') == 'on') { 
 
\t var editor = tinymce.EditorManager.get(strItemId); // strItemId = id of textarea w/o # 
 
\t editor.remove(); 
 
\t toggle.attr('value','off'); 
 
} else { 
 
\t var editor = tinymce.EditorManager.createEditor(strItemId,tinymce_settings); 
 
\t editor.render(); 
 
\t toggle.attr('value','on');} 
 
} 
 
</script>

'tinymce_settings'

<script> 
 
tinymce_settings = { 
 
\t selector: '#cm_pages_body', 
 
\t height: 300, 
 
\t width:767, 
 
\t statusbar: false, 
 
\t convert_urls: false, 
 
\t valid_children: '+body[style]', 
 
\t plugins: [ 
 
\t  'advlist autolink lists link image charmap print preview anchor', 
 
\t  'searchreplace visualblocks code fullscreen', 
 
\t  'insertdatetime media table contextmenu paste code', 
 
\t  'textcolor', 
 
\t ], 
 
\t toolbar: 'undo redo | styleselect | bold italic | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link code', 
 
\t content_css: [ 
 
\t  '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css', 
 
\t  '//www.tinymce.com/css/codepen.min.css' 
 
\t ],}; 
 
</script>