{ Hauy`s blog } Inpeck.com

专注于用户体验、交互设计、web前端技术和web标准化建设。

转载:TinyMce介绍与使用心得

2006.06.06 - 暂无评论 »

以下内容转载自 http://www.leexuan.com

TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方面虽然不能称得上是最强,但绝对能够满足大部分网站的需求,并且功能配置灵活简单。另一特点是加载速度非常快,如果你的服务器采用的脚本语言是PHP,那还可以进一步优化。最重要的是,TinyMCE是一个根据LGPL license发布的自由软件,你可以把它用于商业应用。
http://www.leexuan.com/upload/tinymce_example.png
上面是一个TinyMCE的实例,我将根据自己的使用心得来介绍一下相关的安装配置。

另外根据最新发布的TinyMCE_2.0.3_RC1(2006.2.13),我做了一个TinyMCE中文精简版,美化了中文的显示和删除了多余的语言包并增加UTF8编码的中文包,具体修改说明见压缩包里的说明文件。

下载:TinyMCE中文精简版

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/<plugin folders>
/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、然后在需要使用TinyMCE的页面里加入如下的JS代码:

<!– tinyMCE –>
<script language=”javascript” type=”text/javascript”
src=”jscripts/tiny_mce/tiny_mce.js” mce_src=”jscripts/tiny_mce/tiny_mce.js”></script>
<script language=”javascript” type=”text/javascript”>
$nbsp$$nbsp$tinyMCE.init({
$nbsp$$nbsp$$nbsp$$nbsp$mode : “textareas”,
$nbsp$$nbsp$$nbsp$$nbsp$theme : “advanced”,
$nbsp$$nbsp$$nbsp$$nbsp$language :”zh_cn”
$nbsp$$nbsp$});
</script>
<!– /tinyMCE –>

这里假设页面与jscripts/处于同一目录下,否则请修改代码里的路径。
现在页面里所有的textarea元素就会被渲染成TinyMCE实例。

3、初始化配置介绍:

tinyMCE.init({
$nbsp$$nbsp$mode : “exact”,
$nbsp$$nbsp$elements : “example_textarea”,
$nbsp$$nbsp$theme : “advanced”,
$nbsp$$nbsp$language :”zh_cn”,
$nbsp$$nbsp$plugins : “flash,emotions,paste”,
$nbsp$$nbsp$theme_advanced_buttons1 : “bold,italic,underline,
$nbsp$$nbsp$$nbsp$$nbsp$strikethrough, separator, forecolor,backcolor,
$nbsp$$nbsp$$nbsp$$nbsp$fontselect,fontsizeselect”,
$nbsp$$nbsp$theme_advanced_buttons2_add_before: “cut,copy,
$nbsp$$nbsp$$nbsp$$nbsp$pastetext,separator”,
$nbsp$$nbsp$theme_advanced_buttons2 : “undo,redo,separator,hr,
$nbsp$$nbsp$$nbsp$$nbsp$link,unlink,image,flash,separator”,
$nbsp$$nbsp$theme_advanced_buttons2_add :”code,emotions,charmap”,
$nbsp$$nbsp$theme_advanced_buttons3 : “”,
$nbsp$$nbsp$theme_advanced_toolbar_location : “bottom”,
$nbsp$$nbsp$theme_advanced_toolbar_align : “center”,
$nbsp$$nbsp$relative_urls : false,
$nbsp$$nbsp$remove_script_host : false
});
    [1]mode与elements是搭配使用的,用来指定渲染name在elements中的HTML元素为TinyMCE编辑器(可以是DIV或者Textarea),比如:
    mode : “exact”,elements : “example_textarea”
    也可以单独用 mode : “textareas”,这样页面中所有的Textarea元素都会被渲染。 

    [2]theme 可以是advanced或者simple(受功能限制),也可以自定义主题。

    [3]language 常用选择可以是:en,zh_cn,zh_cn_utf8,zh_tw,zh_tw_utf8(和语言包名字对应)

    [4]plugins 用来指定加载相应的插件,以提供特别功能

    [5]theme_advanced_buttons 后面的数字用来指定工具栏的第几行,前3行可以不写,系统会自动用默认图标填在前3个工具栏,如果你不想显示前3行,可以像例子里面一样这样写:theme_advanced_buttons3 : “”,_add_before后缀指在默认工具栏前面加图标,_add后缀指在默认工具栏后面加图标,具体每个按钮资料可以查看文档(/doc目录)。

    [6]theme_advanced_toolbar_location和theme_advanced_toolbar_align很简单,一看就明白。

    [7]relative_urls : false,remove_script_host : false一般也配对使用,因为TinyMce会自动把本地链接改成相对链接的形式,比如会把绝对路径 http://www.leexuan.com/2006/03/abc.html 改成相对路径 /2006/03/abc.html 。加了上面的代码后就不会自动改写了。

这个简单配置比较适合一般网站的应用,关于TinyMCE更强大的功能,可以研究下DOC文档。

分类: 客户端脚本 -

引用 (Trackbacks)

使用这个网址对这篇文章进行引用。


评论

订阅这篇文章评论的RSS聚合
暂时没有评论

发表您的评论


(必填)
添加blog地址

搜索

输入关键词并按回车进行搜索

页面

文档


按月存档:

订阅

通过FeedBurner订阅
通过Feedsky订阅

链接


我的 Google Reader 分享

我的饭否

同步



程序提供:WordPress 主题设计:Dalarnas

{ Hauy`s blog } Inpeck.com © 2008 — 保留部分权利