FCKeditor使用详解

 

FCKeditor使用详解JAVA版(一)

1、概述

FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了FCKeditor(如百度,阿里巴巴)。

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

FCKeditor Wiki:http://wiki.fckeditor.net/

2、下载FCKeditor

登录FCKeditor官方站(http://www.fckeditor.net),点击网站右上角“Download”链接。目前最新版本为2.6.4

如图1所示:

 

FCKeditor使用详解JAVA版(二)

3、安装FCKeditor

       解压“FCKeditor_2.6.4.zip”文档到您的网站目录下,我们先假定您存放FCKeditor和调用脚本存于同一个目录下。fckeditor目录包含FCKeditor_2.6.4程序文件。

1、解压FCKeditor_2.2.zip,(FCKeditor主文件),将FCKeditor目录复制到网站根目录下,

2、解压FCKeditor-2.3.zip,(JSP,FCKeditor整合包),作用:This is the JSP Integration Pack for using FCKeditor inside a java server page without the complexity of using a Java scriptlets or the javascript api.

3、将FCKeditor-2.3/web/WEB-INF/web.xml中的两个servlet,servlet-mapping定义复制到自已项目的web.xml文件中,修改

1.           <servlet-mapping>   

2.           <servlet-name>Connector</servlet-name>   

3.           <url-pattern>/editor/filemanager/browser/default/connectors/jsp/connector

4.           </url-pattern>   

5.           </servlet-mapping>   

6.            

7.           <servlet-mapping>   

8.           <servlet-name>SimpleUploader</servlet-name>   

9.           <url-pattern>/editor/filemanager/upload/simpleuploader</url-pattern> 

10.       </servlet-mapping>  

11.       <servlet-mapping>   

12.       <servlet-name>Connector</servlet-name>   

13.       <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector
</url-pattern>   

14.       </servlet-mapping>   

15.        

16.       <servlet-mapping>   

17.       <servlet-name>SimpleUploader</servlet-name>   

18.       <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploader</url-pattern> 

19.       </servlet-mapping>  

4、将FCKeditor-2.3/web/WEB-INF/lib目录下文件复制到自已项目的lib文件夹中

5、在需JSP使用FCKeditor的界面中加入:

20.       // 文件开头处加入   

21.       <%@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="FCK" %>   

22.       //要使用的地方加入   

23.       <FCK:editor id="content" basePath="/FCKeditor/"   

24.       imageBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?
Type=Image&Connector=connectors/jsp/connector"   

25.       linkBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?
Connector=connectors/jsp/connector"   

26.       flashBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?
Type=Flash&Connector=connectors/jsp/connector"   

27.       imageUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"   

28.       linkUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"   

29.       flashUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">   

30.       this is default content :)   

31.       </FCK:editor>  

3.1、在JSP中使用Fckeditor

       调用FCKeditor必须先载入FCKeditor js文件。具体代码如下。

<script type="text/javascript" src="/path/fckeditor/fckeditor.js"></script>

创建编辑器有三种方法,这里只介绍渲染<textarea>和用Javascript创建编辑器的方法:

第一种:渲染<textarea>

              先在JSP或者HTML页面中创建一个<textarea rows=”10” cols=”20” name=”content”>,指定它的名字,比如我们这个<textarea>的名字是:content。然后在<head></head>中间加上:

<script type="text/javascript">

       window.onload = function()

       {

       var oFCKeditor = new FCKeditor('content') ;

       oFCKeditor.BasePath = "/path/fckeditor/";

       oFCKeditor.Width="100%";

       oFCKeditor.Height="430";

       oFCKeditor.ReplaceTextarea() ;

       }

    </script>

 

第二种:使用JavaScript创建编辑器:

       在你希望编辑器出现的位置,加上:

<script type="text/javascript">

