finally_m

浏览: 67172 次
性别:
来自: 北京

最近访客更多访客>>

huxin9118

糯米夹心的糖葫芦

SilverClou

Chord_

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

FCKEditor在线编辑器

博客分类：

实用组件

fckeditor 应用服务器 Servlet JavaScript .net

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对象创建编辑器

<body>

var oFCKeditor = new FCKeditor('FCKeditor1');

oFCKeditor.BasePath = "${pageContext.request.contextPath }/fckeditor/";

oFCKeditor.Create();

</script>

</body>

方法二：通过替换一个textarea来创建编辑器

<body>

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

让表情窗口自动显示滚动条

修改为：

把自动根据表情图片调整窗体大小改为手动设置窗体大小：

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-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;

……

在表单中应用FCKEditor

fckeditor.jsp

<FCK:editor

instanceName="fck1" basePath="/fckeditor" width="650" value=" "></FCK:editor>

<br/>

</form>

fckeditor_perform.jsp

<body>

${param.fck1 }

</body>

5
顶

1
踩

分享到：

使用OpenSessionInViewFilter解决session ... | hibernate Session 管理

2009-07-16 00:12
浏览 1358
评论(4)
查看更多

4 楼 finally_m 2009-08-02

谢谢大家的支持!

3 楼 greatverve 2009-07-17

顶，讲得很认真。

2 楼 finally_m 2009-07-16

谢谢！相互学习！

1 楼 laitaogood 2009-07-16

还不错，对我这样的初学者很有帮助

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

FCKEditor在线编辑器

FCKEditor

1.1 在应用中使用 FCKEditor

1.2 自定义配置FCKEditor

1.2.1 使用配置文件fckconfig.js

1.2.2 配置一些需要修改的配置

1.2.3 更换表情图片

1.3 文件上传

1.3.1 文件上传基本配置

1.3.2 上传中文文件的乱码问题

1.3.3 创建中文名目录时的乱码问题

1.3.4 引用的中文名字的图片不能正常显示

在表单中应用FCKEditor

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

FCKEditor在线编辑器

FCKEditor

1.1 在应用中使用 FCKEditor

1.2 自定义配置FCKEditor

1.2.1 使用配置文件fckconfig.js

1.2.2 配置一些需要修改的配置

1.2.3 更换表情图片

1.3 文件上传

1.3.1 文件上传基本配置

1.3.2 上传中文文件的乱码问题

1.3.3 创建中文名目录时的乱码问题

1.3.4 引用的中文名字的图片不能正常显示

在表单中应用FCKEditor

评论

发表评论

相关推荐

最近访客更多访客>>