NicEdit Un editeur WYSIWYG pour votre site

Vous cherchez une façon de mettre en page vos textes sans taper du code html ? Vous souhaitez faciliter l’administration de vos clients sur leurs interfaces admin ? Ne cherchez plus, cet éditeur WYSIWYG est fait pour vous ! Après avoir testé plusieurs scripts gratuits, NicEdit m’a semblé le plus facile à adapté, et surtout très [...]

Vous cherchez une façon de mettre en page vos textes sans taper du code html ? Vous souhaitez faciliter l’administration de vos clients sur leurs interfaces admin ? Ne cherchez plus, cet éditeur WYSIWYG est fait pour vous ! Après avoir testé plusieurs scripts gratuits, NicEdit m’a semblé le plus facile à adapté, et surtout très léger ! Certes, il n’a pas autant d’option que TinyMCE ou CKEditor, mais si vous voulez restreindre les possibilités de mise en pages à quelques options, NicEdit est idéal.

NiceEdit

Pour le mettre en place, c’est très simple, commencez par télécharger ce script avec les options que vous désirez. Ensuite, de-zippez le, vous aurez 2 fichiers utiles (nicEdit.js et nicEditorIcons.gif), placez les dans le répertoire qui vous convient.

Pour faire fonctionner ce script, insérer dans vos pages ce code d’appel du fichier Javascript :

<script src= »js/nicEdit.js » type= »text/javascript »></script>

Puis,  vous avez la possibilité de faire fonctionner l’éditeur WYSIWYG sur toutes les balises textaera comme ceci :

<script type= »text/javascript »>
//<![CDATA[
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
//]]>
</script>

Ou de faire fonctionner sur une cible définie comme ceci :

<script type= »text/javascript »>
//<![CDATA[
bkLib.onDomLoaded(function() {
new nicEditor({maxHeight : 300}).panelInstance('texte');});
//]]>
</script>

<textarea name=texte cols=90 rows=15 id=’texte’></textarea>

Ici il fonctionne pour l’id « texte » uniquement, vous remarquerez l’option maxHeight : 300, qui permet de définir une hauteur minimum, je vous la conseil pour avoir un minimum de visibilité. Voici le wiki  du script, vous y trouverez les options et configurations.

Si vous avez un problème d’afficher des icones, vous devrez surement modifier la ligne ci-dessous en fonction où se trouve le gif :

iconsPath : ‘./js/nicEditorIcons.gif’