var oFCKeditor = new FCKeditor('content');

           oFCKeditor.BasePath = "/ path/fckeditor/";

           oFCKeditor.ToolbarSet = "Default";

           oFCKeditor.Width="100%";

           oFCKeditor.Height="430";

           oFCKeditor.Create();

       </script>

这样,我们的编辑器就创建好了。但是为了更好的使用Fckeditor,我们还需要对它进行一些配置.

 

 

FCKeditor使用详解JAVA版(三)

3.2、配置篇:

 

首先,我们创建自己的配置文件,在fckeditor目录下,我们创建一个myconfig.js,和fckeditor.js处于同级目录下。

1.       Fckeditor默认语言是英文的,所以,我们第一件事情就是把它改成中文的。

我们在自己的配置文件中,加入下面两句话:

FCKConfig.AutoDetectLanguage = false ;

FCKConfig.DefaultLanguage = 'zh-cn' ;

第一句话的意思是说,不要让Fckeditor自动检测语言,第二句话就是把默认语言改成中文。

2.       我们再来定义皮肤;Fckeditor默认的皮肤很难看,最起码我个人就不喜欢它的默认风格,所以我要把它改掉。在Fckeditor中定义了一套office2003的皮肤,我们就用它。在我们的配置文件中加入:

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/';

3.       Fckeditor中,按Shift+Enter默认是换行,按Enter默认是一个段落,这显然不符合我们的操作习惯,我们也来改一下,还是在我们的配置文件中,加入下面这两句话:

FCKConfig.EnterMode = 'br'; 

FCKConfig.ShiftEnterMode = 'p';

4.       下来定义字体,Fckeditor默认没有中文字体,我们来加几个常用字体:

FCKConfig.FontNames      = '宋体;幼圆;隶书;楷体_GB2312;黑体;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;' ;

 

5.       字体大小,加入下面这句话:

FCKConfig.FontSizes      = '12px;14px;16px;18px;24px;26px;28px;32px;' ;

FCKeditor使用详解JAVA版(四)

6.       自定义表情:

将fckeditor/editor/ fck_image.html中的<body>改成<body scroll="no" style="overflow: hidden">,然后在fckeditor/images/smiley/下建立一个表情目录,比如我建立一个叫taobao的目录,然后将自己的表情加进去。接下来我们在配置文件中加入:

FCKConfig.SmileyPath  = FCKConfig.BasePath + 'images/smiley/taobao/' ;

FCKConfig.SmileyImages   = ['0.gif','086.gif','01.gif','02.gif','03.gif','04.gif','05.gif','06.gif',

'07.gif','08.gif','09.gif','010.gif','011.gif','012.gif','013.gif',

'014.gif','01.gif','016.gif','017.gif','018.gif','019.gif','020.gif',

'021.gif','022.gif','023.gif','024.gif','025.gif','026.gif','027.gif',

'028.gif','029.gif','030.gif','031.gif','032.gif','033.gif','034.gif',

'035.gif','036.gif','037.gif','038.gif','039.gif','040.gif','041.gif',

'042.gif','043.gif','044.gif','045.gif','046.gif','047.gif','048.gif',

'049.gif','050.gif','051.gif','052.gif','053.gif','054.gif','055.gif',

'056.gif','057.gif','058.gif','09.gif','060.gif','061.gif','062.gif',

'063.gif','064.gif','065.gif','066.gif','067.gif','068.gif','069.gif',

'070.gif','071.gif','072.gif','073.gif','074.gif','075.gif','076.gif',

'077.gif','078.gif','079.gif','080.gif','081.gif','082.gif','083.gif',

'084.gif'] ;

然后指定表情的列数,和表情框的宽度、高度:

FCKConfig.SmileyColumns = 8 ;

FCKConfig.SmileyWindowWidth = 650 ;

FCKConfig.SmileyWindowHeight = 480 ;

FCKeditor使用详解JAVA版(五)

10.       解决上传中文乱码问题和重命名文件:修改ConnectorServlet.java

 

重命名文件名:

 

 

