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

Question

J'ai regardé autour du forum, mais n'arrive pas à trouver une réponse définitive à ce problème ...

J'utilise jQuery et TinyMCE sur notre site Web. J'ai parcouru les docs de TinyMCE, mais je suis toujours en train de me perdre j'ai peur. Nous faisons une interface qui nécessite une modification sur place à plusieurs endroits de la page. La seule chose est, chacun d'entre eux aura tous les choix d'édition de TinyMCE dans une barre d'outils en haut. Donc, pour le récapituler, il y a plusieurs éditeurs (qui n'ont pas de barre d'outils, juste un endroit pour éditer ou sélectionner le texte) et une seule barre d'outils en haut de la page pour contrôler quelle zone de texte est active à la fois.

Comment cela a-t-il pu être réalisé? Est-ce même possible? Toute aide, toute poussée dans la bonne direction, des conseils/astuces/connaissances du tout sur ce problème seraient d'une grande aide.

Merci, James

Answer 1

Je sais qu'il ya une façon de montrer la barre d'outils lorsqu'une textarea se concentre dans, puis cacher le cas de flou textarea - de sorte que pourrait être une voie. Je fais un genre de chose similaire (avec plusieurs zones de texte) où je charge en demande le tinyMCE, donc quelque chose comme le chargement à la demande et ensuite détruire quand fini avec (événement de flou) pourrait être ce que vous recherchez.

Je ne peux pas vous donner tout mon code, car il fait partie de l'IPI de mon employeur, mais voici un aperçu, j'espère qu'il devrait aider. Le tinyMCE_GZ fait partie du gzip qui est hors du 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); 
     }); 
    } 
} 

Answer 2

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

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

Pour obtenir ce que vous décrivez:

1. d'abord désactiver tous les éléments du menu indviduel TinyMCE.
2. Une fois qu'ils sont désactivés, créez votre propre menu TinyMCE en HTML et modélisez-le en conséquence.
3. Déterminer qui TinyMCE textarea la mise au point
4. Appliquer les actions de votre nouveau menu à la zone de texte qui se concentre

maintenant pour un code (peut nécessiter un certain débogage ...)

D'abord, Initialiser TinyMCE et désactiver les menus. Je pense que

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

vous pouvez également modifier la fonction _addToolbars dans tiny_mce/thèmes/avancés/editor_template_src.js puis emballez.

Ensuite, déterminer la zone de texte qui est actuellement mise au point en utilisant bind jQuery:

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

} 

Ensuite, créez le code HTML avec nos textareas et le menu

<form method="post" action="somepage"> 
<div id="independent_menu"> 
    <!-- The Menu, Please Style Accordingly --> 
    <a href="javascript:;" onmousedown="$('#current').tinymce().show();">[Show]</a> 
    <a href="javascript:;" onmousedown="$('#current').tinymce().hide();">[Hide]</a> 
    <a href="javascript:;" onmousedown="$('#current').tinymce().execCommand('Bold');">[Bold]</a> 
    <a href="javascript:;" onmousedown="alert($('#current').html());">[Get contents]</a> 
    <a href="javascript:;" onmousedown="alert($('#current').tinymce().selection.getContent());">[Get selected HTML]</a> 
    <a href="javascript:;" onmousedown="alert($('#current').tinymce().selection.getContent({format : 'text'}));">[Get selected text]</a> 
    <a href="javascript:;" onmousedown="alert($('#current').tinymce().selection.getNode().nodeName);">[Get selected element]</a> 
    <a href="javascript:;" onmousedown="$('#current').tinymce().execCommand('mceInsertContent',false,'<b>Hello world!!</b>');">[Insert HTML]</a> 
    <a href="javascript:;" onmousedown="$('#current').tinymce().execCommand('mceReplaceContent',false,'<b>{$selection}</b>');">[Replace selection]</a> 
</div> 

<!-- The Text Areas --> 

<textarea class="editable" id="one">Some Text Here</textarea> 

<textarea class="editable" id="two">Yet another text area</textarea> 

<textarea class="editable" id="three">Final Text Area</textarea> 

Answer 3

Je l'ai fait avec une version plus ancienne de tinymce:

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

N'a pas re-produit cela avec la dernière version si :(

Mais au fond, il y a deux façons de le faire, que ce soit:

1) Créez votre propre menu qui appelle les arguments tinymce dans l'éditeur tinymce actif.

2) Définissez la barre d'outils/le menu tinymce pour qu'il soit externe, afin qu'il apparaisse lorsque vous mettez au point un éditeur. Ensuite, en utilisant CSS vous positionnez chaque barre d'outils pour apparaître au même endroit. Donc, il semble qu'il y ait une seule barre d'outils, mais en fait ce sont plusieurs barres d'outils apparaissant au même endroit.

Espérons que ça aide.

Answer 4

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

D'abord, je créé une enveloppe de barre d'outils (dans mon cas, j'attacha avec position: fixed en haut du document:

<div id="externalToolbarWrapper"></div> 

Puis je régler la fonction de configuration dans les tinyMCE-paramètres (pour chaque éditeur) comme ceci:.

[...] 
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 - le spectacle éditeurs/masquer les barres d'outils sur l'activation/désactivation

Answer 5

Je fournis une solution pour cette question au cas où quelqu'un viendrait encore ici pour un. Vous pouvez utiliser execCommand pour exécuter différents styles de texte 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 ids des éléments HTML que vous utilisez pour faire mettre en œuvre le style. Par exemple:

<button id="bold">B</button> 

Ce bouton affichera le texte en gras, quel que soit le texte dans quelle instance de tinymce. Bien que le seul inconvénient de cette fonctionnalité est que vous devrez faire beaucoup de travail pour montrer l'effet sur un bouton particulier quand il est allumé ou éteint. Si vous n'êtes pas concerné par cela, alors cela fera l'affaire.

J'espère que cela aide ...