TinyMCE - bir ON/OFF geçiş anahtarını ekleme

Question

Magento admin bölümümdeki metin alanları üzerinde TinyMCE kullanıyorum. TinyMCE editörümün görünür bir formu var, ama ben bunu devre dışı bırakma/yeniden etkinleştirme seçeneği istiyorum.

jQuery eklenti sürümünü kullanıyorum, bu yüzden hemen hemen çalışan bir komut dosyası ekledim. Ancak, yalnızca TinyMCE'nin ilk örneğini etkiler - sayfada başka herhangi bir durum varsa, bunlar etkilenmez.

Bu örnekte, şu ana kadar yaptığım iş için bir temel olarak http://tinymce.moxiecode.com/examples/example_23.php kullandım. Ama yine de neden sadece ilk örneği etkilediğini anlayamıyoruz. Herhangi bir fikir? Her ayrı metin alanına senaryosunu tekrar edersen

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

textarea gibi ok Works: eq (0), textarea: eq (1) vs. Neden bilmiyorum ama olacak İşte benim kod yap.

GÜNCELLEME:

aslında çalışmıyor tinymce sitesinde jQuery göstermek/gizlemek örnek var yol. Düzenleyiciyi gizlemek yerine, aslında boşaltmanız ve sonra yeniden yüklemeniz gerekir, aksi halde "geçiş yapılan" durumunda yapılan değişiklikler form gönderildiğinde kaydedilmez. Yani aşağıdaki gibi bir şey yapmalıdır:

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

durumda herkes yardımcı olabilir, ben aynı sayfada birden tinymce örneklerini vardı ne zaman jquery yardımcısı ile sağ hiç çalıştıramadım söyleyebiliriz. Aslında, bunun için jQuery kullanmanın mantıklı olup olmadığından emin değilim, çünkü tinymce'in sağladığı "init bir kez" metodolojisinde çalışma şansını kaybedeceksin. Yani sadece bu geçişlerin işlemek için bir kaç fonksiyonları yazdı: Ayrıca

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

, sadece başlatmak için jquery yardımcı kullanarak durdurdu ve bunun gibi başlatıldı: Ben boşa bütün zamandan sonra,

/* 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" 
    });  

Gerçekten jquery ile çalışmaya çalışıyorum, sadece tinymce nesnesini doğrudan kullanıyorum. Init sadece bir kez çağrıldığından beri, tüm editörler görünmeye ve aynı şekilde çalışmaya başlarlar.

Answer 3

TinyMCE sürüm 4.x arayan herkes için kullanabilirsiniz: vanilyalı HTML 'textarea' ve tinymce editörü arasında geçiş Benim sayfalarda

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

Answer 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': Ben bu çözüm buldu recepies yukarıdaki iki durumda da teslim üzerine textarea içeriği gevşek etmemek için sürümünde 4'te artık işe yaramamaktadır TinyMCE 4. kullanmak

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