页面添加文本编辑器

1,把fckeditor文件夹整个复制到项目下WebContent（或者WebRoot）下
2，把fck相关jar放入到项目lib下
3.在项目的src下创建一个文件文件名：fckeditor.properties
在此文件中加入:
connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl

4.在web.xml中加入配置

   <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>
       
       <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时也一样

页面添加文本编辑器

猜你喜欢