TinyMCE - aggiunta di un interruttore a levetta ON / OFF

Question

Sto usando TinyMCE nelle aree di testo nella mia sezione di amministrazione di Magento. Ho il mio editor TinyMCE visibile dall'inizio, ma voglio l'opzione per disabilitarlo / riattivarlo.

Sto usando la versione del plugin jQuery, quindi ho aggiunto alcuni script, che stanno funzionando. Tuttavia, riguarda solo la prima istanza di TinyMCE: se nella pagina sono presenti altre istanze, non sono interessate.

Ho usato questo esempio http://tinymce.moxiecode.com/examples/example_23.php come base per ciò che ho fatto finora. Ma non riesco ancora a capire perché riguarda solo la prima istanza. Qualche idea? Ecco il mio codice:

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

Funziona bene se ripeto lo script per ogni area di testo separata, come textarea: eq (0), textarea: eq (1) ecc. Non so perché, ma lo farà.

UPDATE:

Il modo in cui hanno l'esempio show / hide di jQuery sul sito tinymce in realtà non funziona. Invece di nascondere semplicemente l'editor, devi effettivamente scaricare e quindi ricaricarlo, oppure qualsiasi modifica apportata nella sezione "disabilitato" lo stato non verrà salvato quando viene inviato il modulo. Quindi dovresti fare qualcosa del tipo:

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

Per chiunque cerchi TinyMCE versione 4.x puoi usare:

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

Answer 3

Nel caso in cui possa aiutare chiunque, posso dire che non l'ho mai fatto funzionare bene con l'helper jquery quando ho avuto più istanze di stagno sulla stessa pagina. In effetti, non sono sicuro se abbia senso usare jquery per questo dato che perderesti la possibilità di lavorare in "init una volta". metodologia che tinymce consente. Quindi ho appena scritto un paio di funzioni per gestire la commutazione:

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

Inoltre, ho appena smesso di usare l'helper jquery per inizializzare e inizializzare in questo modo:

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

Davvero, dopo tutto il tempo che ho sprecato nel tentativo di farlo funzionare con jquery, uso semplicemente l'oggetto tinymce direttamente. Poiché init viene chiamato una sola volta, tutti gli editor escono cercando e lavorando allo stesso modo.

Answer 4

Sulle mie pagine cambio tra HTML textarea 'vanilla' ed editor tinymce. Uso tinymce 4. I ricevimenti precedenti non funzionano più nella versione 4. Per non perdere il contenuto di textarea su submit in entrambi i casi, ho trovato questa soluzione:

<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' è questo dizionario di opzioni editor:

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