TinyMCE使用/集成/设置/详解(2)

0 star

几个常用的参数说明:(在压缩包的docs里有详细的介绍)
mode: textareas/specific_textareas/exact
textareas:
替换当前页的所有textarea为编辑器
specific_textareas:
不是很明白(特定的textarea??),要配合 textarea_trigger使用
exact:
替换指定IDdiv或者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_aligntheme_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"
这样就是第三排为空,也就是不显示,在第二排后面加入了插入日期和时间,第二排开始插入缩放)

 

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

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

使用:

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目录)。

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。加了上面的代码后就不会自动改写了。

0 回答