fckeditor组件使用---配置FCKeditor,以及使用方法2

时间:2022-10-29 17:08:06
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;
     这样就避免了引用中文名字的图片;