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、然后在需要使用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目录)。
/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、然后在需要使用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很简单,一看就明白。
http://www.blogjava.net/jjshcc/archive/2010/05/15/321021.html