茫茫網海中的冷日
         
茫茫網海中的冷日
發生過的事,不可能遺忘,只是想不起來而已!
 恭喜您是本站第 1672241 位訪客!  登入  | 註冊
主選單

Google 自訂搜尋

Goole 廣告

隨機相片
F09_061.jpg

授權條款

使用者登入
使用者名稱:

密碼:


忘了密碼?

現在就註冊!

爪哇咖啡屋 : [轉貼]FCKeditor For Java/Jsp

發表者 討論內容
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15771
[轉貼]FCKeditor For Java/Jsp
FCKeditor For Java/Jsp

1.下載
FCKeditor.java 2.3/FCKeditor-2.3.zip (FCKeditor for java)
FCKeditor_2.3b.zip (FCKeditor基本文件)

2.建立項目:Project/FCKeditor

3.FCKeditor.java FCKeditor-2.3.zip解壓後,把其中的web目錄下的WEB-INF目錄copy到FCKeditor下(裡面有commons-fileupload.jar, FCKeditor-2.3.jar,web.xml等幾個文件), 把其中的src目錄下的FCKeditor.tld文件copy到FCKeitor/WEB-INF/下

4.修改web.xml:
把SimpleUploader中的配置屬性enabled定義為true(開啟文件上傳功能),加上editor所在目錄
 <servlet-mapping>
 <servlet-name>Connector</servlet-name>
 <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
 </servlet-mapping>

 <servlet-mapping>
 <servlet-name>SimpleUploader</servlet-name>
 <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploader</url-pattern>
 </servlet-mapping>

添加標籤定義:
<taglib>
<taglib-uri>/FCKeditor</taglib-uri>
<taglib-location>/WEB-INF/FCKeditor.tld</taglib-location>
</taglib>


5.解壓FCKeditor_2.3b.zip後,把目錄/editor和fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml四個文件copy到/FCKeditor下
刪除目錄/editor/_source,
刪除/editor/filemanager/browser/default/connectors/下的除了test.html外的所有文件夾
刪除/editor/filemanager/upload/下除了test.html外的所有文件夾

6.打開/FCKeditor/fckconfig.js
修改
FCKConfig.DefaultLanguage = 'zh-cn' ;

把FCKConfig.LinkBrowserURL等的值替換成以下內容:
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html"
+ "?Connector=connectors/jsp/connector" ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html"
+ "?Type=Image&Connector=connectors/jsp/connector" ;
FCKConfig.FlashBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html"
+ "?Type=Flash&Connector=connectors/jsp/connector" ;
FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File' ;
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image' ;
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ;


7.三種方法調用FCKeditor
(1).FCKeditor自定義標籤 (必須加頭文件 <%@ taglib uri="/FCKeditor" prefix="FCK" %> )
顯示
<form action="show.jsp" method="post" target="_blank">
<FCK:editor id="content" basePath="/FCKeditor/" width="700" height="500" skinPath="/FCKeditor/editor/skins/silver/"
 toolbarSet = "Default" >
input
</FCK:editor>
<input type="submit" value="Submit">
</form>

(2).script腳本語言調用 (必須引用 腳本文件 )
顯示
<form action="show.jsp" method="post" target="_blank">
<table border="0" width="700"><tr><td>
<textarea id="content" name="content" style="WIDTH: 100%; HEIGHT: 400px">input</textarea>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('content') ;
oFCKeditor.BasePath = "/FCKeditor/" ;
oFCKeditor.Height = 400;
oFCKeditor.ToolbarSet = "Default" ;
oFCKeditor.ReplaceTextarea();
</script>
<input type="submit" value="Submit">
</td></tr></table>
</form>

(3).FCKeditor API 調用 (必須加頭文件 <%@ page language="java" import="com.fredck.FCKeditor.*" %> )
<form action="show.jsp" method="post" target="_blank">
<%
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, "content" ) ;
oFCKeditor.setBasePath( "/FCKeditor/" ) ;
oFCKeditor.setValue( "input" );
out.println( oFCKeditor.create() ) ;
%>
<br>
<input type="submit" value="Submit">
</form>


