Javascript WYSIWYG Editor

Pour tous ceux ou celles qui ne le connaissent pas, TinyMCE est un éditeur HTML wysiwyg, c’est à dire un traitement de texte qui se charge de transformer ce que vous taper en code HTML.

Vous n’avez donc pas besoin de connaitre et d’apprendre le language HTML pour écrire et mettre en page vos documents depuis l’administration de votre site, blog ou shop Internet.

Ce système est Open Source sous licence LGPL et compatible avec Mozilla, MSIE, FireFox, Opera, Safari ou Chrome. Il est facilement personnalisable avec des thèmes ou des plugins. Il supporte le multi-langue avec ses packs de langue.

Utiliser un éditeur WYSIWYG dans vos formulaire

Exemple d’intégration

<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">

tinyMCE.init({
	// General options
	mode : "textareas",
	theme : "advanced",
	plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",

	// Theme options
	theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
	theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
	theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
	theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_statusbar_location : "bottom",
	theme_advanced_resizing : true,

	// Example content CSS (should be your site CSS)
	content_css : "css/example.css",

	// Drop lists for link/image/media/template dialogs
	template_external_list_url : "js/template_list.js",
	external_link_list_url : "js/link_list.js",
	external_image_list_url : "js/image_list.js",
	media_external_list_url : "js/media_list.js",

	// Replace values for the template plugin
	template_replace_values : {
		username : "Some User",
		staffid : "991234"
	}
});
</script>

<form method="post" action="somepage">
	<textarea name="content" style="width:100%">
	</textarea>
</form>

Il existe aussi FCKEditor qui se rapproche, son avantage est d’avoir un « filebrowser » non-payant ce qui n’est pas le cas de Tiny.

Mais j’ai personnellement toujours utiliser TinyMCE dans les projets clients sur lesquels j’ai travaillé. En effet, la prise en main est sensiblement plus facile et j’ai pu constater que les client devienne plus rapidement autonome.

http://tinymce.moxiecode.com
http://www.fckeditor.net