markItUp! – un éditeur pour vos textareas via JQuery

Posted By Franck Pertegas on 2 Oct 2009 in Framework, Javascript, Outils, Programmation | 0 comments

Vous êtes entrain de concevoir votre site internet, et vous avez besoin de proposer un éditeur de texte afin de mettre en forme certaines parties de votre site. Bien entendu vous pouvez vous tourner vers les excellents : TinyMCE, FCKeditor et autres éditeurs wysiwyg ultra complets. Cependant, vous utilisez le Framework javascript JQuery et souhaitez un outil simple, facile à mettre en place et tant qu’à faire, utilisant JQuery. Jay Salvat a répondu à votre besoin avec markItUp!, un plugin configurable qui va vous permettre d’agrémenter vos textareas d’une barre d’édition.

markItUp!

Facilement customisable, une mise en place simple et rapide, doté de plusieurs add-on, proposant des sorties html, bbcode, wiki syntaxe. Une preview dynamique en ajax est aussi possible grâce à markItUp!.

Exemple d’installation simple :

1/ appel des librairies :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="markitup/jquery.markitup.js"></script>

2/ appel du set (configuration) pour votre éditeur :

<script type="text/javascript" src="markitup/sets/default/set.js"></script>

3/ appel du css :

<link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css">
<link rel="stylesheet" type="text/css" href="markitup/sets/default/style.css">

4/ Puis la mise en place de markItUp! pour une unique textarea :

<script type="text/javascript" >
   $(document).ready(function() {
      $("#markItUp").markItUp(mySettings);
   });
</script>
...
<textarea id="markItUp"></textarea>

<script type="text/javascript" >
   $(document).ready(function() {
      $(".markItUp").markItUp(mySettings);
   });
</script>
...
<textarea class="markItUp"></textarea>
<textarea class="markItUp"></textarea>

<script type="text/javascript" >
   $(document).ready(function() {
      $("textarea").markItUp(mySettings);
   });
</script>
...
<textarea></textarea>

Voilà pour la mise en place de base, les possibilités sont multiples, je vous laisse les découvrir sur le site de l’outil : http://markitup.jaysalvat.com

Sachez que le code php (et d’autres langages) de parse BBcode (et autres) est disponible sur le site.

Prochainement, je tacherais de faire des petits tuto liés ou je ferais une traduction, tout simplement.