NicEdit Un editeur WYSIWYG pour votre site

Par Brice, 30 avril 2009 | Outils

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’

Mots clés : , ,

Les commentaires sont fermés.

Remonter

Vous cherchez quelque chose?

Utilisez le formulaire ci-dessous pour rechercher dans le site:

© Copyright 2009 - Flyoverweb
Blog propulsé par WordPress et édité par Freelance Webexpert