网页文章编辑器tinyMCE使用方法

网页文章编辑器tinyMCE使用方法分类：Technology2009-04-0413:252340人阅读评论(0)收藏举报1介绍:TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器，由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方面虽然不能称得上是最强，但绝对能够满足大部分网站的需求，并且功能配置灵活简单。另一特点是加载速度非常快，TinyMCE是一个根据LGPLlicense发布的自由软件，可以把它用于商业应用。2使用:2.1首先将TinyMCE解压缩，会建立如下的目录结构:/tinymce//tinymce/docs//tinymce/docs/zh_cn//tinymce/examples//tinymce/examples/zh_cn//tinymce/jscripts//tinymce/jscripts/tiny_mce//tinymce/jscripts/tiny_mce/langs//tinymce/jscripts/tiny_mce/plugins//tinymce/jscripts/tiny_mce/plugins//tinymce/jscripts/tiny_mce/themes//tinymce/jscripts/tiny_mce/themes/advanced//tinymce/jscripts/tiny_mce/themes/default//tinymce/jscripts/tiny_mce/themes/simple/其中docs/目录下是TinyMCE的说明文档，examples/目录下是4个实例页面，而jscripts/目录下则是真正的JS文件。实际使用时候只需要将jscripts/目录上传到服务器上即可2.2然后在需要使用TinyMCE的页面里加入如下的JS代码:!--tinyMCE--scriptlanguage=javascripttype=text/javascriptsrc=%=path%/script/tiny_mce/tiny_mce.js/scriptscriptlanguage=javascripttype=text/javascripttinyMCE.init({mode:textareas,theme:advanced,language:zh});/script!--/tinyMCE--上面写的是发布时的相对路径，%=path%给出当前系统的的路径，这里假设页面的上级文件夹”relInfo/”与jscripts/处于同一目录下，否则请修改代码里的路径。3初始化配置介绍:3.1初始化配置代码scripttype=text/javascriptsrc=%=path%/script/tiny_mce/tiny_mce.js/script!--配置tinyMCE--scripttype=text/javascripttinyMCE.init({//Generaloptionsmode:exact,elements:textareas,theme:advanced,skin:o2k7,language:zh,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,//Themeoptionstheme_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,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor,theme_advanced_buttons3:tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,advhr,|,print,|,ltr,rtl,|,fullscreen,theme_advanced_buttons4:insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,theme_advanced_toolbar_location:top,theme_advanced_toolbar_align:left,theme_advanced_statusbar_location:bottom,theme_advanced_resizing:true,//ExamplecontentCSS(shouldbeyoursiteCSS)content_css:css/content.css,//Droplistsforlink/image/media/templatedialogstemplate_external_list_url:lists/template_list.js,external_link_list_url:lists/link_list.js,external_image_list_url:lists/image_list.js,media_external_list_url:lists/media_list.js,//Replacevaluesforthetemplateplugintemplate_replace_values:{username:SomeUser,staffid:991234}});/script经过初始化配置，页面里所有的textarea元素就会被渲染成TinyMCE实例。3.2初始化配置详细介绍:mode与elements是搭配使用的，用来指定渲染name在elements中的HTML元素为TinyMCE编辑器(可以是DIV或者Textarea)，比如:mode:exact,elements:example_textarea也可以单独用mode:textareas,这样页面中所有的Textarea元素都会被渲染。theme可以是advanced或者simple(受功能限制),也可以自定义主题。language常用选择可以是:en,zh_cn,zh_cn_utf8,zh_tw,zh_tw_utf8(和语言包名字对应)plugins用来指定加载相应的插件，以提供特别功能theme_advanced_buttons后面的数字用来指定工具栏的第几行，前3行可以不写，系统会自动用默认图标填在前3个工具栏，如果你不想显示前3行，可以像例子里面一样这样写:theme_advanced_buttons3:,_add_before后缀指在默认工具栏前面加图标，_add后缀指在默认工具栏后面加图标，具体每个按钮资料可以查看文档(/doc目录)。theme_advanced_toolbar_location和theme_advanced_toolbar_align很简单，一看就明白。relative_urls:false,remove_script_host:false一般也配对使用，因为TinyMce会自动把本地链接改成相对链接的形式，比如会把绝对路径改成相对路径/2006/03/abc.html。加了上面的代码后就不会自动改写了。4tinyMCE配置体会：3月5号开始接触tinyMCE，那天晚上就把效果调试出来了，第二天进行写入写出测试时发现一些小错误：1.在电脑中打开静态页面时时可以使用scripttype=text/javascriptsrc=../script/tiny_mce/tiny_mce.js/script相对路径，但要发布时就一定要使用发布时的路径了scripttype=text/javascriptsrc=%=path%/script/tiny_mce/tiny_mce.js/script2.tinyMCE就是一个javaScript写成的网页文本编辑器，使用时导入js文件，进行相应初始化配置就行了，但我在使用中却发现稍有不慎就会导致效果出不来，或出错。如HTML头部要写成headmetahttp-equiv=Content-Typecontent=text/html;charset=UTF-8/metahttp-equiv=pragmacontent=no-cachemetahttp-equiv=cache-controlcontent=no-cachemetahttp-equiv=expirescontent=0metahttp-equiv=keywordscontent=keyword1,keyword2,keyword3metahttp-equiv=descriptioncontent=Thisismypagetitle信息发布/title不能写作headbasehref=%=basePath%metahttp-equiv=Content-Typecontent=text/html;charset=UTF-8/metahttp-equiv=pragmacontent=no-cachemetahttp-equiv=cache-controlcontent=no-cachemetahttp-equiv=expirescontent=0metahttp-equiv=keywordscontent=keyword1,keyword2,keyword3metahttp-equiv=descriptioncontent=Thisismypagetitle信息发布/title多写一个basehref=%=basePath%文章编辑器就显示不出来。3.提交时的按钮属性不能设置为button，直接submit。后记：我用的Struts2+tinyMCE调试，相信在其它环境中同样可用。tinyMCE将textarea渲染后可以直接取值，例如：pspanstyle=font-size:small;tinyMCE成功运行。/span/p取道的值存入数据库，取出来直接显示即可得到编辑好的文章。tinyMCE成功运行读书有感朱熹心如明镜一鉴开，天光云影共徘徊。问渠那得清如许，为有源头活水来。2009/3/8刘杰