TinyMCE : barre d’outil externe

J’ai eu besoin hier de placer la barre d’outil de TinyMCE à gauche du bloc d’édition.  Comme il n’est pas encore possible de préciser un div dans lequel faire apparaître la toolbar il a fallu ruser.

J’ai donc utilisé theme_advanced_toolbar_location : “external” dans la fonction init de TinyMCE et ai positionné la barre d’outil manuellement grâce à sa classe mceExternalToolbar.  Par défaut cela place la barre directement au dessus du textarea, en survolant ce qui peut y être.  De plus cette barre n’apparaît alors que lorsque l’éditeur a le focus, ce qui n’est pas mon souhait.

Voici le code html utilisé

<div class="editor">
<textarea id="content" name="content" class="mceEditor" rows="5" cols="20">
Lorem ipsum ...
</textarea>
</div>

.editor .mceEditor .mceExternalToolbar {
  position: relative;
  float: right;
  border: 1px solid #CCC;
  display: block;
  top: 0 !important; /* overwrite negative top value set inline via js  */
}

• float: right; positionne la barre d’outil
• border: 1px solid #CCC; évite de n’avoir que 3 bordures autour de la barre
• display: block; rend visible la barre d’outil qui est masquée par défaut dans ce mode
• top: 0 !important; j’ai remarqué que TinyMCE ajoute un style inline à la toolbar qui est top: -80px, j’écrase donc cette valeur. 

Je masque ensuite la croix de fermeture de la toolbar flottante.

.editor .mceEditor .mceExternalClose {
  display: none;
}

Un peu de cosmétique pour finir.  Je n’ai besoin que d’une toute petite zone d’édition qui reflète la taille de la zone dans laquelle le texte doit apparaître. 

.editor {
  position: relative;
  width: 450px;
  margin: 0 auto;
}

.mceEditor {
  width: 200px;
  height: 80px;
}

Voici le résultat :

Il me reste encore un soucis avec les scrollbars qui, en apparaissant, diminuent fortement la taille de la zone d’édition et donc la ressemblance entre le contenu édité et le produit fini dans la zone de 200 sur 80 pixels.

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically each day to your feed reader.