FCKeditor使用详解
2012-02-13 10:59
225 查看
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所示:
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>
<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,我们还需要对它进行一些配置.
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>
下面附一个工具栏说明表格:
表1:工具栏配置选项功能汇总
FCKeditor使用详解JAVA版(八)
14. 下来,我们对常用的一些设置选项功能进行总结,读者可参考fckeditor目录下fckconfig.js文件进行阅读。见表2
表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行配置 那些数组中的值就像当于界面上的一个功能,你可以强行把每组值试出来代表什么。
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 |
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是最重要的几个常选项
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行配置 那些数组中的值就像当于界面上的一个功能,你可以强行把每组值试出来代表什么。
相关文章推荐
- ASP.NET2.0 文本编辑器FCKeditor使用方法详解
- asp.net文本编辑器FCKeditor使用方法详解
- asp.net文本编辑器FCKeditor使用方法详解
- JSP使用FCKeditor详解
- asp.net文本编辑器FCKeditor使用方法详解
- ASP.NET2.0 文本编辑器FCKeditor使用方法详解
- HTML编辑器FCKeditor使用详解
- asp.net文本编辑器FCKeditor使用方法详解
- fckeditor使用详解
- HTML编辑器FCKeditor使用详解
- HTML编辑器FCKeditor使用详解 [转]
- FCKeditor使用详解(转载)
- ASP.NET2.0 文本编辑器FCKeditor使用方法详解
- 【.net】asp.net文本编辑器FCKeditor使用方法详解
- ASP.NET2.0 文本编辑器FCKeditor使用方法详解
- 学习:FCKeditor使用方法技术详解
- HTML 编辑器 FCKeditor使用详解
- FCKeditor使用方法技术详解
- HTML编辑器 FCKeditor 2.5.1 使用详解
- ASP.NET2.0 文本编辑器FCKeditor使用方法详解