洛克颱手札

撰寫網頁讓使用者寫bolg或是po文幾乎都會用到HTML編輯器....

CKEditor算是一個容易撰寫且很好用的html編輯器...

因為剛好在程式裡加入了這個功能...就把作法順便記錄一下嚕~~~

 

首先，先到CKEditor官網下載最新版的CKEditor...解開後會得到一個資料夾...ckeditor

http://ckeditor.com/download

 

接著，將javascript引入jsp網頁程式中...

<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>

 

接下來修改準備要將網頁裡的<textarea>標籤換成HTML編輯器

<form>

...

<textarea cols="80" rows="10" id="editor" name="content"></textarea>

<script type="text/javascript">

CKEDITOR.replace('editor',{skin:'v2',toolbar:'SAMPLE',width:'630',height:'350',filebrowserImageUploadUrl:'/ImgUpload.jsp'}); 

</script>

...

</form>

 

 

可以發現上面加入的那串javascript就是用來設定html編輯器的面板樣式、功能按鈕以及上傳圖像的處理檔案...

以下我們一個一個來看...

 

1.面板樣式：

基本上到ckeditor資料夾底下會有個skin的子資料夾...裡頭就是可以使用的面板樣式嚕。(可以自行換換看office2003或是kama樣式)

 

2.功能按鈕：

這牽涉到所要提供的html編輯器究竟可以提供哪些功能給使用者用，主要的設定檔為cheditor資料夾下的config.js。

CKEDITOR.editorConfig = function( config )
{
	config.resize_enabled = false;
	
	config.toolbar_SAMPLE = 
	[
	    ['Format','Font','Bold','Italic','Underline'],
	    ['Cut','Copy','Paste','PasteText','PasteFromWord'],
	    ['Undo','Redo','Smiley','Maximize'],
	    '/',
	    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
	    ['NumberedList','BulletedList','Outdent','Indent'],
	    ['TextColor','BGColor','HorizontalRule','Link','Unlink'],
	    ['Image','Table','-','Preview','ShowBlock']
	]
};

以上是洛克颱的設定的範例，基本上"/"是用來將功能按鈕換行用的，另外每個"["與"]"可視為一組群組，或是用"-"將群組隔開，還有一些其他的設定可以自己上網找找嚕。

以上面的範例來說，如果不想提供圖像上載的功能，可以將"Image"刪除掉即可，這樣面板就不會出現圖像上載的按鈕了。

 

3.另外是關於如何處理檔案上傳的問題：

 在這邊使用一支jsp網頁來處理multipart方式丟過來的request...以下是部分程式碼...

long millisec = System.currentTimeMillis();
String filepath = "/tmp/"
FileRenamePolicy policy = new DefaultFileRenamePolicy();
MultipartRequest multi = new MultipartRequest(request, filepath, 1024*1024*5, "utf-8", policy);

Enumeration filenames = multi.getFileNames();
while(filenames.hasMoreElements()){
	String filename = (String)filenames.nextElement();
	File file = multi.getFile(filename);
	if(file!=null){
		String newFilename = millisec+".jpg";
		File newFile = new File(filepath+newFilename);
		if(!file.renameTo(newFile)){
			System.out.println("檔案重新命名失敗 : "+filepath+multi.getFilesystemName(filename)+" to "+newFilename);
		}else{
			System.out.println("圖檔上載成功 : "+newFilename);
			out.print("<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction('"+multi.getParameter("CKEditorFuncNum")+"','/tmp/"+newFilename+"','上載成功');</script>");
		}
	}
}

特別要注意的就是最後一行輸出的部份，要將上傳後的檔案路徑跟訊息丟回去原本的html編輯器網頁程式中，這樣html編輯器才能正確顯示剛剛使用者上傳的圖像。

 

 

經過以上步驟就可以完成一個可以上傳圖像的html編輯器囉...是不是很簡單呀？？？