8.輸出:
<%
String content = request.getParameter("content");
out.print(content);
%>


另:FCKeditor for Java的上傳是通過servlet進行的,不是Jsp,所以配置文件web.xml中的"editor/filemanager/browser/default/connectors/jsp/connector" jsp/connector 目錄並不存在,只要配置好FCKeditor.java就行了,最後上傳非常快

原文出處:FCKeditor For Java/Jsp 感冒
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15771
[轉貼]在JSP中應用FCKeditor
在JSP中應用FCKeditor(2.1.1和FCKeditor.Java 2.3)

上次介紹了FCKeditor在asp中的應用,這次介紹它在jsp中的應用。

1. 將FCKeditor2.1.1解壓縮到項目的根目錄下,目錄結構為:\項目名\FCKeditor\ ,然後將FCKeditor-2.3.zip(java)壓縮包中\web\WEB-INF\lib\目錄下的兩個jar文件拷到項目的\WEB-INF\lib\目錄下。

2. 將FCKeditor-2.3.zip壓縮包中\web\WEB-INF\目錄下的web.xml文件合併到項目的\WEB-INF\目錄下的web.xml文件中。

3. 修改合併後的web.xml文件,將名為SimpleUploader的Servlet的enabled參數值改為true,以允許上傳功能,Connector Servlet的baseDir參數值用於設置上傳文件存放的位置。

4. 上面兩個servlet的映射分別為:
/editor/filemanager/browser/default/connectors/jsp/connector
/editor/filemanager/upload/simpleuploader
因為我的FCKeditor是放到\項目名\FCKeditor\目錄下,所以需要在兩個映射前面加上/FCKeditor,即改為
/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector
/FCKeditor/editor/filemanager/upload/simpleuploader。

5. 採用Taglib在jsp中添加如下代碼創建在線編輯器:
在頁面的頂部加入
<%@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="FCK" %>

在適當的位置加入下面代碼
<FCK:editor id="infoContent" basePath="/CM/FCKeditor/"
width="522"
height="300"
skinPath="/CM/FCKeditor/editor/skins/silver/"
defaultLanguage="zh-cn"
tabSpaces="8"
toolbarSet="CM"
imageBrowserURL="/CM/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
linkBrowserURL="/CM/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
flashBrowserURL="/CM/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
imageUploadURL="/CM/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"
linkUploadURL="/CM/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"
flashUploadURL="/CM/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">
請輸入內容
</FCK:editor>

注意/CM/,這個表示訪問項目的URL為http://127.0.0.1:8080/CM/,如果訪問的URL為:http://127.0.0.1:8080/ 的話,只需要將上面的/CM去掉就行,不用修改web.xml文件。

6. 經過上面步驟就可以在jsp中使用FCKeditor了。

===================================================================

另外,如果使用WebLogic,需要將FCKeditor-2.3.zip壓縮包中src目錄下的FCKeditor.tld文件提取出來,比如將其放到WEB-INF/tlds/目錄下,然後將jsp頁中的taglib語句修改為如下所示,就可以正常使用了:
<%@ taglib uri="/WEB-INF/tlds/FCKeditor.tld" prefix="FCK" %>


原文出處:郭成的BLOG
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15771
[轉貼]FCKeditor修改上傳目錄、JS取得資料、JS控制
FCKeditor的幾點重要改進和使用心得,值得分享!

[轉] 以前購買過eWebEditor,功能應該還是不錯的,但到了現在,也還僅是一個IE only的版本,無法滿足現在差異化的需求。故前段時間下了最新的FCKeditor2.3.3版本下來(當然了,連帶java的integration),demo來看看,發現有幾個不滿意的地方:

