Accueil » Développement, Open Source, Web

TinyEditor : un éditeur WYSIWYG en Javascript à découvrir

TinyEditor est un éditeur WYSIWYG1 très léger codé en Javascript. Il peut facilement être personnalisé pour s’intégrer à n’importe quel site Web grâce à une CSS personnalisée et au nombre conséquent de paramètres disponibles. Il gère la plupart des besoins de base d’un éditeur WYSIWYG (alignement du texte, gras, souligné, etc…) et tente de rendre le code le plus propre possible (j’entends par là qu’il essaie de ne pas laisser des balises inutiles trainer comme on en voit souvent).

Mise en place

Téléchargez la dernière version du script ici.

Dans l’entête de votre page « html » insérez le code suivant (entre les balises <head> et </head>). Les chemins dans les « href » doivent évidemment lier aux fichiers précédemment téléchargés.

<link rel="stylesheet" href="votre_dossier/style.css" />
<script type="text/javascript" src="votre_dossier/tinyeditor.js"></script>

Et dans le contenu de votre page le code ci-dessous.

<textarea id="input" ></textarea>

Puis le code Javascript (toujours dans la même page)

<script type="text/javascript">
new TINY.editor.edit('editor',{
	id:'editeur', /* ID de votre div où doit apparaitre l'éditeur */
	width:584, /* Largeur de l'éditeur */
	height:175, /* Hauteur de l'éditeur */
	cssclass:'te',
	controlclass:'tecontrol',
	rowclass:'teheader',
	dividerclass:'tedivider',
	/* Les boutons de votre éditeur */
	controls:['bold','italic','underline','strikethrough','|','subscript','superscript','|',
			  'orderedlist','unorderedlist','|','outdent','indent','|','leftalign',
			  'centeralign','rightalign','blockjustify','|','unformat','|','undo','redo','n',
			  'font','size','style','|','image','hr','link','unlink','|','cut','copy','paste','print'],
	footer:true,
	/* Les polices disponibles dans la liste déroulante */
	fonts:['Verdana','Arial','Georgia','Trebuchet MS'],
	xhtml:true,
	cssfile:'style.css',
	bodyid:'editor',
	footerclass:'tefooter',
	toggle:{text:'source',activetext:'wysiwyg',cssclass:'toggle'},
	resize:{cssclass:'resize'}
});
</script>

Comme vous le voyez, le code est très compréhensible et très simple. Ce qui rend ce script très utile pour un éditeur de base à mettre en place sur un site Web. Un exemple est disponible ici.

Notes de l'article

  1. What You See Is What You Get [lien]
http://www.wikio.fr GBuzz!

Tags : , , ,

Auteur : Jonas Luthi

{ Suisse (bon ça en s’en fout), mais surtout passionné par le Web et les nouvelles technologies, je bloggais depuis plus d’une année sur Jonasluthi.com avant de me lancer dans l’aventure Xoodeo.com. Vous pouvez me trouver sur Twitter (normal). Je suis une formation de médiamaticien d’une durée de 4 ans. }

9 commentaires et tweets »

  • leandrec (1)

    TinyEditor : un éditeur WYSIWYG en Javascript à découvrir http://tinyurl.com/ydkyszo

    This comment was originally posted on Twitter

    RépondreRépondre
    # 8 février 2010 at 21 h 42 min
  • g_lannoy (2)

    RT @xoodeo TinyEditor : un éditeur WYSIWYG en Javascript à découvrir http://tinyurl.com/ydkyszo

    This comment was originally posted on Twitter

    RépondreRépondre
    # 8 février 2010 at 21 h 51 min
  • jonasluthi (3)

    RT @xoodeo TinyEditor : un éditeur WYSIWYG en Javascript à découvrir http://tinyurl.com/ydkyszo

    This comment was originally posted on Twitter

    RépondreRépondre
    # 8 février 2010 at 20 h 57 min
  • xoodeo (4)

    TinyEditor : un éditeur WYSIWYG en Javascript à découvrir http://bit.ly/aoDWzf

    This comment was originally posted on Twitter

    RépondreRépondre
    # 8 février 2010 at 20 h 59 min
  • www.fuzz.fr (5)

    TinyEditor : un éditeur WYSIWYG en Javascript à découvrir…

    TinyEditor est un éditeur WYSIWYG1 très léger codé en Javascript. Il peut facilement être personnalisé pour s’intégrer à n’importe quel site Web grâce à une CSS personnalisée et au nombre conséquent de paramètres. Il gère la plupart des besoins fondame…

    # 8 février 2010 at 21 h 00 min
  • djlonyte (6)

    RT @xoodeo TinyEditor : un éditeur WYSIWYG en Javascript à découvrir http://tinyurl.com/ydkyszo

    This comment was originally posted on Twitter

    RépondreRépondre
    # 8 février 2010 at 22 h 39 min
  • SGI (7)

    Effectivement, ce petit éditeur WYSIWYG m’a l’air fort intéressant. Il fut une époque où j’avais employé FCKEditor, mais il fallait le bidouiller pour qu’il fonctionne correctement.

    Pas plus tard que hier soir, un ami m’a montré CKEditor, qui m’a l’air aussi pas mal du tout, plus lourd mais plus complet que TinyEditor… D’ailleurs, je viens de me rendre compte en allant sur le site officiel que ce n’est rien d’autre que la suite de FCKEditor.

    RépondreRépondre
    # 9 février 2010 at 12 h 07 min
  • jonasluthi (8)

    RT @xoodeo: TinyEditor : un éditeur WYSIWYG en Javascript à découvrir http://bit.ly/aoDWzf

    This comment was originally posted on Twitter

    RépondreRépondre
    # 9 février 2010 at 19 h 46 min
  • Jonas Luthi (9) (Auteur de l'article)

    @SGI: Avant de découvrir TinyEditor j’utilisais TinyMCE personnellement. Plus complet mais plus lourd.

    Merci pour les noms des autres scripts, je testerai à l’occasion ;) . Il faut toujours garder à l’esprit qu’un éditeur en Javascript n’est pas encore accessible à tous :D

    RépondreRépondre
    # 9 février 2010 at 23 h 48 min

Laisser un commentaire

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

Vous pouvez utiliser les tags html suivants
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Commentaires supplémentaires sur l'article via BackType