一、匯入js檔案

<script src="js/plugins/ckeditor/ckeditor.js"></script>

將下載的檔案匯入相應html目錄下

二、html程式碼

<textarea rows="20" class="form-control" name="liasionContent" id="liasionContent"></textarea>

三、配置

js配置：

CKEDITOR.replace( 'liasionContent' );

配置檔案config.js配置：

CKEDITOR.editorConfig = function( config ) {
	//顯示視窗設定
	config.toolbarGroups = [
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'styles', groups: [ 'styles' ] },
		{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'colors', groups: [ 'colors' ] },
		{ name: 'forms', groups: [ 'forms' ] },
		{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
		'/',
		{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
		{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
		{ name: 'links', groups: [ 'links' ] },
		{ name: 'insert', groups: [ 'insert' ] },
		{ name: 'tools', groups: [ 'tools' ] },
		{ name: 'others', groups: [ 'others' ] },
		{ name: 'about', groups: [ 'about' ] }
	];
	//移除多於按鈕
	config.removeButtons = 'Source,Save,NewPage,Preview,Print,Templates,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Blockquote,CreateDiv,BidiLtr,BidiRtl,Language,Link,Unlink,Anchor,Flash,Smiley,Iframe,Styles,ShowBlocks,About';
    //設定圖片上傳時，預覽中的文字為空
	config.image_previewText=' ';
	//開啟圖片上傳
	config.filebrowserImageUploadUrl= "ImageUpload";
	
	config.format_tags = 'p;h1;h2;h3;pre';
	//設定顯示高度
	config.height = 400;
	移除圖片上傳按鈕
	config.removeDialogTabs = 'image:advanced;link:advanced';
	
	//當用戶鍵入TAB時，編輯器走過的空格數，( ) 當值為0時，焦點將移出編輯框 plugins/tab/plugin.js
	config.tabSpaces = 4;
	
	//從word中貼上內容時是否移除格式 
	config.pasteFromWordRemoveStyle = false;
	//設定快捷鍵
	config.keystrokes =[[ CKEDITOR.CTRL + 13 /*Enter*/, 'maximize' ],
						[ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ], //獲取焦點
				[ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ], //元素焦點
				[ CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ], //文字選單
				[ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ], //撤銷
				[ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ], //重做
				[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo' ], //
				[ CKEDITOR.CTRL + 76 /*L*/, 'link' ], //連結
				[ CKEDITOR.CTRL + 66 /*B*/, 'bold' ], //粗體
				[ CKEDITOR.CTRL + 73 /*I*/, 'italic' ], //斜體
				[ CKEDITOR.CTRL + 85 /*U*/, 'underline' ], //下劃線
				[ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ]
		];
	//設定字型
	config.font_names='黑體/黑體;楷體/楷體_GB2312;隸書/隸書;幼圓/幼圓;微軟雅黑/微軟雅黑;'+config.font_names;
};
 

配置效果：

圖片上傳後端程式碼：

@RequestMapping("/ImageUpload")
public void imageUpload(@RequestParam("upload")MultipartFile file, HttpServletRequest request,HttpServletResponse response) {    
	
	try {
		String path = request.getSession().getServletContext().getRealPath(UPLOAD_PATH);
		PrintWriter out = response.getWriter();
		String CKEditorFuncNum = request.getParameter("CKEditorFuncNum");
		String fileName = file.getOriginalFilename();
		String uploadContentType = file.getContentType();
		String expandedName = "";
		if (uploadContentType.equals("image/pjpeg") || uploadContentType.equals("image/jpeg")) {
			// IE6上傳jpg圖片的headimageContentType是image/pjpeg，而IE9以及火狐上傳的jpg圖片是image/jpeg
			expandedName = ".jpg";
		} else if (uploadContentType.equals("image/png") || uploadContentType.equals("image/x-png")) {
			// IE6上傳的png圖片的headimageContentType是"image/x-png"
			expandedName = ".png";
		} else if (uploadContentType.equals("image/gif")) {
			expandedName = ".gif";
		} else if (uploadContentType.equals("image/bmp")) {
			expandedName = ".bmp";
		} else {
			out.println("<script type=\"text/javascript\">");
			out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ",''," + "'檔案格式不正確（必須為.jpg/.gif/.bmp/.png檔案）');");
			out.println("</script>");
			return;
		}
		if (file.getSize() > 1024 * 1024 * 5) {
			out.println("<script type=\"text/javascript\">");
			out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ",''," + "'檔案大小不得大於5M');");
			out.println("</script>");
			return;
		}
		DateFormat df = new SimpleDateFormat(DEFAULT_SUB_FOLDER_FORMAT_AUTO);
		fileName = df.format(new Date()) + expandedName;
		File directory = new File(path);
		if(!directory.exists()) {
			directory.mkdirs();
		}
		file.transferTo(new File(path + File.separator + fileName));
		// 返回"影象"選項卡並顯示圖片 request.getContextPath()為web專案名
		out.println("<script type=\"text/javascript\">");
		out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ",'" +  "upload/img/" + fileName + "','')");
		out.println("</script>");
		return;
	} catch (IllegalStateException e) {
		e.printStackTrace();
	} catch (IOException e) {
		e.printStackTrace();
	} catch (Exception e) {
		e.printStackTrace();
	}
}
 

<mvc:resources location="/upload/" mapping="/upload/**"/>