1、上載的文件,只能放在URL可及的地方(如默認只能放到嵌入應用路徑的/UserFiles/下);
2、沒有明確的上載視頻的按鈕;
3、圖片、FLASH、附件上載等,步驟多,複雜度高(想想,用戶不都是高手)。

怎麼辦呢,改!

一、第一個就是增加一個FileLocatorServlet,思路很簡單:通過這個服務來定位文件,而不是之間產生鏈接,既是安全的考慮,也是應用集群的一個重要考慮點。而且原來的幾個servlet的配置囉嗦且重疊,難以讓人產生美感。所謂代碼勝千言,通過下面的web.xml大家應該可以看出修理的要點:

程序代碼:
<? xml version="1.0" encoding="ISO-8859-1" ?>
<! DOCTYPE web-app
PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.2//EN"
"http://java.sun.com/j2ee/dtds/web-app_2_2.dtd" >

< web-app >
< display-name > FCKeditor Test Application </ display-name >
< context-param >
<!-- setting the FCKecitor context based parameters -->
<!-- baseDir means the root of the uploaded file/image/flash stored
the prefix of 'file:/' means strore in a file system root that cannot get from webapp url
-->
< param-name > baseDir </ param-name >
< param-value > file:/C:/Temp/FCKeditorUpload/ </ param-value >
</ context-param >

< context-param >
<!--
if the baseDir prefix by 'file:/',please set it.
-->
< param-name > fileLocator </ param-name >
< param-value > /editor/filemanager/browser/default/service/jsp/filelocator </ param-value >
</ context-param >

< context-param >
<!--
debug setting,true means verbose output to the console.
-->
< param-name > debug </ param-name >
< param-value > true </ param-value >
</ context-param >

< context-param >
<!--
enabled setting,true means upload enabled.
-->
< param-name > enabled </ param-name >
< param-value > true </ param-value >
</ context-param >

< context-param >
<!--
encoding,the response encoding of the file/image/flash,default is UTF-8
-->
< param-name > encoding </ param-name >
< param-value > UTF-8 </ param-value >
</ context-param >

< context-param >
<!--
contentTypeMapping,a map for the response ContentType
-->
< param-name > contentTypeMapping </ param-name >
< param-value > doc=application/vnd.ms-word
|xls=application/vnd.ms-excel
|jpg=image/jpeg
|gif=image/gif
|swf=application/x-shockwave-flash
|avi=video/x-msvideo
</ param-value >
</ context-param >

< context-param >
<!--
allowedExtensionsFile,the logic is 'Not allowed means deny.'
-->
< param-name > allowedExtensionsFile </ param-name >
< param-value > doc|xls|pdf|avi </ param-value >
</ context-param >

< context-param >
<!--
allowedExtensionsImage,the logic is 'Not allowed means deny.'
-->
< param-name > allowedExtensionsImage </ param-name >
< param-value > jpg|gif|png </ param-value >
</ context-param >

< context-param >
<!--
allowedExtensionsFlash,the logic is 'Not allowed means deny.'
-->
< param-name > allowedExtensionsFlash </ param-name >
< param-value > swf|fla </ param-value >
</ context-param >

< servlet >
< servlet-name > Connector </ servlet-name >
< servlet-class > com.fredck.FCKeditor.connector.ConnectorServlet </ servlet-class >
< load-on-startup > 1 </ load-on-startup >
</ servlet >

< servlet >
< servlet-name > FileLocator </ servlet-name >
< servlet-class > com.fredck.FCKeditor.service.FileLocatorServlet </ servlet-class >
< load-on-startup > 1 </ load-on-startup >
</ servlet >

< servlet >
< servlet-name > SimpleUploader </ servlet-name >
< servlet-class > com.fredck.FCKeditor.uploader.SimpleUploaderServlet </ servlet-class >
< load-on-startup > 1 </ load-on-startup >
</ servlet >

< servlet-mapping >
< servlet-name > Connector </ servlet-name >
< url-pattern > /editor/filemanager/browser/default/connectors/jsp/connector </ url-pattern >
</ servlet-mapping >

