fck2.6.4.1使用

來源:互聯網
上載者:User

http://www.fckeditor.net/
1:兩種調用方式
   js調用如test1.html,test2.html.注意BasePath 屬性"/aa/fckeditor/"以及引入js檔案
   自訂JSP標籤調用(editor.jsp),需要引入6個jar包slf4j-simple-1.5.8.jar,imageinfo-1.9.jar,slf4j-api-1.5.8.jar,commons-fileupload-1.2.1.jar,java-core-2.5.jar,commons-io-1.3.2.jar
   ,見fckeditor-java-demo-2.5.war在tomcat運行時自動解壓後的檔案。
2:修改配置【見官方文檔】
    直接修改fckconfig.js不推薦
    一般自己建個設定檔myfckconfig.js,在fckconfig.js第一行指定路徑  FCKConfig.CustomConfigurationsPath = '/aa/myconfig.js' ;
    或者在頁面的調用代碼中指定 oFCKeditor.Config["CustomConfigurationsPath"] = "/aa/myconfig.js"  ;
    如果修改了fckconfig.js又在頁面的調用代碼中改了,最後結果為頁面中的。
3:常見修改
    自訂ToolbarSet,去掉一些不需要的功能
       a:在自訂的myfckconfig.js中增加FCKConfig.ToolbarSets["sutk"] = 。。。對照功能不要的一個個去掉就行了 b:在調用的頁面中oFCKeditor.ToolbarSet="sutk";
    加一些常用的字型
       FCKConfig.FontNames = '宋體;楷體_GB2312;黑體;隸書;Times New Roman;Arial';
    修改斷行符號和shift+斷行符號的換行行為,下面為已經改好的,原來是剛好相反的  
     FCKConfig.EnterMode = 'br' ;   
     FCKConfig.ShiftEnterMode = 'p' ;
    修改編輯地區的樣式檔案
        FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;//原設定檔中FCKConfig.BasePath跟頁面中設定的非同一個,在fckconfig.js調用alert方法測試即可
        對應在/fckeditor/editor
    更換表情圖片
      把fckconfig.js中FCKConfig.SmileyPath開始5行複製到myconfig.js中進行修改
      a;把需要顯示的圖片複製到第一行指定的檔案夾下 b:在第二行輸入檔案名稱
      c:當圖片太多一屏顯示不完時,需要設定高度和寬度
         右擊表情圖片的視窗的屬性找到檔案/fckeditor/editor/dialog/fck_smiley.html
         在onload方法中修改dialog.SetAutoSize( true ) 為dialog.SetAutoSize( false) ;
         出現不了捲軸修改<body style="overflow: hidden">為<body style="overflow: auto">查css樣式

由於應用程式的路徑不確定,把myconfig.js移到跟原來的設定檔到同一檔案夾下,修改fckconfig.js第一行為FCKConfig.CustomConfigurationsPath = FCKConfig.EditorPath+'myconfig.js' ;

    
4:圖片上傳
  1:進入到fckeditor-java-2.5-bin/fckeditor-java-2.5/site中的index.html中點擊左側的Connector Servlet又說明文檔
     a:複製<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>
    到web.xml中
       b:Create a fckeditor.properties file in your classpath and add:
         connector.userActionImpl=net.fckeditor.requestcycle.impl.EnabledUserAction
    中文問題:
    1:上傳中文名稱圖片

     最新版本支援中文的,以前不支援,需要修改方法如下
      找到上面配置的servlet,然後關聯源碼,將源碼複製後自己寫一個servlet,然後在doPost中加上設定編碼(UTF-8)的方法,最後將web.xml中的配置改成剛添加的servlet
    2:建立中文檔案名稱亂碼問題【2.4修改如下】
      首先提交內容是否正確編碼,然後看伺服器端是否正確解碼   
      在Create New folder處右擊找到/fckeditor/editor/filemanager/browser/default/frmcreatefolder.html檔案 找到oConnector.SendCommand
      然後在父視窗browser.html中101彈出sUrl找到對應的servlet,在doGet方法中採用new String("iso-8859-1","utf-8")
      2.6版本直接修改tomcat中server.xml在
      <Connector port="8080" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443"
      URIEncoding="UTF-8"
      />
   此修改後,第三也不會出現亂碼
     3:引用中文名的圖片不能正常顯示
       在ConnectorServlet中26行採用UUID編碼
       filename=UUID.randomUUID().toString+"."+extension;【推薦使用該方法】 
5:控制上傳檔案的類型(見圖fck)
   修改服務端(fckeditor.properties)[在java-core-2.5.jar的net.fckeditor.handlers.default.properties中]和用戶端(自己寫的myconfig.js),media無需修改服務端
    connector.resourceType.image.extensions.allowed = bmp|gif|jpeg|jpg|png|abc(加上一個abc),FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png|bmp|abc)$" ; 
 
6:控制上傳檔案的大小
    右擊屬性找到頁面/fckeditor/editor/dialog/fck_image.html,找到fck_image/fck_image.js,查看彈出提示,設定一個沒有用到的錯誤碼
    修改servlet,270行的樣子,在不允許上傳檔案類型後
    else if(uplFile.getSize>10*1024)    {
     ur=new UploadResponse(1111);
    } 
    在修改fck_image.js加上對錯誤碼的判斷即可。
   
7:去掉瀏覽伺服器按鈕
   找到檔案的路徑注釋掉就行了。【在檔案中顯示的是英文,在一個js檔案中對應了zh_cn.js】  

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.