`
jzq612
  • 浏览: 756 次
  • 性别: Icon_minigender_1
  • 来自: 常宁
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

FCKeditor富编辑实现

 
阅读更多

富编辑模块可以实现在线文档编辑功能，并动态上传插入image/falsh到文档中。本项目中，我们使用FCKeditor---著名的开源富编辑模块。要在我们的netjavaWeb项目中使用它，需要如下几步：
1.下载FCK模块：
首先，登陆http://www.fckeditor.net/ 下载FCKeditor的版本 FCKeditor_2.6.5.zip，及相关的jar包。
2.项目准备工作：
1.新建WEB工程netjavaFCKTest，将FCKeditor_2.6.5包中的fckeditor文件夹拷贝到项目的WEBContent文件夹下新。
2. 将FCKeditor-Java-2.4.2-bin.zip 包中的fckeditor-java-core-2.4.2.jar、commons-fileupload-1.2.1.jar、commons- io-1.3.2.jar 以及slf4j-1.5.8.zip包中的slf4j-api-1.5.8.jar、slf4j-simple-1.5.8.jar文件拷贝到项目的 WebContent\WEB-INF\lib 目录
3.FCK配置：
1.调用FCK的方式：
1.通过JavaScript调用
内联方法（首选）：在网页内设置编辑器

Java代码 
  1. <html>   
  2. <head>   
  3. <meta http-equiv= "Content-Type"  content= "text/html; charset=UTF-8" >   
  4. <title>Insert title here</title>   
  5. <!-- 第一件事要做的是将fckeditor.js集成到页面的<HEAD>就像这样： -->   
  6. <script type= "text/javascript"  src= "fckeditor/fckeditor.js" ></script>   
  7. </head>   
  8. <body>   
  9. <script type= "text/javascript" >   
  10. //新建一个FCK实例   
  11. var oFCKeditor =  new  FCKeditor（ 'FCKeditor1' ）;   
  12. //设计编辑器的文件的路径   
  13. oFCKeditor.BasePath =  "/FCKProject2.6.5/fckeditor/" ;   
  14. //创建并输出一个编辑器   
  15. oFCKeditor.Create（）;   
  16. </script>   
  17. </body>   
  18. </html>  



Textarea的替代方法：在<head>中添加“onload”方法：

Java代码 
  1. <html>   
  2. <head>   
  3. <meta http-equiv= "Content-Type"  content= "text/html; charset=utf-8" >   
  4. <title>Insert title here</title>   
  5. <!-- 第一件事要做的是将fckeditor.js集成到页面的<HEAD>就像这样： -->   
  6. <script type= "text/javascript"  src= "fckeditor/fckeditor.js" ></script>   
  7. <!-- 第二件事要做的是创建一个onload方法就像这样： -->   
  8. <script type= "text/javascript" >   
  9. window.onload = function（）{   
  10. var oFCKeditor =  new  FCKeditor（  'MyTextarea'  ） ;   
  11. oFCKeditor.BasePath =  "/FCKProject2.6.5/fckeditor/"  ;   
  12. oFCKeditor.ReplaceTextarea（） ;   
  13. }   
  14. </script>   
  15. </head>   
  16. <body>   
  17. <!-- Body部分添加如下代码： -->   
  18. <textarea id= "MyTextarea"  name= "MyTextarea" ></textarea>   
  19. </body>   
  20. </html>  



FCK属性：

属性名 描述 默认值
Windth 宽度 100%
Height 高度 200
Value 编辑器初始化内容 （空字符串）
ToolbarSet 工具条集合的名称 （Default）[内置有default和basic，也可以自定义]
BasePath 编辑器的基本路径 /fckeditor/



FCK构造方法：
Var FCKeditor = function（instanceName,width,height,toolbarSet,value）;
instanceName为编辑器输出的textarea元素的name属性的值，必须指定参数会赋值给同名属性
2.JSP中自定义标签调用
在JSP中通过自定义标签调用FCKeditor：

Java代码 
  1. <%@ page language= "java"  contentType= "text/html; charset=UTF-8"   
  2.     pageEncoding= "UTF-8" %>   
  3. <!-- 步骤 1 ：    导入自定义标签库 -->   
  4. <%@ taglib uri= "http://java.fckeditor.net"  prefix= "FCK"  %>   
  5. <!DOCTYPE html PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd" >   
  6. <html><head>   
  7. <meta http-equiv= "Content-Type"  content= "text/html; charset=UTF-8" >   
  8. <title>Insert title here</title>   
  9. </head><body>   
  10. <!-- 步骤 2 ：    在Body部分添加FCK标签： -->   
  11. <FCK:editor instanceName= "EditorDefault"  toolbarSet= "Basic"  width= "50%"  height= "400"  value= "this is my test" >   
  12. </FCK:editor>   
  13. </body></html>  



2. 配置FCKedirot Myconfig.js
方法1：找到FCK主配置文件fckconfig.js，修改FCK的属性，此文件可以直接修改，一般不建议使用。
方法2：有一个更好的方法有同样的结果如上所述，但没有接触fckconfig.js文件；可以设置自定义配置的路径，直接在页面编辑器使用。
这是一个例子，在JavaScript中实现的：
1.建立一个配置文件myconfig.js
（1）.修改主配置文件fckconfig.js

Java代码 
  1. FCKConfig.CustomConfigurationsPath =  '/myconfig.js'  ;  


（2）.建立一个独立的配置文件，只需要写修改的配置项 myconfig.js

（3）.在调用FCKeditor的时候使用：

Java代码 
  1. var oFCKeditor =  new  FCKeditor（  "FCKeditor1"  ） ;   
  2.     oFCKeditor.Config[ "CustomConfigurationsPath" ] =  "/myconfig.js"   ;   
  3.     oFCKeditor.Create（） ;  



配置加载顺序
1.加载主配置文件fckeditor.js
2.加载自定义的配置文件（如果有），覆盖相同的配置项
3.使用对实例的配置覆盖相同的配置项（只对当前实例有效）
提示：
1.系统会自动检测并运行适当的界面语言（默认，可以修改）
2.不能删除主配置文件fckconfig.js
3.修改配置后腰清空浏览器缓存，以免影响结果（或访问时强制刷新也可以）
添加一个数字或时间在自定义配置路径的结尾代码，强迫浏览器每次加载它：

Java代码 
  1. var oFCKeditor =  new  FCKeditor（  "FCKeditor1"  ） ;   
  2.     oFCKeditor.Config[ "CustomConfigurationsPath" ] =  "/myconfig.js?"  + （  new  Date（） *  1  ） ;   
  3.     oFCKeditor.Create（） ;  



3.需要修改的配置
1.自定义ToolbarSet,去掉一些功能
2.加上几种常用的字体
3.修改"回车"和"Shift+回车"的换行行为（ 默认的回车是一个段落）
4.修改编辑区样式文件  @import url（路径）;
5.更换表情图片
注意：
1.要使用UTF-8编码保存配置文件
2.FCKConfig.BasePath和调用fckeditor时指定的
BasePath（FCKeditor.BasePath）不是同一个，其值也不一样

Java代码 
  1. //设置语言，是否自动检测，默认为TRUE，此处设置为不自动检测，会覆盖默认的设置   
  2. FCKConfig.AutoDetectLanguage =  true  ;   
  3. //自定义ToolbarSet,去掉一些功能   
  4. FCKConfig.ToolbarSets[ "NetJava" ] = [   
  5.     [ 'Bold' , 'Italic' , 'Underline' , 'StrikeThrough' , '-' , 'Subscript' , 'Superscript' ],   
  6.     [ 'OrderedList' , 'UnorderedList' , '-' , 'Outdent' , 'Indent' , 'Blockquote' , 'CreateDiv' ],   
  7.     [ 'JustifyLeft' , 'JustifyCenter' , 'JustifyRight' , 'JustifyFull' ],   
  8.     [ 'Link' , 'Unlink' , 'Anchor' ],   
  9.     [ 'Image' , 'Flash' , 'Table' , 'Rule' , 'Smiley' , 'SpecialChar' , 'PageBreak' ],   
  10.      '/' ,   
  11.     [ 'Style' , 'FontFormat' , 'FontName' , 'FontSize' ],   
  12.     [ 'TextColor' , 'BGColor' ],   
  13.     [ 'FitWindow' , 'ShowBlocks' , '-' , 'About' ]       // No comma for the last row.   
  14. ] ;   
  15. //修改字体，加上中文的字体   
  16. FCKConfig.FontNames     =  '黑体;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'  ;   
  17. //修改"回车"和"Shift+回车"的换行行为（ 默认的回车是一个段落）   
  18. FCKConfig.EnterMode =  'br'  ;             // p | div | br   
  19. FCKConfig.ShiftEnterMode =  'p'  ;     // p | div | br    
  20. //修改编辑区样式文件 ,在fck_editorarea.css中使用@import url（路径）   
  21. FCKConfig.EditorAreaCSS = FCKConfig.BasePath +  'css/fck_editorarea.css'  ;   
  22. //更换表情图片;表情图片的位置   
  23. FCKConfig.SmileyPath    = FCKConfig.BasePath +  'images/smiley/wangwang/'  ;   
  24. //要显示的表情图片的名字   
  25. FCKConfig.SmileyImages  = [ '001.gif' , '002.gif' , '003.gif' , '004.gif' , '005.gif' , '006.gif' , '007.gif' , '008.gif' , '009.gif' , '010.gif' , '011.gif' , '012.gif' , '013.gif' , '014.gif' , '015.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' ] ;   
  26. //每行显示多少个表情图片   
  27. FCKConfig.SmileyColumns =  5  ;   
  28. //显示表情图片的宽度   
  29. FCKConfig.SmileyWindowWidth     =  435  ;   
  30. //显示表情图片的高度   
  31. FCKConfig.SmileyWindowHeight    =  210  ;  



4.文件上传
需求：
1.文件名为中文的文件时会出现乱码
2.创建中文目录名会出现乱码
3.引用中文名的图片不能正常显示

1.修改web.XML中的配置

Java代码 
  1. <servlet>   
  2.       <servlet-name>ConnectorServlet</servlet-name>   
  3.         <servlet- class >   
  4.           cn.netjava.fckeditor.ConnectorServlet   
  5.       </servlet- class >   
  6.       <load-on-startup> 1 </load-on-startup>   
  7.     </servlet>   
  8.     <servlet-mapping>   
  9.       <servlet-name>ConnectorServlet</servlet-name>   
  10.       <url-pattern>   
  11.         /fckeditor/editor/filemanager/connectors/*   
  12.       </url-pattern>   
  13. </servlet-mapping>  



2.重写FCK的ConnectorServlet文件
1.文件名为中文的文件时会出现乱码
在ConnectorServlet类的doPost方法中加上粗体部分代码。

Java代码 
  1. //……   
  2. if  （!currentDir.exists（））   
  3.                 ur = UploadResponse.UR_INVALID_CURRENT_FOLDER;   
  4.              else  {   
  5.                 String newFilename =  null ;   
  6.                 FileItemFactory factory =  new  DiskFileItemFactory（）;   
  7.                 ServletFileUpload upload =  new  ServletFileUpload（factory）;   
  8.                  //设置编码为UTF-8   
  9.                 upload.setHeaderEncoding（ "UTF-8" ）;   
  10.                  try  {   
  11.              //……   



2.创建中文目录名会出现乱码
在ConnectorServlet类的doGet方法中加上粗体部分代码。

Java代码 
  1. //……   
  2. else   if  （command.equals（CommandHandler.CREATE_FOLDER）） {   
  3. //取得要建立的文件夹的名字   
  4. String strFileName = request.getParameter（ "NewFolderName" ）;   
  5. //进行编码转换   
  6. strFileName =  new  String（strFileName.getBytes（ "iso8859-1" ）, "UTF-8" ）;   
  7. String newFolderStr = UtilsFile.sanitizeFolderName（strFileName）;   
  8. logger.debug（ "Parameter NewFolderName: {}" , newFolderStr）;   
  9. //……   



3.引用中文名的图片不能正常显示
（1）.修改tomcat连接器的配置URIEncoding（建议不要使用，这个方法对Get方法进行的提交会对中文进行解码，有可能会产生乱码）。
原因是：图片引用的地址进行URL编码，当使用这个路径访问服务器时，先进行解码，这样就会解释成乱码，所以找不到对应的资源。

Java代码 
  1. <Connector port= "8080"  protocol= "HTTP/1.1"  connectionTimeout= "20000"     redirectPort= "8443"  URIEncoding= "UTF-8" />  



（2）.避免出现引用中文名字图片的情况，在ConnectorServlet类的doPost方法中加上粗体部分代码。

Java代码 
  1. //……   
  2. FileItem uplFile = items.get（ 0 ）;   
  3. String rawName = UtilsFile.sanitizeFileName（uplFile.getName（））;   
  4. String filename = FilenameUtils.getName（rawName）;   
  5. String baseName = FilenameUtils.removeExtension（filename）;   
  6. String extension = FilenameUtils.getExtension（filename）;   
  7. //使用UUID来替换文件名   
  8. filename = UUID.randomUUID（）.toString（） +  "."  + extension;   
  9. //如果文件扩展名不允许上传   
  10. if  （!ExtensionsHandler.isAllowed（resourceType, extension））   
  11. //……   



4. 控制上传文件的大小和自定义错误码
1.在上传文件的页面（浏览器）加载文件点击“Upload”按钮，将表单提交 到ConnectorServlet（服务器），ConnectorServlet处理上传的文件（不同的处理结果对应不同的响应消 息），ConnectorServlet通过处理的结果调用不同的回调函数，并传递错误码，对错误码进行处理。
打印错误码对应的提示信息步骤：
1.在服务器端的Servlet中，在保存文件之前先判断文件的大小，如果超出限制，就传递一个自定义的错误码，并且不再保存文件。在ConnectorServlet类的doPost方法中加上粗体部分代码。

Java代码 
  1. //……   
  2. //如果文件扩展名不允许上传   
  3. if  （!ExtensionsHandler.isAllowed（resourceType, extension））   
  4. ur =  new  UploadResponse（UploadResponse.SC_INVALID_EXTENSION）;   
  5. //如果文件大小超出限制   
  6. else   if （uplFile.getSize（） >  100  *  1024 ）{   
  7. //传递一个自定义的错误码   
  8. ur =  new  UploadResponse（ 204 ）;   
  9. }   
  10. //如果不存在以上情况，则保存文件   
  11. else  {   
  12. //……   



2.修改对应的页面中的回调函数，增加对这个自定义的错误码的处理。在WebContenteditordialogfck_image文件夹下Fck_image.js文件中加上粗体部分代码。

Java代码 
  1. switch  （ errorNumber ）{   
  2.          case   0  :     // No errors   
  3.             alert（  'Your file has been successfully uploaded'  ） ;   
  4.              break  ;   
  5.          case   1  :     // Custom error   
  6.             alert（ customMsg ） ;   
  7.              return  ;   
  8.          case   101  :   // Custom warning   
  9.             alert（ customMsg ） ;   
  10.              break  ;   
  11.          case   201  :   
  12.             alert（  'A file with the same name is already available. The uploaded file has been renamed to "'  + fileName +  '"'  ） ;   
  13.              break  ;   
  14.          case   202  :   
  15.             alert（  'Invalid file type'  ） ;   
  16.              return  ;   
  17.          case   203  :   
  18.             alert（  "Security error. You probably don't have enough permissions to upload. Please check your server."  ） ;   
  19.              return  ;   
  20. //将ConnectorServlet文件中自定义的204错误码在此处进行定义。   
  21.          case   204  :   
  22.             alert（  "文件大小超出限制"  ） ;   
  23.              return  ;   
  24.          case   500  :   
  25.             alert（  'The connector is disabled'  ） ;   
  26.              break  ;   
  27.          default  :   
  28.             alert（  'Error on file upload. Error number: '  + errorNumber ） ;   
  29.              return  ;   
  30. } 
分享到：
评论
发表评论

文章已被作者锁定，不允许评论。

相关推荐

    FCKEditor富文本控件

    **FCKEditor富文本控件** 是一个广泛应用于网页开发中的开源富文本编辑器，它为用户提供了类似于Microsoft Word的编辑体验，使得在网页上创建和编辑内容变得更加直观和便捷。这款控件允许用户在浏览器端进行文本格式...

    java使用FCKEditor富文本编辑器

    在 Java 端，你需要实现文件上传的功能，包括接收上传请求，处理文件流，保存到服务器指定目录，并返回一个文件 URL 给 FCKEditor，以便编辑器能正确显示上传的文件。 5. **安全考虑** - 过滤 XSS 攻击：富文本...

    fckeditor在线编辑器

    总的来说，FCKeditor是一款强大的在线编辑工具，通过简单的配置和集成，可以快速地为Web应用添加富文本编辑功能。对于开发者来说，理解其基本使用和配置方式，以及如何扩展其功能，如文件上传，是提升网站交互性和...

    FckEditor在线编辑器

    1. **富文本编辑**：FckEditor提供了丰富的文本格式化选项，用户可以调整字体、字号、颜色，添加粗体、斜体、下划线等样式。它还支持对文本进行对齐、缩进、创建列表以及插入链接和图片。 2. **源代码视图**：编辑...

    fckeditor文档编辑器插件

    通过fckeditor，开发者可以轻松地在网页上实现文本编辑、图像上传、链接插入等功能，极大地提升了用户的在线编辑体验。 2. **主要功能** - **富文本格式化**：fckeditor提供了丰富的文本格式化选项，如字体大小、...

    FCKeditor 文本编辑器

    FCKeditor是一款开源的Web富文本编辑器，它为网站开发者提供了一种在网页上实现类似桌面文字处理软件的编辑体验。FCKeditor最初由Felipe Corte-Real创建，后发展成为一款广泛使用的JavaScript组件，允许用户在网页上...

    php版FCKEDITOR在线编辑器

    FCKEditor是一款著名的开源富文本编辑器，它为用户提供了类似于Microsoft Word的在线编辑体验。在Web开发中，FCKEditor常被用于创建论坛、博客或其他内容管理系统（CMS）的后台编辑界面，让用户能够方便地编辑和格式...

    fckeditor在线编辑器（HTML在线编辑软件）

    1. **富文本编辑**：FCKeditor提供了多种文本格式化选项，如字体、大小、颜色、对齐方式等，用户可以像在Word中一样编辑文本。 2. **插入媒体**：支持插入图片、视频、音频以及链接，方便创建多媒体内容。 3. **表格...

    网站富文本编辑器Fckeditor在ASP.NET中应用源程序

    在ASP.NET平台上，FCKeditor是一款广泛使用的开源富文本编辑器，它提供了丰富的功能和良好的用户体验。本文将详细介绍FCKeditor在ASP.NET中的应用以及如何进行源码级别的理解和实践。 **1. FCKeditor简介** ...

    FCKeditor在线编辑器

    FCKeditor是一款开源的Web富文本编辑器，它允许用户在网页上进行类似于Word的文本编辑操作。这款编辑器诞生于2003年，由Fernando Montagudo创建，最初是作为论坛软件FluxBB的一个组件。随着时间的推移，FCKeditor因...

    FCKeditor2.4.2编辑器 For Asp.net多语言版

    FCKeditor2.4.2是一款专为Asp.net平台设计的开源富文本编辑器，提供了多语言支持，使得开发者可以方便地在Web应用中集成强大的文字编辑功能。这款编辑器以其用户友好的界面和丰富的功能，深受开发者的喜爱。 ...

    FCKeditor2.6 在线编辑器

    首先，FCKeditor的核心特性包括支持富文本编辑，允许用户在网页上直接进行文字格式化、插入图片、链接、表格等操作，极大地提高了网页内容创作的效率。用户可以通过拖放、复制粘贴等方式轻松处理内容，与传统的纯...

    fckeditor2.6.1在线编辑器

    尽管随着技术的发展，现代的富文本编辑器如CKEditor（FCKeditor的后续版本）和TinyMCE等提供了更多功能和更好的性能，但FCKeditor在它那个时代已经是一个非常出色的选择。对于需要对旧系统进行维护或者研究富文本...

    .NET版FCKeditor在线编辑器

    FCKeditor是一款JavaScript编写的开源富文本编辑器，它提供了一套完整的WYSIWYG（所见即所得）编辑界面，允许用户在浏览器中直接编辑文字、插入图片、链接、表格等元素，就像在桌面程序中操作文档一样。它的核心功能...

    FCKeditor 2.6.3网页编辑器最新版

    FCKeditor是一款开源的、基于JavaScript的富文本编辑器，广泛应用于Web开发领域，为用户提供类似桌面文字处理软件的在线编辑体验。2.6.3是该编辑器的一个版本号，通常代表着在前一版本基础上进行了一系列的改进和...

    FCKeditor编辑器精简教程手册（WORD）

    FCKeditor是一款广泛应用于Web开发领域的富文本编辑器，它支持多种编程语言环境，并且具备良好的用户交互体验，能够方便地实现在线文档编辑、格式调整等功能。适用于各类网站系统中的内容管理模块。 #### 二、...

    fckeditor编辑器插件

    在网页内容编辑领域，fckeditor是一款备受开发者青睐的开源富文本编辑器。它提供了丰富的文本格式化功能，使得用户可以在浏览器端进行类似于Word般的文本编辑操作。本文将深入探讨fckeditor编辑器的自定义按钮功能、...

    fckeditor在线编辑器源码

    FCKeditor是一款开源的Web富文本编辑器，它在早期的Web开发中广泛应用于内容管理系统、论坛、博客等平台，提供了丰富的文本编辑功能，使得用户能够在浏览器端进行类似Word的文本编辑操作。本篇文章将围绕fckeditor的...

    FCKeditor2.3在线编辑器

    3. **事件处理**：可以通过监听FCKeditor的特定事件，实现自定义功能，如保存编辑内容、上传文件时的验证等。 **四、FCKeditor2.3开发与扩展** 1. **插件开发**：FCKeditor支持插件系统，开发者可以编写自定义插件...

Magicbox
Global site tag (gtag.js) - Google Analytics