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

---

1         介绍:

TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器，由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方面虽然不能称得上是最强，但绝对能够满足大部分网站的需求，并且功能配置灵活简单。另一特点是加载速度非常快，TinyMCE是一个根据LGPL license发布的自由软件，可以把它用于商业应用。

 

 

 

 

 

 

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 -->

<script language="javascript" type="text/javascript" 

src="<%=path %>/script/tiny_mce/tiny_mce.js"></script>

<script language="javascript" type="text/javascript">

    tinyMCE.init({

        mode : "textareas",

        theme : "advanced",

        language :"zh"

    });

</script>

<!-- /tinyMCE -->

　  上面写的是发布时的相对路径，<%=path %>给出当前系统的的路径，这里假设页面的上级文件夹”relInfo/”与jscripts/处于同一目录下，否则请修改代码里的路径。

3         初始化配置介绍:

3.1 初始化配置代码

<script type="text/javascript" src="<%=path

%> /script/tiny_mce/tiny_mce.js"></script>      

    <!--配置tinyMCE  -->   

       <script type="text/javascript">

    tinyMCE.init({

       // General options

       mode : "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",

 

       // 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,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,

 

       // Example content CSS (should be your site CSS)

       content_css : "css/content.css",

 

       // Drop lists for link/image/media/template dialogs

       template_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 plugin

       template_replace_values : {

           username : "Some User",

           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会自动把本地链接改成相对链接的形式，比如会把绝对路径http://www.jacklam.cn/2006/03/abc.html改成相对路径/2006/03/abc.html。加了上面的代码后就不会自动改写了。

4         tinyMCE配置体会：

3月5号开始接触tinyMCE，那天晚上就把效果调试出来了，第二天进行写入写出测试时发现一些小错误：

1.        在电脑中打开静态页面时时可以使用

  <scripttype="text/javascript" src="../script/tiny_mce/tiny_mce.js"></script>   相对路径，

但要发布时就一定要使用发布时的路径了<script type="text/javascript" src="<%=path %>/script/tiny_mce/tiny_mce.js"></script>    

2.        tinyMCE就是一个javaScript写成的网页文本编辑器，使用时导入js文件，进行相应初始化配置就行了，但我在使用中却发现稍有不慎就会导致效果出不来，或出错。如HTML头部要写成

<head>    

       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

       <meta http-equiv="pragma" content="no-cache">

       <meta http-equiv="cache-control" content="no-cache">

       <meta http-equiv="expires" content="0">

       <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

       <meta http-equiv="description" content="This is my page">  

       <title>信息发布</title>

不能写作

    <head>

        <base href="<%=basePath%>">     

       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

       <meta http-equiv="pragma" content="no-cache">

       <meta http-equiv="cache-control" content="no-cache">

       <meta http-equiv="expires" content="0">

       <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

       <meta http-equiv="description" content="This is my page">  

       <title>信息发布</title>

 

多写一个<base href="<%=basePath%>">  文章编辑器就显示不出来。

3.        提交时的按钮属性不能设置为button，直接submit。

 

后记：我用的Struts2 +tinyMCE调试，相信在其它环境中同样可用。tinyMCE将textarea渲染后可以直接取值，例如：

<p><span style="font-size: small;">tinyMCE成功运行。</span></p>

取道的值存入数据库，取出来直接显示即可得到编辑好的文章。

tinyMCE成功运行

读书有感

朱熹

心如明镜一鉴开，天光云影共徘徊。

问渠那得清如许，为有源头活水来。

 

 

2009/3/8

刘杰