FCKeditor2.6學習總結

 1、FCK的各種屬性:
圖片
var FCKeditor = function( instanceName, width, height, toolbarSet, value );
其中instanceName屬性爲編輯器輸出的textarea元素的name屬性值,必須指定。
參數會賦給同名屬性。
2、以JavaScript方式引用FCKeditor有兩種常用方式:
《1》先引人外部js文件
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
var oFCKeditor = new FCKeditor( 'FCKeditor1' );
  //oFCKeditor.Config["CustomConfigurationsPath"] = '/TestFckeditor/fckeditor/myconfig.js' ;
  //注意路徑問題
  //http://localhost:8080/fckeditor
  //oFCKeditor.BasePath = "/fckeditor/" ;
  //http://localhost:8080/TestFckeditor/fckeditor
  oFCKeditor.BasePath="/TestFckeditor/fckeditor/";
  oFCKeditor.ToolbarSet="newsAll";
  oFCKeditor.Create();
《2》和方法一類似
先引入外部文件<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
  window.onload = function()
  {
   var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
   oFCKeditor.BasePath = "/TestFCKeditor/fckeditor/" ;
   oFCKeditor.ReplaceTextarea() ;
  }
 </script>
<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>
 
3、JSP中通過自定義標籤調用FCKeditor:
先複製5個jar包至WEB-INF/lib下面
commons-fileupload-1.2.1.jar
commons-io-1.3.2.jar
fckeditor-java-core-2.6.jar
imageinfo-1.9.jar
slf4j-api-1.5.8.jar
slf4j-simple-1.5.8.jar
引入標籤庫<%@taglib uri="http://java.fckeditor.net" prefix="FCK" %>
在需要的位置加入<FCK:editor instanceName="myEditor" basePath="/fckeditor" height="500px" />即可
 
basePath以“/”開頭,並且這個“/”代表當前工程的路徑。
value屬性值可有可無(修正了以前版本的bug)
4、配置FCKeditor
注意事項:
直接修改主配置文件fckconfig.js
定義單獨的配置文件(只需要寫需要修改的配置項)
在頁面的調用代碼中對FCKeditor的實例進行配置
配置加載順序:
加載主配置文件fckconfig.js
加載自定義配置文件(如果有),覆蓋相同的配置項
使用對實例的配置覆蓋相同的配置項(只對當前實例有效)
 
系統會自動偵測並運用適當的界面語言(默認,可以修改)
不能刪除主配置文件fckconfig.js
修改配置後要清理緩存,以免影響結果
(或訪問時強制刷新也可IE是CTRL+F5;firefox是Shift+CTRL+R)
 
各種配置簡介:
自定義ToolbarSet,去掉一些功能
var oFCKeditor = new FCKeditor( 'FCKeditor1' );
oFCKeditor.ToolbarSet="newsAll";(newsAll是配置ToolbarSet時起的名字)
 
加幾種常用的字體:
FCKConfig.FontNames = '宋體;楷體;黑體;新宋體;仿宋;華文行楷;華文中宋;楷體_GB2312;隸書;幼圓;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
 
修改“回車”和“Shift+回車”的換行行爲。
FCKConfig.EnterMode = 'br' ;   // p | div | br
FCKConfig.ShiftEnterMode = 'p' ; // p | div | br
 
更換表情圖片
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/wangwang/' ;
FCKConfig.SmileyImages = ['0.gif','1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif','11.gif','12.gif','13.gif','14.gif','15.gif','16.gif','17.gif','18.gif','19.gif','20.gif','21.gif','22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif','30.gif','31.gif','32.gif','33.gif','34.gif','35.gif','36.gif','37.gif','38.gif','39.gif','40.gif','41.gif','42.gif','43.gif','44.gif','45.gif','46.gif','47.gif','48.gif','49.gif','50.gif','51.gif','52.gif','53.gif','54.gif','55.gif','56.gif','57.gif','58.gif','59.gif','60.gif','61.gif','62.gif','63.gif','64.gif','65.gif','66.gif','67.gif','68.gif','69.gif','70.gif','71.gif','72.gif','73.gif','74.gif','75.gif','76.gif','77.gif','78.gif','79.gif','80.gif','81.gif','82.gif','83.gif','84.gif','85.gif','86.gif','87.gif','88.gif','89.gif','90.gif','91.gif','92.gif','93.gif','94.gif','95.gif','96.gif','97.gif','98.gif'] ;
FCKConfig.SmileyColumns = 8 ;
FCKConfig.SmileyWindowWidth  = 668 ;
FCKConfig.SmileyWindowHeight = 480 ;
如果表情窗口過大,可以修改fckeditor/editor/dialog/fck_smiley.html中的內容加以修正:註釋掉dialog.SetAutoSize( true ) ;並修改<body style="overflow: hidden">爲<body style="overflow: auto">
 
提示:
配置文件要使用UTF-8編碼保存;
FCKConfig.BasePath和調用fckeditor時指定的BasePath(FCKConfig.BasePath)不是同一個,其值也不一樣。
 
5、文件上傳
在web.xml中加入一個servlet配置
<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>
再在classpath目錄下放一個fckeditor.properties文件
在其中加入以下內容
connector.userActionImpl=net.fckeditor.requestcycle.impl.EnabledUserAction
 
上傳文件文件名中文亂碼問題在FCKeditor2.6.6以後已被解決;若用的是以前的版本,會出現中文亂碼,我們可以重寫net.fckeditor.connector.ConnectorServlet這個類,將其中的doPost()方法中的request編碼設爲UTF-8(upload.setHeaderEncoding("UTF-8")),然後再web.xml中修改servlet的配置;
新建文件夾也會出現亂碼,在FCKeditor2.6.6以後也已被解決:若是以前版本同樣是在上面重寫的類中的doGet()方法中將新建文件夾字符串進行編碼後設置進去(String tempStr = request.getParameter("newFolderStr"); tempStr = tempStr.getBytes("ISO8859-1"),"UTF-8")
上傳文件時,我們一般是將文件名用UUID方式修改之後再進行上傳;防止中文文件名訪問亂碼問題(UUID.randomUUID())
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章