`
convolute
  • 浏览: 259289 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

FCKeditor富编辑实现

fckeditor浏览器CSSJavaScriptJSP 
阅读更多
  富编辑模块可以实现在线文档编辑功能，并动态上传插入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调用
内联方法（首选）：在网页内设置编辑器 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 第一件事要做的是将fckeditor.js集成到页面的<HEAD>就像这样： -->
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
</head>
<body>
<script type="text/javascript">
//新建一个FCK实例
var oFCKeditor = new FCKeditor（'FCKeditor1'）;
//设计编辑器的文件的路径
oFCKeditor.BasePath = "/FCKProject2.6.5/fckeditor/";
//创建并输出一个编辑器
oFCKeditor.Create（）;
</script>
</body>
</html>


Textarea的替代方法：在<head>中添加“onload”方法： 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<!-- 第一件事要做的是将fckeditor.js集成到页面的<HEAD>就像这样： -->
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<!-- 第二件事要做的是创建一个onload方法就像这样： -->
<script type="text/javascript">
window.onload = function（）{
var oFCKeditor = new FCKeditor（ 'MyTextarea' ） ;
oFCKeditor.BasePath = "/FCKProject2.6.5/fckeditor/" ;
oFCKeditor.ReplaceTextarea（） ;
}
</script>
</head>
<body>
<!-- Body部分添加如下代码： -->
<textarea id="MyTextarea" name="MyTextarea"></textarea>
</body>
</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： 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 步骤1：	导入自定义标签库 -->
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head><body>
<!-- 步骤2：	在Body部分添加FCK标签： -->
<FCK:editor instanceName="EditorDefault" toolbarSet="Basic" width="50%" height="400" value="this is my test">
</FCK:editor>
</body></html>


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

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

（3）.在调用FCKeditor的时候使用： 
var oFCKeditor = new FCKeditor（ "FCKeditor1" ） ;
	oFCKeditor.Config["CustomConfigurationsPath"] = "/myconfig.js"  ;
	oFCKeditor.Create（） ;


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

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


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

//设置语言，是否自动检测，默认为TRUE，此处设置为不自动检测，会覆盖默认的设置
FCKConfig.AutoDetectLanguage = true ;
//自定义ToolbarSet,去掉一些功能
FCKConfig.ToolbarSets["NetJava"] = [
    ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
    ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
    '/',
    ['Style','FontFormat','FontName','FontSize'],
    ['TextColor','BGColor'],
    ['FitWindow','ShowBlocks','-','About']		// No comma for the last row.
] ;
//修改字体，加上中文的字体
FCKConfig.FontNames		= '黑体;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
//修改"回车"和"Shift+回车"的换行行为（ 默认的回车是一个段落）
FCKConfig.EnterMode = 'br' ;			// p | div | br
FCKConfig.ShiftEnterMode = 'p' ;	// p | div | br 
//修改编辑区样式文件 ,在fck_editorarea.css中使用@import url（路径）
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;
//更换表情图片;表情图片的位置
FCKConfig.SmileyPath	= FCKConfig.BasePath + 'images/smiley/wangwang/' ;
//要显示的表情图片的名字
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'] ;
//每行显示多少个表情图片
FCKConfig.SmileyColumns = 5 ;
//显示表情图片的宽度
FCKConfig.SmileyWindowWidth		= 435 ;
//显示表情图片的高度
FCKConfig.SmileyWindowHeight	= 210 ;


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

1.修改web.XML中的配置 

<servlet>
      <servlet-name>ConnectorServlet</servlet-name>
        <servlet-class>
          cn.netjava.fckeditor.ConnectorServlet
      </servlet-class>
      <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
      <servlet-name>ConnectorServlet</servlet-name>
      <url-pattern>
        /fckeditor/editor/filemanager/connectors/*
      </url-pattern>
</servlet-mapping>


2.重写FCK的ConnectorServlet文件
1.文件名为中文的文件时会出现乱码
在ConnectorServlet类的doPost方法中加上粗体部分代码。 
//……
if （!currentDir.exists（））
				ur = UploadResponse.UR_INVALID_CURRENT_FOLDER;
			else {
				String newFilename = null;
				FileItemFactory factory = new DiskFileItemFactory（）;
				ServletFileUpload upload = new ServletFileUpload（factory）;
				//设置编码为UTF-8
				upload.setHeaderEncoding（"UTF-8"）;
				try {
            //……


2.创建中文目录名会出现乱码
在ConnectorServlet类的doGet方法中加上粗体部分代码。 
//……
else if （command.equals（CommandHandler.CREATE_FOLDER）） {
//取得要建立的文件夹的名字
String strFileName = request.getParameter（"NewFolderName"）;
//进行编码转换
strFileName = new String（strFileName.getBytes（"iso8859-1"）,"UTF-8"）;
String newFolderStr = UtilsFile.sanitizeFolderName（strFileName）;
logger.debug（"Parameter NewFolderName: {}", newFolderStr）;
//……


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


（2）.避免出现引用中文名字图片的情况，在ConnectorServlet类的doPost方法中加上粗体部分代码。 
//……
FileItem uplFile = items.get（0）;
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;
//如果文件扩展名不允许上传
if （!ExtensionsHandler.isAllowed（resourceType, extension））
//……


4. 控制上传文件的大小和自定义错误码
1.在上传文件的页面（浏览器）加载文件点击“Upload”按钮，将表单提交到ConnectorServlet（服务器），ConnectorServlet处理上传的文件（不同的处理结果对应不同的响应消息），ConnectorServlet通过处理的结果调用不同的回调函数，并传递错误码，对错误码进行处理。
打印错误码对应的提示信息步骤：
1.在服务器端的Servlet中，在保存文件之前先判断文件的大小，如果超出限制，就传递一个自定义的错误码，并且不再保存文件。在ConnectorServlet类的doPost方法中加上粗体部分代码。 
//……
//如果文件扩展名不允许上传
if （!ExtensionsHandler.isAllowed（resourceType, extension））
ur = new UploadResponse（UploadResponse.SC_INVALID_EXTENSION）;
//如果文件大小超出限制
else if（uplFile.getSize（） > 100 * 1024）{
//传递一个自定义的错误码
ur = new UploadResponse（204）;
}
//如果不存在以上情况，则保存文件
else {
//……


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

switch （ errorNumber ）{
		case 0 :	// No errors
			alert（ 'Your file has been successfully uploaded' ） ;
			break ;
		case 1 :	// Custom error
			alert（ customMsg ） ;
			return ;
		case 101 :	// Custom warning
			alert（ customMsg ） ;
			break ;
		case 201 :
			alert（ 'A file with the same name is already available. The uploaded file has been renamed to "' + fileName + '"' ） ;
			break ;
		case 202 :
			alert（ 'Invalid file type' ） ;
			return ;
		case 203 :
			alert（ "Security error. You probably don't have enough permissions to upload. Please check your server." ） ;
			return ;
//将ConnectorServlet文件中自定义的204错误码在此处进行定义。
		case 204 :
			alert（ "文件大小超出限制" ） ;
			return ;
		case 500 :
			alert（ 'The connector is disabled' ） ;
			break ;
		default :
			alert（ 'Error on file upload. Error number: ' + errorNumber ） ;
			return ;
}


按照上边的步骤你就能看到你想要的结果了。
分享到：
| Eclipse + SVN + Google code搭建代码仓库
评论
2 楼 ssuupv 2010-01-18  
我在ckediter3.0做了一些封装开发(表单设计器).不过客户使用还是不满意
1 楼 fhjxp 2010-01-18  
这个版本太低了。2010年了，看看CKEditor3.x吧，改进了很多
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Xheditor 富文本编辑器 Java版

    java版 xheditor富文本编辑器，个人认为比fckeditor好用且美观。实现了图片上传功能。示例为myeclipse工程，导入即可用。

    fckedtior自编弹出框富文本编辑器——功能齐全

    依据fckedior源码，在此基础上做了一个例子，通过点击div，弹出文本编辑框，可以实现加粗、字体颜色、字体背景色、字体样式、字体大小、链接、图片上传、flash上传等功能。

    ECMS7.2系统的可以用于维吾尔文输入编辑器

    ECMS7.2系统的编辑器(用于输入IE,FF,CHromi等等各种浏览器下维吾尔语言) 维吾尔输入实现者：艾尔肯·努尔 网址：http://awangart.net(com) 2015.2.5 下载后请您覆盖相关文件就OK!

    毕业设计-基于JSP的在线博客网ssh+mysql-设计与实现（源码+论文+视频）.zip

    这个地方还用到的现在比较流行的富文本编辑器fckEditor 图4.2 照片发布模块界面 4.3 添加文章模块 （1）添加文章模块界面 在该界面中首先输入文章内容。单击“提交”按钮，即可完成归文章发布操作。 图4.3 ...

    CkEditor3.01

    CkEditor是FckEditor的最新版 现更名为CKEditor 该压缩包中包含了CKFinder 用以实现CkEditor的图片上传功能

    社交类网站常用jquery库

    在众多类库中挑选的相对好用的！ 官网都有详细的文档说明，大家自行百度谷歌哈！ artZoom：常用于微博，...kindeditor：比fckeditor还要好用的富文本编辑器，主要是符合中国国情，自己产的吗！ SwfUpload：文件上传工具

    SpringMVC+redis完整案例

     Jsp,freemarker,jquery,css+div,jstl标签struts-menu(了解)，fckEditor(富文本编辑器)  Springmvc,spring,mybatis  cxf  文件服务器(jersy)  Maven,svn,hudson  Oracle  Activiti  Nginx  Redis ...

    java开源包3

    public class JVMine extends java.applet.Applet 简单实现！~ 网页表格组件 GWT Advanced Table GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag...

    java开源包4

    public class JVMine extends java.applet.Applet 简单实现！~ 网页表格组件 GWT Advanced Table GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag...

    JAVA上百实例源码以及开源项目

    百度云盘分享 ...　Java实现的FTP连接与数据浏览程序，实现实例化可操作的窗口。 　部分源代码摘录： 　ftpClient = new FtpClient(); //实例化FtpClient对象 　String serverAddr=jtfServer.getText();...

    JAVA上百实例源码以及开源项目源代码

    Java实现的FTP连接与数据浏览程序 1个目标文件 摘要:Java源码,网络相关,FTP Java实现的FTP连接与数据浏览程序，实现实例化可操作的窗口。 部分源代码摘录： ftpClient = new FtpClient(); //实例化FtpClient对象 ...

    java开源包1

    public class JVMine extends java.applet.Applet 简单实现！~ 网页表格组件 GWT Advanced Table GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag...

    java开源包11

    public class JVMine extends java.applet.Applet 简单实现！~ 网页表格组件 GWT Advanced Table GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag...

    java开源包2

    public class JVMine extends java.applet.Applet 简单实现！~ 网页表格组件 GWT Advanced Table GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag...

    java开源包6

    public class JVMine extends java.applet.Applet 简单实现！~ 网页表格组件 GWT Advanced Table GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag...

    java开源包5

    public class JVMine extends java.applet.Applet 简单实现！~ 网页表格组件 GWT Advanced Table GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag...

    java开源包10

    public class JVMine extends java.applet.Applet 简单实现！~ 网页表格组件 GWT Advanced Table GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag...

    java开源包8

    public class JVMine extends java.applet.Applet 简单实现！~ 网页表格组件 GWT Advanced Table GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag...

    java开源包7

    public class JVMine extends java.applet.Applet 简单实现！~ 网页表格组件 GWT Advanced Table GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag...

    java开源包9

    public class JVMine extends java.applet.Applet 简单实现！~ 网页表格组件 GWT Advanced Table GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag...

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