FCKeditor使用详解JAVA版(六)

11.       Peoperties文件的配置:参考下面:

 

# 允许上传的文件类型

connector.resourceType.file.extensions.allowed = 7z|aiff|asf|avi|bmp|csv|doc|fla|flv|gif|gz|gzip|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|ods|odt|pdf|png|ppt|pxd|qt|ram|rar|rm|rmi|rmvb|rtf|sdc|sitd|swf|sxc|sxw|tar|tgz|tif|tiff|txt|vsd|wav|wma|wmv|xls|xml|zip

connector.resourceType.image.extensions.allowed = bmp|gif|jpeg|jpg|png

connector.resourceType.flash.extensions.allowed = swf|fla

connector.resourceType.media.extensions.allowed = aiff|asf|avi|bmp|fla|flv|gif|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|png|qt|ram|rm|rmi|rmvb|swf|tif|tiff|wav|wma|wmv

 

# 上传资源默认路径

connector.resourceType.file.path = /file

connector.resourceType.image.path = /image

connector.resourceType.flash.path = /flash

connector.resourceType.media.path = /media

 

# 强制一个文件名只能有一个“.”符号

connector.forceSingleExtension = true

 

# 默认的上传路径,为上下文的相对路径

connector.userFilesPath = /userfiles

 

# 是否显示全路径

connector.fullUrl = false

 

# 这个如果设置为true,则Fckeditor会检查目录中是否有相同的文件,如果有就

# 会对这个文件进行重命名

connector.secureImageUploads = true

 

# fckeditor相对于Context的路径

fckeditor.basePath = /fckeditor

 

# fckeditor的默认高度

fckeditor.height = 200

 

# 默认的工具栏

fckeditor.toolbarSet = Default

 

# 默认的宽度

fckeditor.width = 100%

 

# 一些提示信息

message.enabled_tag.compatible_browser.no = Your browser is not compatible

message.enabled_tag.compatible_browser.yes = Your browser is fully compatible

message.enabled_tag.connector.file_browsing.disabled = The Connector is disabled for FileBrowsing

message.enabled_tag.connector.file_browsing.enabled = The Connector is enabled for FileBrowsing

message.enabled_tag.connector.file_upload.disabled = The Connector is disabled for FileUpload

message.enabled_tag.connector.file_upload.enabled = The Connector is enabled for FileUpload

FCKeditor使用详解JAVA版(七)

12.       文件的上传:

如果要上传文件,需要下载一个apache http server,然后在安装目录下,找到conf目录,找到httpd.conf文件。在最下面加上:

 

Alias /image/ "D:/icis/icon/image/"

<Directory "D:/icis/icon/image/">

AllowOverride None

Options all

Order allow,deny

Allow from all

</Directory>

 

因为我是windows的环境,所以用的是绝对路径,如果要用到linux上,则到apache的官网上下载linux下的apache http server程序,然后按照这种方式进行配置就可以了。

Server配置好了以后,我们需要在properties文件中加上这两句话:

connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl

connector.userFilesPath=D:/icis/icon

第一句话是上传文件一定要加的,具体可以参考官方文档,第二句话就是指定我们刚才在server中的目录。这样,我们上传的文件就交给apache http server来管理了。

 

13.       自定义工具栏:

在我们的配置文件中,来定义我们自己的工具栏,比如下面:

FCKConfig.ToolbarSets["usersBar"] = [

    ['Save','Preview','Bold','Italic','Underline','StrikeThrough','-'],

    ['Outdent','Indent','Blockquote','CreateDiv'],

    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],

    ['FontFormat','FontName','FontSize'],

    ['TextColor','BGColor','Smiley']   // No comma for the last row.

] ;

其中"usersBar"是我们自己的工具栏名称,那么我们来在页面中调用这个工具栏:

