TinyMCE

来自站长百科
跳转至: 导航、​ 搜索
TinyMCE Logo.jpg

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

安装说明[ ]

TinyMCE的安装很简单,只需按照下面的说明。我们提供几个整合TinyMCE的例子,你应该先看看TinyMCE的广泛配置选项。

安装需求

除了浏览器兼容性TinyMCE没有直接的需求,当然,需要Javascript的支持;

后台不需要TinyMCE代码;

TinyMCE可以使用HTML表单的textarea作为工作区域,当提交表单时,你可以让你的系统操作textarea的内容,例如保存HTML代码到数据库或文件。前台也可以使用已经存在的内容初始化,以便可以进行更改。参考配置选项、一般配置、模式了解更多信息。

Windows下具体Apache配置

你可能会在Windows下安装时遇到如tinyMCE没有定义或属性列表后缺少“}”的错误。

问题是由默认的Apache选项EnableSendfile导致,你必须在httpd.conf文件中,去掉EnableSendfile选项前面的“#”,将该EnableSendfile关闭。

附注:TinyMCE没有定义或丢失也有可能是因为你没有在页面Header中指定正确的js路径。检测js路径正确之前,先改变Apache的设置。

下载

下载地址1上下载。

解压

在Windows下你可以使用诸如winzip或其他类似软件解压,其他系统如Linux系统,只需使用tar命令就可以解压。你可以找到如何在linux下解压存档文件的例子。

你应该将TinyMCE解压到wwwroot目录或网站的根目录下。

使用shell解压的示例:

$ cd wwwroot
$ gzip -d tinymce_1_44.tar.gz
$ tar xvf tinymce_1_44.tar

解压后的文档结构:

/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/

站点配置

解压完成后,你需要编辑页面,包括TinyMCE的配置及Javascript。请注意,你或许应该在需要的页面中添加TinyMCE的javascript引用,而不是站点的所有页面都需要。注意要正确的知道js文件的路径。

最基本的XHTML 1.1页面整合(将页面中所有textarea元素转化为编辑器)

请在测试下面的代码前务必阅读两个注释(<!—开始):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>TinyMCE Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
     mode : "textareas"
});
</script>
</head>
<body>
<form method="post" action="show.php">
    <p>	
       <textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea>
       <input type="submit" value="Save" />
     </p>
 </form>
</body>
</html>

本例中的保存按钮将textarea的内容发生给show.php文件,该文件会简单的显示提交的内容,如果你的代码形如(当然你也可以更加需要的将内容写入文件或数据库):

<?php
/* post.php : this page shows what insert.php has sent */
echo(stripslashes($_POST['content']));
?>

添加多个按钮

稍微改动一下代码:

<script type="text/javascript">
tinyMCE.init({
    mode : "textareas"
});
</script>

改为:

<script type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode : "textareas",
plugins : "fullpage",
theme_advanced_buttons3_add : "fullpage"
});
</script>

结论:这一部分将控制编辑器的外观和功能,你可以根据TinyMCE:Configuration,结合自己的实际来进行配置。


插件开发[ ]

TinyMCE插件开发

相关资源[ ]

官方地址:http://tinymce.moxiecode.com/

软件类型:开源软件

下载地址:下载地址1 下载地址2

相关条目[ ]

参考来源[ ]