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

1、网页文章编辑器tinyMCE使用方法 分类： Technology 2009-04-04 13:25 2340人阅读 评论(0) 收藏 举报 1 介绍:TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器，由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方面虽然不能称得上是最强，但绝对能够满足大部分网站的需求，并且功能配置灵活简单。另一特点是加载速度非常快，TinyMCE是一个根据LGPL license发布的自由软件，可以把它用于商业应用。2 使用:2.1 首先将TinyMCE解压缩，会建立如下的目录结构:/tinymce/tinymce/doc

2、s/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

3、_mce/themes/default/tinymce/jscripts/tiny_mce/themes/simple/其中docs/目录下是TinyMCE的说明文档，examples/目录下是4个实例页面，而jscripts/目录下则是真正的JS文件。实际使用时候只需要将jscripts/目录上传到服务器上即可2.2 然后在需要使用TinyMCE的页面里加入如下的JS代码: script language=javascript type=text/javascript src=/script/tiny_mce/tiny_mce.js tinyMCE.init( mode : textarea

4、s, theme : advanced, language :zh ); 上面写的是发布时的相对路径，给出当前系统的的路径，这里假设页面的上级文件夹”relInfo/”与jscripts/处于同一目录下，否则请修改代码里的路径。3 初始化配置介绍:3.1 初始化配置代码script type=text/javascript src= /script/tiny_mce/tiny_mce.js tinyMCE.init(/ General optionsmode : exact,elements : textareas,theme : advanced,skin : o2k7,language:z

5、h,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,/ Theme optionstheme_advanced_buttons1 : save,

6、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,unl

7、ink,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,|,s

8、tyleprops,|,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,/ Example content CSS (should be your site CSS)content_css :

9、css/content.css,/ Drop lists for link/image/media/template dialogstemplate_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,/ Replace values for the template plugintempla

10、te_replace_values : username : Some User,staffid : ); 经过初始化配置，页面里所有的textarea元素就会被渲染成TinyMCE实例。3.2 初始化配置详细介绍:mode与elements是搭配使用的，用来指定渲染name在elements中的HTML元素为TinyMCE编辑器(可以是DIV或者Textarea)，比如:mode : exact,elements : example_textarea也可以单独用 mode : textareas,这样页面中所有的Textarea元素都会被渲染。theme 可以是advanced或者simpl

11、e(受功能限制),也可以自定义主题。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_

12、advanced_toolbar_location和theme_advanced_toolbar_align很简单，一看就明白。relative_urls : false,remove_script_host : false一般也配对使用，因为TinyMce会自动把本地链接改成相对链接的形式，比如会把绝对路径/2006/03/abc.html改成相对路径/2006/03/abc.html。加了上面的代码后就不会自动改写了。4 tinyMCE配置体会：3月5号开始接触tinyMCE，那天晚上就把效果调试出来了，第二天进行写入写出测试时发现一些小错误：1. 在电脑中打开静态页面时时可以使用 相对路径，但要发布时就一定要使用发布时的路径了script type=text/javascript src=/script/tiny_mce/tiny_mce.js2. tinyMCE就是一个javaScript写成的网页文本编辑器，使用时导入js文件，进行相应初始化配置就行了，但我在使用中却发现稍有不慎就会导致效果出不来，或出错。如HTML头部要写成 信息发布不能写作 base href= 信息发布多写一个base href= 文章编辑器就显示