6.总结:
配置FCKeditor的方法:
a.直接修改主配置文件,fckconfig.js
b.定义单独的配置文件(只需要写修改的配置项,然后在fckconfig.js中引入)
c.在页面的调用代码中对FCKeditor的实例进行配置
d.配置后可进行刷新以查看效果:在火狐中ctrl+f5强制刷新,在ie中shift+ctrl+r是强制刷 新
------------------------------------------
7.如果两者都配置了,那么按谁来执行呢
配置加载顺序问题:
a.加载主配置文件fckconfig.js
b.加载自定义的配置文件(如果有),覆盖相同的配置项
c.使用对实例的配置覆盖相同的配置项(只对当前实例有效)
----------------------------------------------------
8.对fckeditor进行设置:
a.去掉fckeditor的相关功能:只需进行如下配置:
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.
] ;
上面的这些配置就是,fckeditor的ToolbarSets的设置,只要去掉相关功能的字符串就可以去掉相关的功能,比如去掉save那么,保存的按钮就会自动消失
----------------------------------------------------------
b.修改enter功能键,未修改前enter是另起一段落,而不是另起一行
FCKConfig.EnterMode = 'br' ;// p | div | br 就是设置enter键对应的操作,p是另 起一段,br是另起一行
FCKConfig.ShiftEnterMode = 'p' ;// p | div | br
c.修改界面上的字体:
FCKConfig.FontNames= '宋体;楷体_GB2312;黑体;隶书;Times New Roman;Arial' ;//改 变页面的字体,改变了此项会在字体的下拉列表中看到,并且可以使用
------------------------------------------------------------
9.设置编辑区域的样式:这些都是在配置文件中设置的
a.注意:FCKConfig.BasePath指的是:/FckEditerTest/WebRoot/fckeditor/editor
b.FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;那么 由这个可知:样式文件的路径:
/FckEditerTest/WebRoot/fckeditor/editor/css/fck_editorarea.css
c.只需要修改这个样式文件就行
------------------------------------------------------------------------
10.配置表情图片
a.FCKConfig.SmileyPath
= FCKConfig.BasePath + 'images/smiley/msn/' ;
这里的意思是:表情图片的目录是一个文件夹
b.FCKConfig.SmileyImages=['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'] ;
这里指的是要显示文件夹中的哪些图片;
c.
FCKConfig.SmileyColumns = 8 ;//一行显示图片的个数
d.FCKConfig.SmileyWindowWidth
= 320 ;
FCKConfig.SmileyWindowHeight= 210 ;
配置显示表情图片的窗口的高度和宽度
e.可以通过修改表情包的目录,以及修改要显示的表情图片的名字来定义自己的表情
问题:如果表情很多的话,他会自动的调整高度,以至于所有的已经配置的表情被显示
这样就会显示的不匀称,那么可以通过修 改/FckEditerTest/WebRoot/fckeditor/editor/dialog/fck_select.html
这个文件的:
dialog.SetAutoSize( true ) ;这句话,把这句话删除掉就可以了
f.这样的话,虽然可以先调整窗口按照自己的设置大小来显示,但是表情图片的内容却有很 多显示不出来,这时候可以:修 改/FckEditerTest/WebRoot/fckeditor/editor/dialog/fck_select.html
中:
<body style="overflow: hidden">
<table cellpadding="2" cellspacing="2" align="center" border="0" width="100%" height="100%">
<script type="text/javascript">
把这一句:<body style="overflow: auto/scroll">:auto的意思是当需要的时候显示滚动 条,scroll的意思是始终显示滚动条;
-------------------------------------------------------------
11.
a.由于项目发布后,可能更改工程名字,所以这里写 的:FCKConfig.CustomConfigurationsPath = '/FckEditerTest/myconfig.js' ;
是有问题的:
b.可以这样解决这个问题:
/FckEditerTest/WebRoot/fckeditor/editor由于BasePath指的是这个文件夹,所以可以把 我们自定义的这个myconfig.js放到/FckEditerTest/WebRoot/fckeditor/editor下面;
c.BasePath+"myconfig.js"
或者是EditorPath,这里BasePath和EditorPath都是代 表:/FckEditerTest/WebRoot/fckeditor/editor
d.配置完后:两种方法;
//FCKConfig.CustomConfigurationsPath = FCKConfig.EditorPath +"myconfig.js";
FCKConfig.CustomConfigurationsPath = FCKConfig.BasePath +"myconfig.js";
-----------------------------------------------------------------------------
12.需要注意的两点:
a.在使用配置文件的时候要使用utf-8编码来保存
b.FCKConfig.BasePath和调用fckeditor的时候在test.html中指定的FCKConfig.BasePath
是不同的,test.html中的那个FCKConfig.BasePath是指调用fckeditor的 FCKConfig.BasePath
-------------------------------------------------
13.文件上传的使用
a.java.lang.ClassNotFoundException: org.apache.commons.fileupload.FileUploadException
在启动部署的时候,出现这个错误:
是因为当commons-fileupload包从版本1.0升到1.1时， DeferredFileOutputStream.class被移走了。如果Tomcat使用1.1及其以上版本，你得 为它找到这个类。这里只需要拷贝 commons-fileupload.jar进来;
commons-io
catalina-manager.jar
commons-fileupload.jar
--------------------------------------------------------------
b.需要在web.xml中加入:
log4j:WARN No appenders could be found for logger (net.fckeditor.handlers.PropertiesLoader).
log4j:WARN Please initialize the log4j system properly.
这个问题:一般是由于:
1.是在加载org.springframework.web.context.ContextLoader这个listener的时候没 找到log4j的配置文件造成的。
仔细查看web.xml发现在加载org.springframework.web.context.ContextLoader这个 listener之后才加载org.springframework.web.util.Log4jConfigListener，把 log4j的配置放到org.springframework.web.context.ContextLoader之前，就可以解 决这个问题了。
Xml代码
<!-- 以下3项参数与log4j的配置相关 -->
<context-param>
<param-name>log4jConfigLocation</param-name>
<param-value>/WEB-INF/log4j.properties</param-value>
</context-param>
<context-param>
<param-name>log4jRefreshInterval</param-name>
<param-value>60000</param-value>
</context-param>
<listener>
<listener-class>
org.springframework.web.util.Log4jConfigListener
</listener-class>
</listener>
<!-- end -->
<listener>
<listener-class>
org.springframework.web.context.ContextLoaderListener
</listener-class>
</listener>
----------------------------------------------------------------------------
2.因为没有加入log4j.properties配置文件;
--------------------------------------------------------------------------------
c.上传文件的时候弹出:the server didnt replay with a proper xml
data.please check your configuration
是因为没有加入jar包,或者;
网站设置了主题theme，导致fckeditor出错。
在FCKEditor目录下增加一个web.config。
<configuration>
<appSettings/>
<connectionStrings/>
<system.web>
<pages styleSheetTheme="" theme=""></pages>
</system.web>
</configuration>
--------------------------------------------------------------------
d.java.lang.ClassNotFoundException: org.devlib.schmidt.imageinfo.ImageInfo
因为没有加:
imageinfo-1.9.jar
log4j.jar
需要加的包有:
commons-fileupload-1.2.1.jar
commons-io-1.3.2.jar
fckeditor-java-core-2.6.jar
imageinfo-1.9.jar
log4j.jar
slf4j-api-1.5.8.jar
slf4j-log4j12.jar
---------------------------------------------------------------
e.这样就可以上传图片成功了:上传图片的位置是:
G:\apache-tomcat-6.0.10\webapps\FckEditerTest\userfiles\image
----------------------------------------------------------------------
13.在上传文件中的一些问题的解决:
a.上传中文名的文件时,出现乱码;
解决方法:文件上传以post方式提交,如果页面的编码没有以支持中文的编码来对文件名 进行编码,会出现乱码
上传的文在:
http://localhost:6118/FckEditerTest/fckeditor/editor/filemanager/
browser/default/frmupload.html看其中的编码是否为utf-8
b. 如果不是以上原因的话,那么需要找到:
net.fckeditor.connector.ConnectorServlet.java
找到源码,并且复制:在src下新建一个ConnectorServlet.java把源码复制过去,修改
有关编码的部分:
在try{ List<FileItem> items=upload.parseRequest(request)
FileItem upFile=items.get(0);的前面写上:
upload.setHeaderEncoding("UTF-8");
然后,在web.xml中修改:
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>
net.fckeditor.connector.ConnectorServlet//把这个修改成自己修改的那一个 // 已经处理完编码问题的那一个
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
-------------------------------------------------------------
14.创建中文名的文件夹的时候会出现文件夹的名字为乱码
a.http://localhost:6118/FckEditerTest/fckeditor/editor/filemanager/
browser/default/frmcreatefolder.html控制新建的是这个文件
b.<meta http-equiv="Content-Type" content="text/html; charset=utf-8">编码没有问 题
可以看到,他是通过一个方法来创建文件夹:function CreateFolder()
oConnector.SendCommand( 'CreateFolder', 'NewFolderName=' + encodeURIComponent( sFolderName) , CreateFolderCallBack ) ;
----------------------------------------------------------------------------
c.注意: oConnector.SendCommand()这个方法在frmcreatefolder.html是找不到的,他调用 的是他的父窗口中的方法;
他的父窗口是:
http://localhost:6118/FckEditerTest/fckeditor/editor/filemanager/
browser/default/browser.html?Type=Image&Connector=http
%3A%2F%2Flocalhost%3A6118%2FFckEditerTest%2Ffckeditor%2Feditor
%2Ffilemanager%2Fconnectors%2Fphp%2Fconnector.php
可以找到:browser.html这个文件:
oConnector.SendCommand = function( command, params, callBackFunction )
这里面有oConnector这个对象的定义,也有SendCommand方法:params这个参数就是带有了
文件夹的名字:可以看到在frmcreatefolder.html中的
function CreateFolder()
oConnector.SendCommand( 'CreateFolder', 'NewFolderName=' + encodeURIComponent( sFolderName) , CreateFolderCallBack )
这一句把编码后的文件夹的名字传给了SendCommand方法;
找到:sUrl += '&Type=' + this.ResourceType ;
可以看到他请求的地址是在web.xml中配置的,那个url-partten;
他以get的方式提交给了后台
所以还是要修改那个ConnectorServlet
查看这个servlet的doget方法:修改:
可以看到他没有对中文进行处理:
修改为:
String tempStr=request.getParameter(0);
String folderName=new String(tempStr.getBytes("iso8859-1"),"utf-8");
//先把他还原为iso8859-1,然后再创建utf-8
这样就解决了文件夹名字的乱码问题;
-----------------------------------------------------------------------------
15.引用中文名的图片不能正常显示:
1.第一个解决办法:修改tomcat的连接器配置:
G:\apache-tomcat-6.0.10\conf的server.xml文件
-->
<Connector port="6118" protocol="HTTP/1.1"
maxThreads="150" connectionTimeout="20000"
redirectPort="8443"
URIEncoding="UTF-8"//这个是新加入的,这样就可以使用中文文件名了
/>
2.当使用这个路径访问服务器的时候,tomcat的连接器默认会用iso8859-1的方式进行
解码,当 URIEncoding="UTF-8"的时候就是使用指定的编码进行解码这样就解决了
/FckEditerTest/userfiles/image/%E7%BD%91%E7%90%83%E7%8E%8B%E5%AD%90.gif
不过这个方法最好不要使用,因为他会对,使用get方法传递的参数产生影响,比如
刚刚解决的创建中文文件夹的问题又出现了;
3.第二种解决方法:避免使用中文文件名字
在dopost()方法中找到保存文件的那一段代码:
File pathToSave= new File(currentDir,filename);
这里的filename就是上传的文件名:
修改一下:
filename=UUID.randomUUID().toString()+"."+extension;
这就是说,在保存文件之前把文件名替换成了uuid;
这样就避免了引用中文名字的图片;