markItUp! – un éditeur pour vos textareas via JQuery

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!

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>

OU
Pour une plusieurs textareas avec la même classe css :

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

OU
Pour toutes les textareas :

<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.

Author: Franck Pertegas

Share This Post On

Trackbacks/Pingbacks

  1. jQuery – 20 plugin jQuery à retenir | LudiBlog - [...] ! Je vous en parle ici MArkItUp est un éditeur de texte qui fonctionne avec jQuery. Léger, simple et…
  2. 50 Plugins jQuery pour vos sites web ! | LudiBlog - [...] vous en parle ici MarkItUp est un éditeur de texte qui fonctionne avec jQuery. Léger, simple et pratique, il…

Submit a Comment

Votre adresse e-mail ne sera pas publiée.