前端富文字編輯器ckeditor的使用
阿新 • • 發佈:2018-12-23
一、匯入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(); } }
在使用springmvc時,要將圖片上傳的資料夾設為靜態資源:
<mvc:resources location="/upload/" mapping="/upload/**"/>
注:config.js檔案中的按鈕配置程式碼可通過ckeditor_4.7.1_full\ckeditor\samples\toolbarconfigurator目錄下的index.html檔案得到