1,把fckeditor文件夹整个复制到项目下WebContent(或者WebRoot)下
2,把fck相关jar放入到项目lib下
3.在项目的src下创建一个文件文件名:fckeditor.properties
在此文件中加入:
connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl
4.在web.xml中加入配置
<!-- fckeditor配置 -->
<servlet>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-class>
net.fckeditor.connector.ConnectorServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ConnectorServlet</servlet-name>
<!-- Do not wrap this line otherwise Glassfish will fail to load this file -->
<url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern>
</servlet-mapping>
5. 使用:
在需要使用在线编辑器的页面上加入<%@taglib uri="http://java.fckeditor.net" prefix="fck"%>
在需要使用的地方使用<fck:editor instanceName="此处相当于name,与name的名称相同即可"></fck:editor>
例如:addtype.jsp中商品描述:
<FCK:editor instanceName="productcontext"></FCK:editor><br/>
updatetype.jsp中商品描述:
<FCK:editor instanceName="productcontext" value="${requestScope.product.productcontext }"></FCK:editor>
修改的值保存在value中
6.配置在fckconfig.js
如果上传文件不显示,或无更改,很可能是数据库字段的大小有限制,可以将字段修改为text类型
此处可以自己修改样式内容
例如:
1.增加删除某些标签功能,为了不影响自带文件,我们一般写自己的编辑器样式文件myfckconfig.js,然后配置
fckconfig.js
//在线编辑器的工具集
FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
'/',
['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.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
] ;
FCKConfig.ToolbarSets["Default"]最复杂的‘/’换行‘-’竖线
FCKConfig.ToolbarSets["Basic"]最简单的
可以更改FCKConfig.ToolbarSets["mytool"],
在使用时编辑<FCK:editor toolbarSet="mytool" tinstanceName="productcontext" width=" " higth=" "></FCK:editor><br/>
FCKConfig.CustomConfigurationsPath ='';//FCKConfig.EditorPath+ 'myfckconfig.js' ;//指定我们自己的配置文件地址
FCKConfig.EditorPath指的是fckeditor--editor--
FCKConfig.EditorAreaCSS ='';// FCKConfig.BasePath + 'css/fck_editorarea.css' ;//指定我们编辑器内的样式文件
myfckconfig.js
FCKConfig.EnterMode = 'br' ; // p | div | br
FCKConfig.ShiftEnterMode = 'p' ; // p | div | br
FCKConfig.ToolbarSets["mytool"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor']
// No comma for the last row.
] ;
FCKConfig.FontNames = '宋体;黑体;楷体_GB2312;隶书;华文行楷;华文新魏;幼圆;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;' ;
修改笑脸图标时,和原本文件名一样改对应图片和大小即可
修改皮肤skin时也一样