TinyMCE - ajout d'un commutateur à bascule ON / OFF

Question

J'utilise TinyMCE dans les zones de texte de la section administrateur de Magento. Mon éditeur TinyMCE est visible depuis le début, mais je veux l’option pour le désactiver / le réactiver.

J'utilise la version du plugin jQuery, alors j'ai ajouté un script, qui fonctionne presque. Toutefois, cela n’affecte que la première instance de TinyMCE - s’il existe d’autres instances sur la page, elles ne sont pas affectées.

J'ai utilisé cet exemple http://tinymce.moxiecode.com/examples/example_23.php comme base pour ce que j'ai fait jusqu'à présent. Mais je n'arrive toujours pas à comprendre pourquoi cela n'affecte que la première instance. Des idées? Voici mon 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

Fonctionne bien si je répète le script pour chaque zone de texte, comme textarea: eq (0), textarea: eq (1), etc. Je ne sais pas pourquoi, mais ça ira.

MISE À JOUR:

L'exemple d'affichage / masquage de jQuery sur le site tinymce ne fonctionne pas réellement. Au lieu de simplement masquer l'éditeur, vous devez en fait décharger puis recharger le document, ou sinon, toute modification apportée à l'option "désactivé". l'état ne sera pas enregistré lors de l'envoi du formulaire. Donc, vous devriez faire quelque chose comme ce qui suit:

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

Pour ceux qui recherchent TinyMCE version 4.x, vous pouvez utiliser:

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

Answer 3

Si cela peut aider n’importe qui, je peux dire que cela ne m’a jamais fonctionné correctement avec l’aide de jquery lorsque j’avais plusieurs instances de tinymce sur la même page. En fait, je ne suis pas sûr qu’il soit logique d’utiliser jquery pour cela car vous perdriez la chance de travailler dans le programme "init une fois". méthodologie que tinymce permet. Donc, je viens d'écrire quelques fonctions pour gérer le basculement:

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

De plus, je viens d’arrêter d’utiliser l’assistant jquery pour initialiser et d’initialiser comme ceci:

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

Vraiment, après tout le temps que j’ai perdu à essayer de le faire fonctionner avec jQuery, j’utilise directement l’objet tinymce. Comme init n'est appelé qu'une seule fois, tous les éditeurs ont le même aspect et le même fonctionnement.

Answer 4

Sur mes pages, je bascule entre 'textarea' van HTML et l'éditeur tinymce. J'utilise tinymce 4. Les recettes ci-dessus ne fonctionnent plus dans la version 4. Afin de ne pas perdre le contenu textarea lors de l'envoi, dans les deux cas, j'ai trouvé cette solution:

<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' est ce dictionnaire d'options d'édition:

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