- Télécharger TinyMCE, décompresser l’archive et l’installer dans un répertoire du genre “Content/Scripts”
- Dans les pages où sera inséré l’éditeur html, ajouter entre les balises <head></head>:
<script type="text/javascript" src="path/to/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"
});
</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"
});
</script>
- Ne pas oublier de configurer le chemin vers tiny_mce.js (d’autres exemples de configuration sont disponibles sur le site de TinyMCE)
- Télécharger ce plugin. Uploader les deux fichiers
editor_plugin.jsetimage.aspxdanstiny_mce/plugins/advimage - Remplacer “image.htm” par “image.aspx” dans le fichier
editor_plugin_src.js - Rajouter le path pour TinyMCE dans web.config, par exemple:
<add key="tinyMCEImageBasePath" value="/Content/Images/" /> - Arranger selon son goût le fichier
image.aspxqui est un peu bordélique.
0 Commentaire
S'abonner au fil RSS pour suivre les commentaires de ce billet.