TinyMCE - l'ajout d'un on/OFF interrupteur à bascule

J'utilise TinyMCE sur le texte-zones dans mon interface d'admin de la section. J'ai mon éditeur TinyMCE forme visible le début, mais je veux l'option pour désactiver/réactiver.

J'utilise le plugin jQuery version, j'ai donc ajouté un script, qui est presque de travail. Toutefois, c'est seulement une incidence sur la première instance de TinyMCE - s'il en existe d'autres instances sur la page, ils ne sont pas affectés.

J'ai utilisé cet exemple http://tinymce.moxiecode.com/examples/example_23.php comme une base pour ce que j'ai fait jusqu'à présent. Mais ne peut toujours pas comprendre pourquoi il est touchant de 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();
    });
});

C'est une sorte de non, mais pourquoi tu fais $j('.wrapper').find('textarea')? Vous pourriez faire $j('.wrapper textarea') à la place. Rappelez-vous que le sélecteur jQuery syntaxe fonctionne comme CSS.
Désolé, je n'ai avoir des comme ça à l'origine, juste oublié de le changer en arrière après avoir essayé différentes choses pour voir si l'un d'entre eux a travaillé à la place!

InformationsquelleAutor Marlon Creative | 2009-11-26

11

Fonctionne ok 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 fera l'affaire.

Mise à JOUR:

La façon dont ils ont la jQuery afficher/masquer exemple sur la tinymce site ne fonctionne pas réellement. Au lieu de masquer l'éditeur, vous avez réellement besoin de décharger puis recharger, ou encore les modifications apportées dans le "basculé" de l'état ne seront pas enregistrées lorsque le formulaire est soumis. 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);
    });
});
```
- +1. Si vous copiez l'exemple et désactiver ce mode, lorsque vous soumettez le formulaire original textarea sera ignoré et il est contenu remplacé par ce que l'éditeur avait à l'intérieur, lorsque vous caché.
InformationsquelleAutor Marlon Creative
10

Pour ceux qui recherchent TinyMCE la version 4.x vous pouvez utiliser:
```
tinymce.EditorManager.execCommand('mceToggleEditor', true, textarea_id);
```
- Merci!!!! J'ai été à la recherche partout pour cela!!! Il y a des exemples tous plus le lieu pour TinyMCE v3, mais rien pour v4.
- était à la recherche pour cela aussi, merci
- Comment pouvons-nous aller plus loin pour ajouter cette logique: If editor is currently ON, turn it OFF, else turn it ON?
- Depuis cette commande désactive la visibilité de tinyMCE, de savoir si l'éditeur est actuellement activer est puissant utile. Cela peut être vérifié à l'aide de if(tinymce.EditorManager.get(textarea_id).hidden == false){ /* do something */ }.
InformationsquelleAutor Tom

Dans le cas où il peut aider quelqu'un, je peux dire que je n'ai jamais eu le droit de travailler avec jquery aide quand j'ai eu plusieurs tinymce instances sur la même page. En fait, je ne sais pas si il est logique d'utiliser jquery pour cela, car vous serait de perdre la chance de travailler dans le "init une fois" méthodologie qui tinymce permet. Alors j'ai juste écrit 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);
    }           
}

Aussi, j'ai juste arrêté à l'aide de jquery aide pour initialiser et initialisé 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 l'obtenir pour fonctionner avec jquery, je viens d'utiliser la tinymce objet directement. Depuis init est appelée une fois, tous les éditeurs viennent à la recherche de travail et le même.

InformationsquelleAutor lequebecois

Sur mes pages, je switch entre la vanille HTML 'textarea' et éditeur tinymce. J'utilise tinymce 4. Les recettes ci-dessus ne fonctionnent plus dans la version 4. Afin de ne pas perdre textarea contenu à présenter, dans les deux cas j'ai trouvé cette solution:

HTML:

<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 de l'éditeur-options:

HTML:

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

InformationsquelleAutor user3312954

Vous devez vous connecter pour publier un commentaire.