TinyMCE的使用

最新推荐文章于 2023-11-10 14:48:48 发布

chaochao0325

最新推荐文章于 2023-11-10 14:48:48 发布

阅读量5.8k

点赞数

文章标签： tinymce header plugins javascript 文档 styles

本文链接：https://blog.csdn.net/chaochao0325/article/details/1007889

版权

TinyMCE的使用

Tinymce是一个开源所见即所得的纯js在线编辑器，用起来特别的方便，我现在下载的是2.0.6.1 ，可以到官方网站下载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"
这样就是第三排为空，也就是不显示，在第二排后面加入了插入日期和时间，第二排开始插入缩放）