FCKeditor入门教程之一：配置及简单运行篇

sxpujs · 发表于 2013-2-7 19:49:52

1.FCKeditor官方网站：http://www.fckeditor.net/

2.下载FCKeditor资源文件：http://www.fckeditor.net/download
其中有：FCKeditor 2.6.4.zip以及FCKeditor.Java

3.学习文档：
点击菜单栏的Docs，里面有详细的指导文档，网址是：http://docs.fckeditor.net/
点击其中的FCKeditor 2.x其中的Developer's Guide学习如何安装，配置，升级和定制FCKeditor

4.安装FCKeditor
把名为"fckeditor"的目录解压到你的web站点根目录，在j2ee项目中，也就是webRoot目录下面。

5.检查安装是否成功
http://<your site>/<FCKeditor installation path>/_samples/default.html
如：http://localhost:8088/myfckeditor/fckeditor/_samples/default.html
目录结构如下：

6.FCKeditor对象的属性
属性名                  描述            默认值
Width                  宽度                            100%
Height                 高度                        200
Value             编辑器初始化内容         空字符串
ToolbarSet    工具条集合的名称       （内置有Default和Basic,也可以自己定制）        Default
BasePath       编辑器的基路径          /fckeditor/

构造器
var FCKeditor = function(instanceName,width,height,toolbarSet,value);
其中instanceName为编辑器输出的textarea元素的name属性的值，必须指定
参数会赋值给同名属性

7,javascript调用方式:
方式一：
test1.html源代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>test1.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="fckeditor/fckeditor.js"></script></head><body>This is my HTML page.<br><script type="text/javascript">var oFCKeditor = new FCKeditor('FCKeditor1');oFCKeditor.BasePath = "/myfckeditor/fckeditor/";oFCKeditor.Create();</script></body></html>
效果图如下：

方式二：
test2.html源代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>test2.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="fckeditor/fckeditor.js"></script><script type="text/javascript">window.onload = function(){var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;oFCKeditor.BasePath = "/myfckeditor/fckeditor/" ;oFCKeditor.ReplaceTextarea() ;}</script></head><body><textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea></body></html>
显示效果如下：

在方式一中，我们还可以作如下设置：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>test1.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="fckeditor/fckeditor.js"></script></head><body>This is my HTML page.<br><script type="text/javascript">var oFCKeditor = new FCKeditor('FCKeditor1');oFCKeditor.BasePath = "/myfckeditor/fckeditor/";oFCKeditor.Width = "50%";oFCKeditor.Height = "400";oFCKeditor.Value = "initial value";oFCKeditor.ToolbarSet = "Basic";oFCKeditor.Create();</script></body></html>
效果图如下：

		自动登录	找回密码
密码			立即注册