< servlet-mapping >
< servlet-name > SimpleUploader </ servlet-name >
< url-pattern > /editor/filemanager/upload/simpleuploader </ url-pattern >
</ servlet-mapping >

< servlet-mapping >
< servlet-name > FileLocator </ servlet-name >
< url-pattern > /editor/filemanager/browser/default/service/jsp/filelocator </ url-pattern >
</ servlet-mapping >

</ web-app >


連帶FCKeditorConfigurations.java一併修理,配置統一且singleton。關鍵代碼為:

程序代碼:
/** */ /**
* Make the configuration sigleton
* @param sc
* @return the static configuration map
*/
public static Map getContextConfigurationsInstance(ServletContext sc) {
if (contextConfigurations == null ) {
initContextConfigurations(sc);
}
return contextConfigurations;
}

/** */ /**
* Init all the FCKeditor configuration.
* add by zhengxq
* @param sc
*/
private static void initContextConfigurations(ServletContext sc) {
if (debug)
System.out.println( " \r\n---- FCKeditorConfigurations for java initialization started ---- " );

String baseDir = sc.getInitParameter( " baseDir " );
String fileLocator = sc.getInitParameter( " fileLocator " );
String debugStr = sc.getInitParameter( " debug " );
String enabledStr = sc.getInitParameter( " enabled " );
String encoding = sc.getInitParameter( " encoding " );
String contentTypeMapping = sc.getInitParameter( " contentTypeMapping " );
String AllowedExtensionsFile = sc.getInitParameter( " allowedExtensionsFile " );
String AllowedExtensionsImage = sc.getInitParameter( " allowedExtensionsImage " );
String AllowedExtensionsFlash = sc.getInitParameter( " allowedExtensionsFlash " );

debug = ( new Boolean(debugStr)).booleanValue();
encoding = (encoding == null || encoding.length() == 0 ) ? " UTF-8 " :encoding;

if (baseDir == null || baseDir.length() == 0 ) baseDir = defaultBaseDir;
String realBaseDir = defaultBaseDir;
if (baseDir.startsWith(fileSystemUriPrefix)) {
realBaseDir = baseDir.substring(fileSystemUriPrefix.length());
} else {
realBaseDir = sc.getRealPath(baseDir);
fileLocator = null ; // no use and should set null
}
File baseFile = new File(realBaseDir);
if ( ! baseFile.exists()) {
baseFile.mkdir();
}
contextConfigurations = new HashMap();
contextConfigurations.put( " baseDir " ,baseDir);
contextConfigurations.put( " realBaseDir " ,realBaseDir);
contextConfigurations.put( " fileLocator " ,fileLocator);
contextConfigurations.put( " debug " ,debugStr);
contextConfigurations.put( " enabled " ,enabledStr);
contextConfigurations.put( " encoding " ,encoding);
contextConfigurations.put( " contentTypeMapping " ,contentTypeMappingToMap(contentTypeMapping));
contextConfigurations.put( " allowedExtensionsFile " ,stringToArrayList(AllowedExtensionsFile));
contextConfigurations.put( " allowedExtensionsImage " ,stringToArrayList(AllowedExtensionsImage));
contextConfigurations.put( " allowedExtensionsFlash " ,stringToArrayList(AllowedExtensionsFlash));

if (debug)
System.out.println( " \r\n---- FCKeditorConfigurations for java initialization end ---- " );

}


FileLocatorServlet.java也很簡單,無非就是文件的物理定位和文件流的輸出:

程序代碼:
String type = request.getParameter( " Type " );
String fileName = request.getParameter( " FileName " );

