TinyMCE - Hinzufügen eines ON/OFF-Kippschalters

Question

Ich benutze TinyMCE in den Textbereichen in meinem Magento Admin-Bereich. Ich habe meinen TinyMCE-Editor vom Start an sichtbar, aber ich möchte die Option deaktivieren/wieder aktivieren.

Ich benutze die jQuery-Plugin-Version, also habe ich ein Skript hinzugefügt, das fast funktioniert. Es betrifft jedoch nur die erste Instanz von TinyMCE - wenn es andere Instanzen auf der Seite gibt, sind sie nicht betroffen.

Ich habe dieses Beispiel http://tinymce.moxiecode.com/examples/example_23.php als Basis für das, was ich bisher getan habe. Kann aber immer noch nicht herausfinden, warum es nur die erste Instanz betrifft. Irgendwelche Ideen? Hier ist mein Code:

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

funktioniert ok, wenn ich das Skript für jeden einzelnen Textbereich wiederholen, wie Textbereich: eq (0), TextArea-: eq (1) usw. Ich weiß nicht warum, aber es wird machen.

UPDATE:

Die Art, wie sie das jQuery-Show/Hide Beispiel auf der tinymce Website nicht wirklich arbeiten. Anstatt den Editor nur auszublenden, müssen Sie ihn tatsächlich entladen und dann erneut laden, sonst werden alle im Status "Abgeschaltet" vorgenommenen Änderungen nicht gespeichert, wenn das Formular gesendet wird. So sollten Sie etwas tun, wie folgt aus:

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

Falls es jemand helfen kann, kann ich sagen, dass ich es nie bekam richtig funktioniert mit dem jquery Helfer, wenn ich mehrere tinymce Instanzen auf derselben Seite hatte. In der Tat bin ich nicht sicher, ob es sinnvoll ist, jQuery dafür zu verwenden, da Sie die Chance verlieren würden, in der Methode "init once" zu arbeiten, die ynymce ermöglicht. Also schrieb ich nur ein paar Funktionen, um die Hin- und Herschalten zu handhaben:

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

Auch ich hielt nur den jquery Helfer verwendet zu initialisieren und wie folgt initialisiert:

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

Wirklich, nach der alle Zeit, die ich verschwendet Ich versuche, es mit jQuery zur Arbeit zu bringen, ich benutze nur das tinymce-Objekt direkt. Da init nur einmal aufgerufen wird, kommen alle Redakteure auf die Suche und arbeiten gleich.

Answer 3

Für alle, die für TinyMCE Version 4.x können Sie:

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

Answer 4

Auf meinen Seiten, die ich zwischen Vanille-HTML 'Textarea' und tinymce Editor wechseln. Ich benutze tinymce 4. Die recepies oben funktionieren nicht mehr in der Version 4. Um nicht TextArea- Inhalt einreichen in jedem Fall ich diese Lösung gefunden zu verlieren:

<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' ist dieses Wörterbuch von Editor-Optionen:

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