<script type="text/javascript">

    var oFCKeditor = new FCKeditor('content');

    oFCKeditor.BasePath = "/path/fckeditor/";                   oFCKeditor.Config["CustomConfigurationsPath"]="/path/fckeditor/myconfig.js";

       oFCKeditor.ToolbarSet = "usersBar";

       oFCKeditor.Width="100%";

       oFCKeditor.Height="330";

       oFCKeditor.Create();

</script>

下面附一个工具栏说明表格:

 

代码名称

功能

代码名称

功能

Source

源代码

DocProps

页面属性

-

|分隔符

Save

保存

NewPage

新建

Preview

预览

Templates

模板

Cut

剪切

Copy

复制

Paste

粘贴

PasteText

粘贴为无格式文本

PasteWord

从MS Word粘贴

Print

打印

SpellCheck

拼写检查

Undo

撤消

Redo

重做

Find

查找

Replace

替换

SelectAll

全选

RemoveFormat

清除格式

Form

表单

Checkbox

复选框

Radio

单选框

TextField

单行文本

Textarea

多行文本

Select

列表菜单

Button

按钮

ImageButton

图像域

HiddenField

隐藏域

Bold

加粗

Italic

倾斜

Underline

下划线

StrikeThrough

删除线

Subscript

下标

Superscript

上标

OrderedList

插入/删除编号列表

UnorderedList

插入/删除项目列表

Outdent

减少缩进

Indent

增加缩进

JustifyLeft

左对齐

JustifyCenter

居中对齐

JustifyRight

右对齐

JustifyFull

两端对齐

Link

插入/编辑链接

Unlink

取消链接

Anchor

插入/编辑锚点链接

Image

插入编辑图像

Flash

插入/编辑Flash

Table

插入/编辑表格

Rule

插入水平线

Smiley

插入表情

SpecialChar

插入特殊符号

PageBreak

插入分页

Style

样式

FontFormat

格式

FontName

字体

FontSize

大小

TextColor

文本颜色

BGColor

背景颜色

FitWindow

全屏编辑

About

关于Fuckeditor

 

 

表1:工具栏配置选项功能汇总

FCKeditor使用详解JAVA版(八)

14.       下来,我们对常用的一些设置选项功能进行总结,读者可参考fckeditor目录下fckconfig.js文件进行阅读。见表2

 

FCKConfig.AutoDetectLanguage

自动语言检查

FCKConfig.DefaultLanguage       

默认语言设计,建议改成zh-cn

FCKConfig.ContextMenu

右键菜单内容

FCKConfig.ToolbarStartExpanded

当页面载入的时候,工具栏默认情况下是否展开

FCKConfig.FontColors

文字颜色列表

FCKConfig.FontNames 

字体列表,可加入国内常用的字体,如宋体、揩体、黑体等

FCKConfig.FontSizes

字号列表

FCKConfig.FontFormats

文字格式列表

FCKConfig.StylesXmlPath

指定风格XML文件路径

FCKConfig.TemplatesXmlPath

指定模板XML文件路径

FCKConfig.BodyId

设置编辑器的id

FCKConfig.BodyClass

设置编辑器的class

FCKConfig.DefaultLinkTarget

设置链接默认情况下的target属性

FCKConfig.BaseHref

相对链接的基地址

FCKConfig.SkinPath

设置默认皮肤路径

FCKConfig.SmileyPath

表情文件路径,您可以设置此项更改表情

FCKConfig.SmileyImage

表情文件

FCKConfig.SmileyColumns

将表情分成几列显示

FCKConfig.SmileyWindowWidth

显示表情窗口的宽度,单位像素

FCKConfig.SmileyWindowHeight

显示表情窗口的高度,单位像素

表2:常用设置选项功能汇总

 

表2是最重要的几个常选项

4、FCKeditor Api

最详细的FCKeditor Api文档默过于官方wiki提供的文档了。

FCKeditor Api官方文档地址:http://wiki.fckeditor.net/Developer's_Guide/Javascript_API

下面提供国内某网友的翻译文档,转载地址:http://blog.imwebs.com/article.asp?id=322

 