String realFilePath = config.get( " realBaseDir " ) + type + " / " + fileName;
File file = new File(realFilePath);
if (file.exists()) {
response.setHeader( " Content-Transfer-Encoding " , " base64 " );
response.setHeader( " Cache-Control " , " no-store " );
response.setHeader( " Pragma " , " no-cache " );
response.setDateHeader( " Expires " , 0 );
response.setContentType(getContentTypeByFileExt(fileName.substring(fileName.lastIndexOf( " . " ))));

ServletOutputStream out = response.getOutputStream();
InputStream in = new FileInputStream(file);
BufferedInputStream bis = new BufferedInputStream(in);
BufferedOutputStream bos = new BufferedOutputStream(out);
byte [] buff = new byte [ 2048 ];
int bytesRead;
while ( - 1 != (bytesRead = bis.read(buff, 0 , buff.length))) {
bos.write(buff, 0 , bytesRead);
}
if (bis != null ) {
bis.close();
}
if (bos != null ) {
bos.close();
}
} else {
throw new FileNotFoundException(fileName);
}

上述改動已經提交給了FCKeditor,如果大家真的有興趣,可以去找裡面我所提交的patch。

二、至於上述的2、3問題,同樣,動手即可解決,在此略過。

過程中倒是碰到幾個有意思的問題,成了花絮,其實也是使用FCKeditor的一些心得,寫寫可能還有點意思:

1、如何取得FCKeditor的值?
答案:這是我們常常幹的事情:取得這個值並賦值給某個hidden,再合法性檢查+submit等。怎麼取得呢?這樣:

程序代碼:
var oEditor = FCKeditorAPI.GetInstance('editor') ;
// Get the editor contents in XHTML.
// alert( oEditor.GetXHTML(true) ) ; // "true" means you want it formatted.
document.all( " tip.c_content " ).value = oEditor.GetXHTML( true );


2、如何使得FCKeditor接收tab鍵?

答案:我們希望界面元素按照外面的安排進行tab切換,但FCKeditor怎麼能做到呢?也有辦法:

程序代碼:
function focusIframeOnTab(caller, tabTargetId, callEvent) {
// If keypress TAB and not SHIFT+TAB
if (callEvent.keyCode == 9 && ! callEvent.shiftKey)
document.getElementById(tabTargetId).contentWindow.focus();
}


光光有個函數頂個什麼用,還要這樣:在之前的那個界面元素中加上下面的事件,如使用struts的tag的化,這樣就可以了:

程序代碼:
<html:text property ="tip.c_title" style ="width:450px" tabindex ="1"
onkeydown ="focusIframeOnTab(this, 'editor___Frame',event);if(!document.all) return false;" />

這點是google了半天最終在FCKeditor的FAQ中找到的,看來以後用開源的軟件第一件事情就是看FAQ,錯不了!

3、如何希望在FCKeditor加載完畢後做點什麼事情?
答案:也很簡單,編寫自己的FCKeditor_OnComplete函數,如:

程序代碼:
function FCKeditor_OnComplete( editorInstance ) {
window.status = editorInstance.Description ;
}


4、如果在圖片、FLASH等界面中上載了東西後,希望能告訴自己的表單,怎麼做?
答案:這個花了我不少看代碼和調試時間!其實這裡的關鍵就是如何獲取嵌入FCKeditor的那個window,這樣就可以了,在對應的js文件(如editor\dialog\fck_image\fck_image.js)中的ok方法的最後加入:

程序代碼:
// edit by zhengxq
try {
var obj = window.dialogArguments.Editor.parent.document;
obj.getElementById( " tip.c_tip_has_pic " ).value = " 1 " ;
} catch (e) {}


關鍵就是:window.dialogArguments.Editor.parent.document,這個能夠找到對應窗口的引用,有了這個,還不會控制嗎?!

有時需要用js來獲取FckEditor中的值

直接用document.getElementById('fckeditor').value是得不到的
正確的獲取方法:
var oEditor = FCKeditorAPI.GetInstance('editor') ;
alert(oEditor.GetXHTML(true));


