fckeditor的配置和使用

这两天研究了一下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>
<!-- basePath要以/开头/代表的是当前工程根路径,而且value的值不能为空不然会报空指针 -->
没必要加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' ;
这样基本的配置就完成了
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值