简单一招，为你的网站系统装上漂亮的WEB编辑器

落笑笑

出于学习的目的，我们经常会要做一些文本框来保存内容，但是那样的文字不可以排版，太过于简陋，下面以Tiny MCE为例，只要简单两行代码，就可以拥有漂亮的编辑器
效果图如下（蓝色皮肤）：

首先下载附件里的Tiny MCE,解压后放在你的WEB程序目录（自己调整）

在需要编辑器的JSP/ASP/PHP/HTML的头部插入如下代码

1. <!-- TinyMCE -->
2. <script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script> --注意这个路径要对应你的目录
3. <script type="text/javascript">
4. tinyMCE.init({
5. mode : "textareas",
6. theme : "simple"
7. });
8. </script>
9. <!-- /TinyMCE -->

复制代码

就可以使你的所有textarea区域替换为编辑器，当然也可以使用高级一点的模式

1. tinyMCE.init({
2. // General options
3. mode : "exact",
4. elements : "elm2",
5. theme : "advanced",
6. skin : "o2k7",
7. plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups",
9. // Theme options
10. theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
11. 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",
12. theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
13. theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
14. theme_advanced_toolbar_location : "top",
15. theme_advanced_toolbar_align : "left",
16. theme_advanced_statusbar_location : "bottom",
17. theme_advanced_resizing : true,
19. // Example content CSS (should be your site CSS)
20. content_css : "css/content.css",
22. // Drop lists for link/image/media/template dialogs
23. template_external_list_url : "lists/template_list.js",
24. external_link_list_url : "lists/link_list.js",
25. external_image_list_url : "lists/image_list.js",
26. media_external_list_url : "lists/media_list.js",
28. // Replace values for the template plugin
29. template_replace_values : {
30. username : "Some User",
31. staffid : "991234"
32. }
33. });

复制代码

直接复制代码即可，需要修改对应的元素ID，上例中要修改elements : \"elm2\",中的elem2为你的textarea的ID

sibel

笑笑很强大~~