fckeditor的配置和使用

最新推荐文章于 2025-11-23 21:36:02 发布

原创最新推荐文章于 2025-11-23 21:36:02 发布 · 112 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#fckeditor #Flash #JSP #UP #.net

fileupload 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了FCKEditor的文字编辑及文件上传功能配置方法。通过在官网下载必要的文件和jar包，可在项目中轻松集成FCKEditor。文中还详细说明了如何在HTML和JSP环境中配置该编辑器。

这两天研究了一下fckeditor,发现不仅在文字编辑方面有很大优势，而且在文件的上传也占有一席之地，下面我就将基本的配置和大家分享
首先在其官网将一系列的文件及其用到的jar包下载下来，将fckeditor.zip解压后的文件夹粘贴到WebRoot下面，并将所用到的jar包放到lib文件夹中，我用到的jar包有
commons-fileupload-1.2.1.jar
commons-io-1.3.2.jar
imageinfo-1.9.jar
java-core-2.6.jar
slf4j-api-1.5.8.jar
slf-simple-1.5.8.jar

在html中使用fckeditor配置如下
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function(){
var oFCKeditor = new FCKeditor( 'textArea' ) ; //此时的值应该与textArea的id或name的值相同
oFCKeditor.BasePath = "/FckEditor/fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
</head>

<body>
<textarea rows="50" cols="50" name="textArea"></textarea>
</body>

在jsp中配置如下
引入标签库<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
然后用FCK标签做如下配置就可以将fckeditor添加到页面中
<FCK:editor width="50%" height="400" instanceName="fckEditor" basePath="/fckeditor" value="请输入内容"></FCK:editor>

没必要加tld文件，因为java-core.jar中有一个默认的tld文件

如果你想fckeditor按照自己喜欢的样式显示出来你可以对它进行部分修改并覆盖默认的样式，在fckeditor目录中新建一个配置文件，如myconfig.js,我修改的地方如下
FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps'],
['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 = '宋体;黑体;幼圆;楷体_GB2312;仿宋_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

//将Enter改为换行，shift加Enter改为分段
FCKConfig.EnterMode = 'br' ; // p | div | br
FCKConfig.ShiftEnterMode = 'p' ; // p | div | br

//配置表情图片,首先将kulou.bmp图片放到FCKConfig.BasePath + 'images/smiley/msn/'下然后在FCKConfig.SmileyImages中添加图片名称
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/' ;
FCKConfig.SmileyImages = ['kulou.bmp','regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif','embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif','devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif'] ;
FCKConfig.SmileyColumns = 8 ;
FCKConfig.SmileyWindowWidth = 320 ;
FCKConfig.SmileyWindowHeight = 210 ;

//与服务器端的配置文件相一致
FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png|bmp|abc)$" ;

记得要在其默认的配置文件中修改选项，将修改的部分覆盖原来的
FCKConfig.CustomConfigurationsPath = FCKConfig.EditorPath + 'myconfig.js' ;
这样基本的配置就完成了