js修改FckEdior的值:
var oEditor = FCKeditorAPI.GetInstance('editor') ;
oEditor.SetHTML('新內容');
alert(oEditor.GetXHTML(true));


原文出處:作者:Admin 日期:2007-09-09
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15771
[轉貼]FCKeditor解決中文檔案亂碼的簡易方法
fckeditor 編輯器(中文亂碼已修改)
關鍵字: fckeidtor 中文亂碼
這次項目剛好要用到在線編輯器,就上網找了fckeditor,網上資料挺多的,但改來改去還是花了不少時間!附件是我修改過的,置於webapps中即可運行,由於時間緊逼,文字稿寫時間不多,2希望該修改過的文件能給同仁們帶來方便.

沒想到javaeye也是用fckeditor,至於上傳部分的安全性,大家可以參考javaeye的這個編輯器

tomcat服務器的server.xml修改這二處
<Connector port="8080" maxHttpHeaderSize="8192"
  maxThreads="150" minSpareThreads="25" maxSpareThreads="75"
  enableLookups="false" redirectPort="8443" acceptCount="100"
  connectionTimeout="20000" disableUploadTimeout="true" URIEncoding="utf-8" />
<Connector port="8009"
  enableLookups="false" redirectPort="8443" protocol="AJP/1.3" URIEncoding="utf-8" />


完成了以上的東東之後,你可能會為fckeditor上傳到數據庫時內容亂碼的問題煩惱,告訴你一個解決方法,那就是利用js把fckeditor的內容置於一個隱藏的textarea,那樣當你接收textarea的內容時就不會有亂碼的問題了
內容js:
textarea.value = FCKeditorAPI.GetInstance('EditorDefault').EditorDocument.body.innerHTML;

望有助於各位

解決fckeditor上傳文件大小的判斷
1、在web.xml增加三個初始化大小值,
2、在simpleuploadservlet.java中增加一個hashMap,以讀取web.xml設置的三個文件限制大小的初始值
3、在執行文件判斷後綴允許和不允許時增加一個文件大小判斷(文件大小可以在執行判斷方法前利用FileItem.getFileSize()來得到)
4、增加一個字符串以用於傳遞到fckImage.js的代號值或者把varValue設為全局,以便於在執行文件大小判斷中給varValue賦值,俺假設將其設為valValue="88",在
if(執行文件上傳判斷)
{.....}
else
{
判斷valValue是否為88,是則給予提示文件大小超過允許範圍的提示
}

5、在editor.filemanager.dialog.fck_image目錄裡找到fckImage.js,在執行onCompleted方法中增加一個case 「88」來用於客戶端提示.
至此我們完成了文件上傳的一個文件大小判斷,其瀏覽服務器的文件大小判斷俺沒用他,如果你需要,那麼做法應該只用稿寫4、5點就可以了吧!!

寫這個時,由於是在朋友這上網寫的,沒有程序代碼,可能寫得不是很明白,不過有心人花5分鐘看看simpleuploadservlet.java源程序,相信你應該會有所獲。

fckeditor如果大家搞定啦1!那一定想到他是沒有提供刪除功能的!!
以下是一段js,放在調用feckeditor的jsp頁面
function FCKeditor_OnComplete( editorInstance )
{
editorInstance.Events.AttachEvent( 'OnBlur', onEditorBlur );
}

function onEditorBlur(){
var imgs = FCKeditorAPI.GetInstance('EditorDefault').EditorDocument.body.all.tags("img");
for(var i=0; i < imgs.length; i++){
alert(imgs[i].src);
//這裡你可以用一個隱匿域來接收這些路徑信息
}
}

把這些路徑信息放置於數據庫是的一個字段,刪除文檔時一起刪除,就可以解決圖片存留問題

原文出處:fckeditor 编辑器(中文乱码已修改) - fangbiao23 - JavaEye技术网站
前一個主題 | 下一個主題 | 頁首 | | |



Powered by XOOPS 2.0 © 2001-2008 The XOOPS Project|