Plusieurs éditeurs TinyMCE, mais une seule barre d’outils?

J’ai regardé autour du forum, mais je n’arrive pas à trouver de réponse définitive à ce problème …

J’utilise jQuery et TinyMCE sur notre site Web. J’ai parcouru la documentation de TinyMCE, mais j’ai encore peur de me perdre. Nous développons une interface qui nécessite une modification sur place à plusieurs endroits sur la page. La seule chose à faire est que chacun de ceux-ci aura tous les choix de assembly de TinyMCE dans une barre d’outils en haut. Donc, pour récapituler, il s’agit de plusieurs éditeurs (chacun n’ayant pas de barre d’outils, mais juste un emplacement pour éditer ou sélectionner le texte) et une seule barre d’outils en haut de la page pour contrôler la zone de texte active à la fois.

Comment cela pourrait-il être réalisé? Est-ce même possible? Toute aide, tout effort dans la bonne direction, toute astuce / conseil / connaissance sur ce problème serait une aide précieuse.

Merci James

Je sais qu’il existe un moyen d’afficher la barre d’outils lorsqu’un élément textarea est ciblé, puis de le masquer lors d’un événement de flou textarea – de sorte que ce pourrait être un itinéraire.

Je fais un genre de chose similaire (avec plusieurs zones de texte) où je charge à la demande le tinyMCE, donc quelque chose comme le chargement à la demande puis la destruction lorsque vous avez terminé avec (événement de flou) pourrait être ce que vous recherchez.

Je ne peux pas vous donner l’intégralité de mon code car il fait en réalité partie de la propriété intellectuelle de mon employeur, mais voici un aperçu général, espérons que cela devrait aider. TinyMCE_GZ fait partie du gzip qui se trouve sur le site tinyMCE.

isTinyMCE_Loaded = false; jQuery('.my-textarea').one("click", function(){ BuildWYSIWYG.Full(jQuery(this)); }) BuildWYSIWYG.OnDemand: function(callback){ tinyMCE_GZ.init({ plugins : 'style,table,advhr,advimage,advlink,insertdatetime,preview,searchreplace,contextmenu,paste,fullscreen,visualchars,nonbreaking,xhtmlxtras,safari,tinybrowser', themes : 'simple,advanced', languages : 'en', disk_cache : true, debug : false }, function(){ isTinyMCE_Loaded = true; callback(); }); }; BuildWYSIWYG.Full: function(el){ settings.elements = jQuery(el).attr("id"); // Build advanced wysiwyg if (isTinyMCE_Loaded){ tinyMCE.init(settings); } else { BuildWYSIWYG.OnDemand(function(){ tinyMCE.init(settings); }); } } 

Je l’ai fait avec la version 3.x comme celui-ci (il est de syntaxe Prototype):

Tout d’abord, j’ai créé un wrapper de barre d’outils (dans mon cas, je l’ai attaché avec la position: fixée en haut du document:

 

Ensuite, je mets la fonction de configuration dans les tinyMCE-parameters (pour chaque éditeur) comme celui-ci:

 [...] theme_advanced_toolbar_location : "external", setup : function(ed) { ed.onInit.add(function(ed, e) { ed.onPostRender.add(function(ed, cm) { var toolbar = $(ed.id + '_external'); // inserts the external toolbar in the external wrapper $('externalToolbarWrapper').insert(toolbar.hide()); }); ed.onRemove.add(function(ed) { if($(ed.id + '_external')) { // removes external toolbar $(ed.id + '_external').remove(); } }); }); } 

Cela a fonctionné dans mon cas – les éditeurs affichent / masquent les barres d’outils lors de l’activation / désactivation.

Il pourrait y avoir un autre moyen. Jetez un oeil à cet exemple. http://tinymce.moxiecode.com/examples/example_23.php

Vous pouvez utiliser les liens en bas (Afficher, Masquer, Gras, Obtenir le contenu, etc.) sous forme de menu (peut nécessiter un certain style). Ensuite, récupérez l’identifiant de la zone de texte actuellement active et transmettez-le au menu (#current) et utilisez-le pour modifier cette zone de texte.

Pour réaliser ce que vous décrivez:

  1. Commencez par désactiver tous les éléments de menu individuels TinyMCE.
  2. Une fois qu’ils sont désactivés, créez votre propre menu TinyMCE en HTML et le style en conséquence.
  3. Déterminer quel texte TinyMCE en discussion
  4. Appliquez les actions de votre nouveau menu à la zone de texte ciblée

Maintenant pour du code (peut nécessiter un débogage …)

Tout d’abord, initialisez TinyMCE et désactivez les menus.

 tinyMCE configs ({ mode : "textareas", theme : "advanced", editor_selector : "editable" theme_advanced_buttons1 : "", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_toolbar_location : "botton", theme_advanced_statusbar_location : "bottom" }); 

Je pense que vous pouvez également modifier la fonction _addToolbars dans tiny_mce / themes / advanced / editor_template_src.js, puis l’emballer.

Déterminez ensuite la zone de texte actuellement active à l’aide de jQuery bind:

 $().ready(function() { var current; $('.editable').focus( current = this.id; ); $('.editable').blur( //maybe hide the menu (?) ); } 

Puis créez le HTML avec nos textareas et le menu

 

Je l’ai fait avec une ancienne version de tinymce:

http://tinymce.moxiecode.com/punbb/viewtopic.php?id=10197 http://examples.dtbaker.com.au/code/tinymce/

Je n’ai pas reproduit cela avec la dernière version cependant 🙁

Mais fondamentalement, il y a deux façons de le faire:

1) Créez votre propre menu qui appelle des arguments de TinyMCE sur l’éditeur de tinymce actif.

2) Définissez la barre d’outils / le menu tinymce sur externe pour qu’elle apparaisse lorsque vous mettez au point un éditeur. Ensuite, en utilisant CSS, vous positionnez chaque barre d’outils pour qu’elle apparaisse au même endroit. On dirait donc qu’il n’ya qu’une seule barre d’outils mais qu’il s’agit de plusieurs barres d’outils apparaissant au même endroit.

J’espère que cela pourra aider.

Je fournis une solution à cette question au cas où quelqu’un viendrait encore ici pour une personne. Vous pouvez utiliser execCommand pour exécuter divers styles de texte que vous aimez en cliquant sur vos boutons personnalisés. Par exemple:

 // bold, italic and underline $('#bold').click(function(){ tinymce.execCommand('Bold'); }); $('#italic').click(function(){ tinyMCE.execCommand('Italic'); }); $('#underline').click(function(){ tinyMCE.execCommand('Underline'); }); //commands for left align, right align and center align $('#l-a').click(function(){ tinyMCE.execCommand('JustifyLeft'); }); $('#c-a').click(function(){ tinyMCE.execCommand('JustifyCenter'); }); $('#r-a').click(function(){ tinyMCE.execCommand('JustifyRight'); }); //commands for inserting ul or ol $('#ul').click(function(){ tinyMCE.execCommand('InsertUnorderedList'); }); $('#ol').click(function(){ tinyMCE.execCommand('InsertOrderedList'); }); 

où #bold, #italic, #ul etc. sont les identifiants des éléments HTML que vous utilisez pour appliquer le style. Par exemple:

  

Ce bouton gras le texte, peu importe le texte est dans quelle instance de tinymce. Bien que le seul inconvénient de cette fonctionnalité soit que vous devrez faire beaucoup de travail pour montrer l’effet sur un bouton particulier lorsqu’il est activé ou désactivé. Si cela ne vous concerne pas, cela fera l’affaire.

J’espère que ça aide …