TinyMCE的使用
http://tinymce.moxiecode.com/download.php
不要忘了下载语言包
下载之后解压就可以用了,先看一下目录结构。
+-docs 帮助文档
+-examples 几个例子
+-jscripts程序主体
+-+-tiny_mce
+-+-+-langs 语言
+-+-+-plugins 插件
+-+-+-themes 主题
+-+-+-utils 组件
将你下载的语言包tiny_mce下的文件覆盖同名目录下的文件就可以了。
然后你可以看一下doc下的说明文档好了,网上也有汉化的可以从以下地址下载http://www.inpeck.com/TinyMceManual/TinyMceManual.rar
其实使用方法很简单,一些参数的配置用的时候再查文档也可以。
可以参考一下官方给出的几个小例子也可以。下面给出一个简单的说明:
先建一个简单的html文件
<html>
<head>
<title>tiny_mce的例子</title>
<script language="javascript" type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
      tinyMCE.init({
             theme : "advanced",
             mode : "exact",
             elements : "aa",
             save_callback : "customSave",
             content_css : "example_advanced.css",
             extended_valid_elements : "a[href|target|name]",
             plugins : "table",
             language : "zh_cn",
             theme_advanced_buttons3_add_before : "tablecontrols,separator",             
             theme_advanced_styles : "Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1", // Theme specific setting CSS classes
                    debug : false
      });
</script>
</head>
<body>
下面是一个textarea,name是aa
<textarea name="aa" style="width:100%" rows="15">     
</textarea>
</body></html>
这样就可以将name=aa的textarea替换为tinymce。

参数比较多,最好参考文档做,

下面参考网上的一篇说明,地址是:

http://my.opera.com/smile_bug/blog/show.dml/261237

几个常用的参数说明:(在压缩包的docs里有详细的介绍)
mode: textareas/specific_textareas/exact
textareas: 替换当前页的所有textarea为编辑器
specific_textareas: 不是很明白(特定的textarea??),要配合 textarea_trigger使用
exact: 替换指定ID的div或者textarea为编辑器,要配合elements使用。如例子里说的。

theme: advanced/simple
advanced: 高级模式,功能比较多一点。(默认)
simple: 基本模式,只有基本的功能。

plugins: advhr/advimage/advlink/contextmenu/emotions/flash/autosave/style/layer/iespell/insertdatetime/paste/preview/print/save/noneditable/spellchecker/searchreplace/table/zoom/directionality/fullscreen/fullpage/inlinepopups/fullpage
这些是自带的一些插件,看名字基本上都能明白它的功能。在网站上还有一些其它功能的插件,可以自己去下,放在插件目录下就可以了。
("-"加上可以让MCE不试图从插件目录加载这个插件,如plugins : "table,contextmenu,paste,-externalplugin")

language: en/zh_cn/zh_cn_utf8……
设置使用的语言,网站上也有的下,需要注意的是中文简体和繁体都有两种uft8的,要确定你使用的页面的编码。
(eg:language : "en")

width:
height:
设置编辑器的宽度和高度

relative_urls: false/true,(默认:true)
remove_script_host: false/true,(默认:true)
(eg:relative_urls: false,
remove_script_host: false
这样内容会使用绝对路径,也就是会加上域名。)

theme_advanced_toolbar_location: top/bottom(默认:bottom)
theme_advanced_toolbar_align: left/center/right(默认:center)
theme_advanced_buttons<1-n>
theme_advanced_buttons<1-n>_add
theme_advanced_buttons<1-n>_add_before
这里是advanced主题下的几个设置
theme_advanced_toolbar_location,theme_advanced_toolbar_align,theme_advanced_statusbar_location 分别设置工具栏的位置,对齐方式,状态栏的位置
theme_advanced_buttons<1-n>设置第N排的按钮
theme_advanced_buttons<1-n>_add 添加一个按钮到第N排的后面
theme_advanced_buttons<1-n>_add_before 添加一个按钮到第N排的前面
(eg:theme_advanced_buttons3 : '',
theme_advanced_buttons2_add : "insertdate,inserttime",
theme_advanced_buttons2_add_before : "zoom"
这样就是第三排为空,也就是不显示,在第二排后面加入了插入日期和时间,第二排开始插入缩放)

 

研究一下参数,选择你最喜欢的一些配置,当然功能还是很多了,多看看文档吧,以后就可以很方便的应用到你的工程中了。

 

posted on 2008-04-10 11:47  niugm  阅读(1023)  评论(0编辑  收藏  举报