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】