FCK 编辑器加载后,将会注册一个全局的 FCKeditorAPI 对象。


FCKeditorAPI 对象在页面加载期间是无效的,直到页面加载完成。如果需要交互式地知道 FCK 编辑器已经加载完成,可使用"FCKeditor_OnComplete"函数。
<script type="text/javascript">
function FCKeditor_OnComplete(editorInstance) {
  FCKeditorAPI.GetInstance('FCKeditor1').Commands.GetCommand('FitWindow').Execute();
}
</script>

在当前页获得 FCK 编辑器实例:
var Editor = FCKeditorAPI.GetInstance('InstanceName');

从 FCK 编辑器的弹出窗口中获得 FCK 编辑器实例:
var Editor = window.parent.InnerDialogLoaded().FCK;

从框架页面的子框架中获得其它子框架的 FCK 编辑器实例:
var Editor = window.FrameName.FCKeditorAPI.GetInstance('InstanceName');

从页面弹出窗口中获得父窗口的 FCK 编辑器实例:
var Editor = opener.FCKeditorAPI.GetInstance('InstanceName');

获得 FCK 编辑器的内容:
oEditor.GetXHTML(formatted); // formatted 为:true|false,表示是否按HTML格式取出
也可用:
oEditor.GetXHTML();

设置 FCK 编辑器的内容:
oEditor.SetHTML("content", false); // 第二个参数为:true|false,是否以所见即所得方式设置其内容。此方法常用于"设置初始值"或"表单重置"哦作。

插入内容到 FCK 编辑器:
oEditor.InsertHtml("html"); // "html"为HTML文本

检查 FCK 编辑器内容是否发生变化:
oEditor.IsDirty();

在 FCK 编辑器之外调用 FCK 编辑器工具条命令:
命令列表如下:
-------------------------------------
DocProps, Templates, Link, Unlink, Anchor, BulletedList, NumberedList, About, Find, Replace, Image, Flash, SpecialChar, Smiley, Table, TableProp, TableCellProp, UniversalKey, Style, FontName, FontSize, FontFormat, Source, Preview, Save, NewPage, PageBreak, TextColor, BGColor, PasteText, PasteWord, TableInsertRow, TableDeleteRows, TableInsertColumn, TableDeleteColumns, TableInsertCell, TableDeleteCells, TableMergeCells, TableSplitCell, TableDelete, Form, Checkbox, Radio, TextField, Textarea, HiddenField, Button, Select, ImageButton, SpellCheck, FitWindow, Undo, Redo
-------------------------------------
使用方法如下:
-------------------------------------
oEditor.Commands.GetCommand('FitWindow').Execute();
-------------------------------------

5、精简FCKeditor文件空间大小

1.将FCKeditor目录下及子目录下所有以”_”下划线开头的文件夹删除
2.FCKeditor根目录下只保留fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml其余全部删除
3.将editor/filemanager/upload目录下文件及文件夹清空.
4.还可以将editor/skins目录下的皮肤文件删除,只留下default一套皮肤(如果你不需要换皮肤的话)
5.还可以将editor/lang目录下文件删除,只保留en.js, fcklanguagemanager.js, zh-cn.js, zh.js文件(英文,简体中文,繁体中文一般应该够用了:) )

完成,现在看是不是清爽了很多?

其它问题:

在struts+spring+hibernate中使用,上传图像功能中可能会出现报:The output format must have a '{http://xml.apache.org/xalan}content-handler' property!错的情况,将WEB-INF/lib目录下xalan*.jar删除试试

安全问题:

假如在前台让普通用户也能JSP使用FCKeditor,要注意相关安全问题,在前台使用时,不要使用默认的ToolBar,
要将添加图像,flash,图像域按钮去掉
在fckconfig.js中大约78行配置  那些数组中的值就像当于界面上的一个功能,你可以强行把每组值试出来代表什么。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值