13
OCT

CLEditor - Un editeur WYSIWYG pour jQuery

Publié le 13/10/11 à 10h35 par Skwi

CLEditor est un plugin jQuery open source proposant un éditeur WYSIWYG léger, extensible et offrant une bonne compatibilité avec les navigateurs du marché.

 

cleditor

Comme il est construit sous forme d'un plugin jQuery, il ne pèse que 9Ko (avec GZip), images et css comprises. Loin de certaines usines à gaz que l'on peu trouver parmi les éditeur WYSIWYG, il propose simplement les options les plus basiques, mais offre la possibilité d'y ajouter des extensions.

Parmi les extensions officielles, on trouve : l'intégration de tableaux, l'utilisation de smiley, la gestion du BBCode ...

Basé sur jQuery, CLEditor offre une très large compatibilité avec les navigateurs (IE6+, FF1.5+, Safari4+, Chrome5+, Opera10+) Comme beaucoup de plugins JQuery, il est très simple à mettre en place, tous les paramètres sont optionnels. Si le sélecteur jQuery correspond à plusieurs zones de texte, CLEditor gèrera les multiples instances sans problème.

$(document).ready(function() {
        $("#input").cleditor({
          width:        500, // width not including margins, borders or padding
          height:       250, // height not including margins, borders or padding
          controls:     // controls to add to the toolbar
                        "bold italic underline strikethrough subscript superscript | font size " +
                        "style | color highlight removeformat | bullets numbering | outdent " +
                        "indent | alignleft center alignright justify | undo redo | " +
                        "rule image link unlink | cut copy paste pastetext | print source",
          colors:       // colors in the color popup
                        "FFF FCC FC9 FF9 FFC 9F9 9FF CFF CCF FCF " +
                        "CCC F66 F96 FF6 FF3 6F9 3FF 6FF 99F F9F " +
                        "BBB F00 F90 FC6 FF0 3F3 6CC 3CF 66C C6C " +
                        "999 C00 F60 FC3 FC0 3C0 0CC 36F 63F C3C " +
                        "666 900 C60 C93 990 090 399 33F 60C 939 " +
                        "333 600 930 963 660 060 366 009 339 636 " +
                        "000 300 630 633 330 030 033 006 309 303",    
          fonts:        // font names in the font popup
                        "Arial,Arial Black,Comic Sans MS,Courier New,Narrow,Garamond," +
                        "Georgia,Impact,Sans Serif,Serif,Tahoma,Trebuchet MS,Verdana",
          sizes:        // sizes in the font size popup
                        "1,2,3,4,5,6,7",
          useCSS:       false, // use CSS to style HTML when possible (not supported in ie)
          docType:      // Document type contained within the editor
                        '',
          docCSSFile:   // CSS file used to style the document contained within the editor
                        "", 
          bodyStyle:    // style to assign to document body contained within the editor
                        "margin:4px; font:10pt Arial,Verdana; cursor:text"
        });
      });

Site officiel

Baraguiné par fbwebm le 13/10/11 à 12h59
fbwebm sur La Ferme du Web
Alors dans un premier temps, je me suis dit : ENCORE UN WYSIWYG !!!!!
puis en regardant le code : AH OUI POUR DEV UNE MINI APPLI SUR CHAINE FORMATER DESCRIPTION PRODUIT y a pas plus simple :-)
Baraguiné par le 28/03/12 à 11h03
Bonjour, j'aime beaucoup la simplicité de mise en place ! Mais depuis que je l'ai installé, slimbox2 ne fonctionne plus, pourtant c'est Jquery aussi ! Je ne comprends pas trop ! Si vous avez une réponse, je suis preneur ! Ou sinon un Editeur WYSIWYG compatible à Slimbox2, ou l'inverse ! Merci d'avance !

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web