TinyMCE - aggiunta di un interruttore ON/OFF

Question

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

Sto utilizzando la versione del plugin jQuery, quindi ho aggiunto alcuni script, che è quasi funzionante. Tuttavia, ha effetto solo sulla prima istanza di TinyMCE - se ci sono altri casi nella pagina, non ne sono interessati.

Ho utilizzato questo esempio http://tinymce.moxiecode.com/examples/example_23.php come base per quello che ho fatto finora. Ma ancora non riesco a capire perché sta interessando solo la prima istanza. Qualche idea? Qui è 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 il copione per ogni area di testo separato, come textarea: eq (0), textarea: eq (1), ecc Non so perché, ma sarà fare.

UPDATE:

Il modo in cui hanno la mostra/nascondi esempio jQuery sul sito TinyMCE in realtà non funziona. Invece di nascondere semplicemente l'editor, è necessario scaricarlo e quindi ricaricarlo, altrimenti le eventuali modifiche apportate nello stato "disattivato" non verranno salvate quando il modulo viene inviato. Così si dovrebbe fare qualcosa di simile al seguente:

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

Nel caso in cui può aiutare chiunque, posso dire che non ho mai ottenuto che funziona proprio con l'helper jquery quando ho avuto più istanze TinyMCE sulla stessa pagina. In effetti, non sono sicuro che abbia senso utilizzare jquery per questo dato che si perderebbe la possibilità di lavorare con la metodologia "init once" consentita da tinymce. Così 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 inizializzato 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" 
    });  

In realtà, dopo tutto il tempo che ho sprecato cercando di farlo funzionare con jquery, io uso direttamente l'oggetto tinymce. Dal momento che init viene chiamato una sola volta, tutti gli editori vengono visualizzati e funzionano allo stesso modo.

Answer 3

Per chi cerca TinyMCE versione 4.x è possibile utilizzare:

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

Answer 4

nelle mie pagine a passare tra la vaniglia HTML 'textarea' ed editor TinyMCE. Io uso TinyMCE 4. Le ricette di cui sopra non funzionano più nella versione 4. Al fine di non perdere il contenuto textarea sulla presentare 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') { 
 
\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' è questo dizionario di redattore opzioni:

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