TinyMce介绍与使用心得

原创 2006年06月01日 18:56:00
TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方面虽然不能称得上是最强,但绝对能够满足大部分网站的需求,并且功能配置灵活简单。另一特点是加载速度非常快,如果你的服务器采用的脚本语言是PHP,那还可以进一步优化。最重要的是,TinyMCE是一个根据LGPL license发布的自由软件,你可以把它用于商业应用。

TinyMCE实例


上面是一个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"></script>
<script language="javascript" type="text/javascript">
	tinyMCE.init({
		mode : "textareas",
		theme : "advanced",
		language :"zh_cn"
	});
</script>
<!-- /tinyMCE -->
这里假设页面与jscripts/处于同一目录下,否则请修改代码里的路径。
现在页面里所有的textarea元素就会被渲染成TinyMCE实例。

3、初始化配置介绍:
tinyMCE.init({
	mode : "exact",
	elements : "example_textarea",
	theme : "advanced",
	language :"zh_cn",
	plugins : "flash,emotions,paste",
	theme_advanced_buttons1 : "bold,italic,underline,
		strikethrough, separator, forecolor,backcolor,
		fontselect,fontsizeselect",
	theme_advanced_buttons2_add_before: "cut,copy,
		pastetext,separator",
	theme_advanced_buttons2 : "undo,redo,separator,hr,
		link,unlink,image,flash,separator",
	theme_advanced_buttons2_add :"code,emotions,charmap",
	theme_advanced_buttons3 : "",
	theme_advanced_toolbar_location : "bottom",
	theme_advanced_toolbar_align : "center",
	relative_urls : false,
	remove_script_host : false
});
  • 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.leexuan.com/2006/03/abc.html改成相对路径/2006/03/abc.html。加了上面的代码后就不会自动改写了。

这个简单配置比较适合一般网站的应用,关于TinyMCE更强大的功能,可以研究下DOC文档。以上是本人的一些心得体会,如果有错误欢迎指正!
后记:
默认的按钮
bold
italic
underline
strikethrough
justifyleft
justifycenter
justifyright
justifyfull
bullist
numlist
outdent
indent
cut
copy
paste
undo
redo
link
unlink
image
cleanup
help
code
hr
removeformat
formatselect
fontselect
fontsizeselect
styleselect
sub
sup
forecolor
backcolor
charmap
visualaid
anchor
newdocument
separator
Plugins的按钮:
save
emotions
flash
iespell
preview
print
zoom
fullscreen
advhr
fullpage
调用:
tinyMCE.init({
theme : "advanced",
mode : "textareas",
plugins : "print",
theme_advanced_buttons3_add : "print"
});

相关文章推荐

TinyMce介绍、环境配置与使用心得

TinyMCE 是一个基于浏览器的所见即所得编辑器,它使用户可以方便的编辑HTML内容。它非常灵活并且是为系统集成而设计的,比如在Intranets、CMS、LMS等系统中应用。     特点 ...
  • chy800
  • chy800
  • 2012年02月21日 11:52
  • 3143

在Django中使用最新版tinymce

初次使用时候使用django-tinymyce。但是使用过程中发现功能不全,不大好用。从新google一下。发现1个http://vimeo.com/12903891。在他基础上修改。 使用...
  • watsy
  • watsy
  • 2013年08月01日 14:11
  • 2896

django admin中使用 tinymce 富文本编译器

在django的admin后台使用tinymce富文本编译器,自定义添加截图及上传图片功能。...

Django-- Tinymce在线编辑器的使用

在网站后台编辑博文,必须得使用一个富文本编辑器,不然就得手打html标签。django站点中使用tinymce编辑器的居多,使用方法网上很容易搜得到,因为我的这个站点是部署在webfaction主机空...

tinymce jquery版使用记载

引入文件 初始化

jquery.boxy.js和tinymce结合使用 出了bug

无标题文档 function showEmail(){ //弹出书写邮件的窗口   //这个使用ajax,get方法把html元素传给Boxy显示,这个方法tinymce不能传过来...

tinyMCE使用详解

初始化在初始化TinyMCE的时候,需要把以下代码加入到页面的HEAD标签中。按以下例子中的设置,所有的TEXTAREA文本域在页面加载时将被转换成编辑器。另外还有其他模块,我们将在后面详细讲述。...

django中如何使用tinymce

tinymce是一种富文本编辑器,本文主要介绍如何在django中使用tinymce这个插件,包括在前台展示和在后台admin中显示          前台页面:                 ...

tinyMCE 使用汇总

tinymce的官网:http://www.tinymce.com/1.tinymce的使用详解http://www.iwms.net/n2065c17.aspx初始化在初始化TinyMCE的时候,需...

Pligg中tinyMCE插件的汉化和使用 威帖网 ourtips.net

在Pligg  submit.php 中的对content 的提交做的并不是很好,界面过于单调,不利于编辑,最重要的是转码问题,比如,你提交一段代码包含 < 和 > 必须得转换成 <和 >...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:TinyMce介绍与使用心得
举报原因:
原因补充:

(最多只允许输入30个字)