fckeditor的配置和使用

liaokang.java

浏览: 155092 次
性别:
来自: 湖南

最近访客更多访客>>

860548048

sywillis

fss900717

lzw1211

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

fileupload

fckeditor Flash JSP UP .net

这两天研究了一下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' ;
这样基本的配置就完成了

分享到：