FCKEditor
FCKeditor是sourceforge.net上面的一个开源项目,主要是实现在线网页编辑器的功能,可以让web程序拥有如MS Word这样强大的编辑功能。
官方网站为http://www.fckeditor.net。
sourceforge.net是一个非常出名的支持开源运动的网站。
在官方网站下载fckeditor
注意要下载两个包
一个是主文件
一个是java整合包的。
可以直接在它的官网(http://www.fckeditor.net/)上下载
1.1 在应用中使用 FCKEditor
l 第一步:导入FCKEditor
将下载的FCKeditor_2.6.4.1.zip文件解压后,把fckeditor文件夹复制到应用程序中的WEBRoot目录中,复制五个jar包到应用程序中的../webRoot/WEB-INF/lib目录下
l 第二步:在页面中应用FCKEditor
方法一:使用FCKeditor对象创建编辑器
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<body> <script type="text/javascript"> var oFCKeditor = new FCKeditor('FCKeditor1'); oFCKeditor.BasePath = "${pageContext.request.contextPath }/fckeditor/"; oFCKeditor.Create(); </script> </body> |
方法二:通过替换一个textarea来创建编辑器
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<body> <textarea name="fckeditor1"></textarea> <script type="text/javascript"> var oFCKeditor = new FCKeditor('fckeditor1') ; oFCKeditor.BasePath = "${pageContext.request.contextPath}/fckeditor/" ; //oFCKeditor.ToolbarSet = 'Basic'; oFCKeditor.Width = '800'; oFCKeditor.ReplaceTextarea() ; </script></body> |
方法三:使用FCK自定义的标签创建编辑器
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK"%>
<FCK:editor instanceName="fck1" basePath="/fckeditor" width="650" value=" "></FCK:editor> |
注意:
value属性必须设值,否则页面将出现异常
1.2 自定义配置FCKEditor
现在我们已经可以在页面中显示FCKEditor编辑器了,很简单吧,看看FCKEditor的功能相当丰富,是不是跟MS-Word有一拼呢(开个玩笑,不过功能已经足够强大了)。
在实际应用中我们可能不需要那么多功能,那么怎样去掉一些不必要的功能呢?
1.2.1 使用配置文件fckconfig.js
fckconfig.js文件是FCKEditor的配置文件,我们可以通过修改该文件的配置项来自定义我们的编辑器。但这种方法是不推荐使用的,而另一种方法是通过新建一个配置文件来自定义配置:
创建配置文件:myfckconfig.js
FCKConfig.AutoDetectLanguage = false ; FCKConfig.DefaultLanguage = 'en' ; |
应用自定义配置,在fckconfig.js文件中指定myfckconfig.js:
FCKConfig.CustomConfigurationsPath = FCKConfig.EditorPath + 'myfckconfig.js' ; |
1.2.2 配置一些需要修改的配置
添加中文件字体:
在myfckconfig.js文件中添加如下配置:
FCKConfig.FontNames= '宋体;楷体_GB2312;隶书;黑体;Arial;Comic Sans MS;Times New Roman' ; |
修改回车换行模式与Shift+回车换行模式
在myfckconfig.js文件中添加如下配置:
FCKConfig.EnterMode = 'br' ; // p | div | br FCKConfig.ShiftEnterMode = 'p' ; // p | div | br |
修改编辑器皮肤样式
在myfckconfig.js文件中添加如下配置:
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ; |
去除编辑部分功能
在myfckconfig.js文件中添加如下配置:
FCKConfig.ToolbarSets["Default"] = [ ['Source','DocProps'], ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'], ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'], ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'], '/', ['Style','FontFormat','FontName','FontSize'], ['TextColor','BGColor'], ['FitWindow','ShowBlocks','-','About'] // No comma for the last row. ] ; |
1.2.3 更换表情图片
把表情图片的文件夹复制到” \WebRoot\fckeditor\editor\images\smiley\”文件夹下
修改fckconfig.js文件的属性
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/Face/' ; FCKConfig.SmileyImages = ['0.gif','1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif','11.gif','12.gif','13.gif','14.gif','15.gif','16.gif','17.gif','18.gif','19.gif','20.gif','21.gif','22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif','30.gif','31.gif','32.gif','33.gif','34.gif','35.gif','36.gif','37.gif','38.gif','39.gif','40.gif','41.gif','42.gif','43.gif','44.gif','45.gif','46.gif','47.gif','48.gif','49.gif','50.gif','51.gif','52.gif','53.gif','54.gif','55.gif','56.gif','57.gif','58.gif','59.gif','60.gif','61.gif','62.gif','63.gif','64.gif','65.gif','66.gif','67.gif','68.gif','69.gif','70.gif','71.gif','72.gif','73.gif','74.gif','75.gif','76.gif','77.gif','78.gif','79.gif','80.gif','81.gif','82.gif','83.gif','84.gif','85.gif','86.gif','87.gif','88.gif','89.gif','90.gif','91.gif','92.gif','93.gif','94.gif','95.gif'] ; FCKConfig.SmileyColumns = 8 ; //每行显示的表情个数 FCKConfig.SmileyWindowWidth = 320 ; //显示表情的窗口宽 FCKConfig.SmileyWindowHeight = 210 ; //显示表情的窗口高 |
修改文件:\WebRoot\fckeditor\editor\dialog\fck_smiley.html
让表情窗口自动显示滚动条
<body style="overflow: hidden"> 修改为: <body style="overflow: auto"> |
把自动根据表情图片调整窗体大小改为手动设置窗体大小:
window.onload = function () { // First of all, translate the dialog box texts oEditor.FCKLanguageManager.TranslatePage(document) ;
//dialog.SetAutoSize( true ) ; //只须把该句代码注释即可! }
|
1.3 文件上传
1.3.1 文件上传基本配置
目前文件上传功能还不能使用,那是因为我们还没有配置文件上传的处理程序。
配置文件上传处理程序需要两个步骤:
第一步:在web.xml配置Servlet
<servlet> <servlet-name>Connector</servlet-name> <servlet-class> com.fckeditor.connector.ConnectorServlet </servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Connector</servlet-name> <url-pattern> /fckeditor/editor/filemanager/connectors/* </url-pattern> </servlet-mapping> |
ConnectorServlet类用来处理上传文件的业务,文件上传后会保存在应用程序的userfiles目录中,并于分类文件夹保存,比如,图片保存在userfiles/ image目录下。
第二步:配置fckeditor.properties文件
在classpath路径下新建属性文件:fckeditor.properties,文件名不能变更
并在fckeditor.properties文件中添加以下内容:
connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl |
1.3.2 上传中文文件的乱码问题
原因:ConnectorServlet处理类在获取中文文件名时没有进行转码
解决方法:
修改ConnectorServlet处理类的代码
在ConnectorServlet的doPost方法中找到以下代码位置
…… String newFilename = null; FileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory);
//设置上传文件名的编码 upload.setHeaderEncoding("UTF-8"); //在此处添加该代码
try { List<FileItem> items = upload.parseRequest(request); …… |
1.3.3 创建中文名目录时的乱码问题
原因:ConnectorServlet处理类在获取创建文件夹名时没有进行相应的转码
解决方法:
修改ConnectorServlet处理类的代码
在ConnectorServlet的doGet方法中找到以下代码位置
…… else if (command.equals(CommandHandler.CREATE_FOLDER)) {
//解决在服务器端创建文件夹为中文名时的乱码问题 String tempStr = request.getParameter("NewFolderName"); tempStr = new String(tempStr.getBytes("iso-8859-1"),"UTF-8"); String newFolderStr = UtilsFile.sanitizeFolderName(tempStr);
logger.debug("Parameter NewFolderName: {}", newFolderStr); …… |
1.3.4 引用的中文名字的图片不能正常显示
方法一:
修改Tomcat配置文件server.xml,在配置端口处添加URIEncoding=utf-8
该方法不推荐使用(会与创建中文名文件夹产生冲突)
方法二:
上传文件时,不使用中文文件名保存,而是使用UUID产生一个随机文件名的方式:
修改ConnectorServlet处理类
在ConnectorServlet的doPost方法中找到以下代码位置
…… String rawName = UtilsFile.sanitizeFileName(uplFile.getName()); String filename = FilenameUtils.getName(rawName); String baseName = FilenameUtils.removeExtension(filename); String extension = FilenameUtils.getExtension(filename);
//设置上传文件名进行UUID编码,解决上传中文图片时的问题 filename = UUID.randomUUID().toString()+"."+extension; …… |
在表单中应用FCKEditorfckeditor.jsp
fckeditor_perform.jsp
|