TinyMCE - Hinzufügen eines ON / OFF Kippschalter

Question

Ich bin mit TinyMCE auf den Text-Bereiche in meinem Magento Admin-Bereich. Ich habe meine TinyMCE Editor sichtbare Form der Anfang, aber ich möchte die Option deaktivieren / aktivieren Sie es erneut.

Ich verwende die jQuery-Plugin-Version, so fügte ich ein Skript, das fast funktioniert. Allerdings ist es nur die erste Instanz von TinyMCE zu beeinflussen -. Wenn es keine anderen Instanzen davon auf der Seite ist, werden sie nicht betroffen

Ich habe dieses Beispiel http://tinymce.moxiecode.com/examples/example_23.php als Basis für das, was ich bisher gemacht habe. Aber immer noch nicht herausfinden, warum es die erste Instanz zu beeinflussen ist nur. 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 in Ordnung, 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 tun

UPDATE:

Die Art, wie sie die jQuery-Show haben / verstecken Beispiel auf der tinymce Website nicht wirklich funktionieren. Anstatt nur den Editor versteckt, müssen Sie tatsächlich entladen und es dann neu zu laden, oder sonst werden alle Änderungen in der „umgeschaltet Aus“ -Zustand wird nicht gespeichert, wenn das Formular abgeschickt wird. So können Sie etwa wie folgt tun sollte:

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

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

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

Answer 3

Falls es jemand helfen kann, kann ich sagen, dass ich es nie bekam Recht mit dem jquery Helfer zu arbeiten, wenn ich mehrere tinymce Instanzen auf derselben Seite hatte. In der Tat, ich bin nicht sicher, ob es Sinn jquery für diesen Einsatz macht, da Sie die Möglichkeit, die Arbeit in der „init einmal“ Methodik verlieren würde, die tinymce ermöglicht. Also schrieb ich nur ein paar Funktionen, um die Hin- und Herschalten zu behandeln:

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 gerade die jquery Helfer verwendet wie diese zu initialisieren und 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 all der Zeit verschwendete ich versuche, es zu bekommen mit Jquery zu arbeiten, verwende ich nur das tinymce Objekt direkt. Da init nur einmal aufgerufen wird, werden alle Editoren kommen suchen und die gleiche Arbeit.

Answer 4

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

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

'tinymce_settings' ist dieses Wörterbuch von Editor-Optionen:

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