Java開發環境中使用CKEditor集成
本文主要介紹如何將CKEditor集成到Java開發環境中，CKEditor是FCKEditor的升級版，使用很方便。下面是基本使用方法： 第一步：下載必要的庫 1、到CKEditor官網http://www.fckeditor.net/download/下載Ckeditor4.0.2，這是目前最新的版本，4.1馬上就出來了。 2、找到CKEditor 3.6.4 for Java，download.jar按鈕，下載ckeditor-java-core-3.5.3.zip，這是java集成的jar包，可以用來配置CKEditor，其中還有Ckeditor的標簽，比較重要。 第二步：將ckeditor-java-core-3.5.3.jar及Ckeditor庫放到工程相應目錄下，jar包放到lib下，庫文件(js等資源文件)放到存放頁面資源的目錄下，根據自己的情況 3、在需要使用編輯器的jsp頁面中加入CKeditor標簽庫，這樣可以使用<ckeditor>標簽
<%@ taglib uri='http://ckeditor.com' prefix='ckeditor' %>
4、如果讓CKeditor自動創建實例，則只需在</body>標簽之前添加一個<ckeditor:replace>（官方推薦這樣做，在其他地方添加也可以）
?1234567891011121314151617<!DOCTYPE unspecified PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'><%@page pageEncoding='UTF-8' contentType='text/html; charset=UTF-8'%><%@ taglib uri='http://ckeditor.com' prefix='ckeditor' %><html> <body><form action='sample_posteddata.jsp' method='get'> <p><label for='editor1'>Editor 1:</label><textarea cols='80' id='editor1' name='editor1' rows='10'></textarea> </p> <p><input type='submit' value='Submit' /> </p></form> <ckeditor:replace replace='editor1' basePath='/ckeditor/' /> </body> </html>注意：<ckeditor:replace>中replace對應的是要替換的<textarea>標簽的id，basePath對應的是CKeditor資源文件的存放路徑。如果需要替換多個<textarea>，則可以使用 <ckeditor:replaceAll>標簽，
?1<ckeditor:replaceAll basePath='/ckeditor/' className='myclass'/>其中className是<textarea>的class樣式，只要<textarea>的class樣式為myclass，則都會被CKeditor實例替換。 5、如果想手動創建CKeditor實例，則可以通過<ckeditor:editor>標簽創建。
?1<ckeditor:editortextareaAttributes='<%=attr %>' basePath='/ckeditor/' editor='editor1' value='Type here' />其中basePath是CKeditor存放目錄，editor是全局<textarea>元素的name，value則是該<textarea>的默認值，textareaAttributes則對應<textarea>的配置信息，是一個java.util.HashMap類型的對象，key對應的是<textarea>中的屬性名稱name,value對應<textarea>中的屬性值value。
?12345<% Map<String, String> attr = new HashMap<String, String>(); attr.put('rows', '8'); attr.put('cols', '50');%>6、提交編輯內容 后臺獲取編輯內容和平時使用<textarea>沒區別，CKEditor只是對<textarea>進行了增強，所以數據獲取仍然是通過<textarea>的name屬性。 如果想在js中獲取CKEditor實例中的內容，則可以通過CKEditor API獲取，
?1var data = CKEDITOR.instances.editor1.getData();基本流程就是這樣，如果想修改CKeditor樣式的話，可以修改CKeditor資源文件中的config.js，
?12345678910111213141516171819202122232425262728293031323334/*Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.For licensing, see LICENSE.html or http://ckeditor.com/license*/ CKEDITOR.editorConfig = function( config ){ // Define changes to default configuration here. For example: // config.language = ’fr’; // config.uiColor = ’#AADC6E’; config.language = ’zh-cn’; // 配置語言 config.uiColor = ’#FFF’; // 背景顏色 config.width = ’auto’; // 寬度 config.height = ’300px’; // 高度 config.skin = ’office2003’;// 界面v2,kama,office2003 config.toolbar = ’MyToolbar’;// 工具欄風格（基礎’Basic’、全能’Full’、自定義）plugins/toolbar/plugin.js config.toolbarCanCollapse = false;// 工具欄是否可以被收縮 config.resize_enabled = false;// 取消 “拖拽以改變尺寸”功能 plugins/resize/plugin.js//自定義的工具欄 config.toolbar_MyToolbar = [[’Source’,’-’,’Save’,’Preview’,’Print’],[’Cut’,’Copy’,’Paste’,’PasteText’,’PasteFromWord’,’-’,’Scayt’],[’Undo’,’Redo’,’-’,’Find’,’Replace’,’-’,’SelectAll’,’RemoveFormat’],[’Image’,’Flash’,’Table’,’HorizontalRule’,’Smiley’,’SpecialChar’,’PageBreak’],’/’,[’Styles’,’Format’],[’Bold’,’Italic’,’Strike’],[’NumberedList’,’BulletedList’,’-’,’Outdent’,’Indent’,’Blockquote’],[’Link’,’Unlink’,’Anchor’],[’Maximize’,’-’,’About’] ];};也可以直接在jsp里設置：
?123456789101112131415161718192021222324252627<%@ page language='java' contentType='text/html; charset=UTF-8' pageEncoding='UTF-8'%><%@ page import='com.ckeditor.CKEditorConfig'%><%@ taglib uri='http://ckeditor.com' prefix='ckeditor' %><!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'><html><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'><title>新聞中心</title></head><body><center><form action='${pageContext.request.contextPath}/news/add'>標題:<input name='title' type='text'/><p/>內容:<textarea name='content' id='editor' rows='5' cols='20'></textarea><label>公告</label>:<input type='radio' name='ntype' value='1'/><label>新聞</label>:<input type='radio' name='ntype' value='2'/><input type='submit' value='添加'></form></center><% CKEditorConfig settings = new CKEditorConfig(); settings.addConfigValue('height','300'); settings.addConfigValue('width','600');%><ckeditor:replace replace='editor' basePath='${pageContext.request.contextPath}/ckeditor/'config='<%=settings %>'/></body></html>想進一步了解的話，可以參考CKEditor官網的指導說 config.toolbar = ‘Full’; config.toolbar_Full = [ [‘Source’,’-‘,’Save’,’NewPage’,’Preview’,’-‘,’Templates’], [‘Cut’,’Copy’,’Paste’,’PasteText’,’PasteFromWord’,’-‘,’Print’, ‘SpellChecker’, ‘Scayt’], [‘Undo’,’Redo’,’-‘,’Find’,’Replace’,’-‘,’SelectAll’,’RemoveFormat’], [‘Form’, ‘Checkbox’, ‘Radio’, ‘TextField’, ‘Textarea’, ‘Select’, ‘Button’, ‘ImageButton’, ‘HiddenField’], [‘BidiLtr’, ‘BidiRtl’], ‘/’, [‘Bold’,’Italic’,’Underline’,’Strike’,’-‘,’Subscript’,’Superscript’], [‘NumberedList’,’BulletedList’,’-‘,’Outdent’,’Indent’,’Blockquote’,’CreateDiv’], [‘JustifyLeft’,’JustifyCenter’,’JustifyRight’,’JustifyBlock’], [‘Link’,’Unlink’,’Anchor’], [‘Image’,’Flash’,’Table’,’HorizontalRule’,’Smiley’,’SpecialChar’,’PageBreak’], ‘/’, [‘Styles’,’Format’,’Font’,’FontSize’], [‘TextColor’,’BGColor’], [‘Maximize’, ‘ShowBlocks’,’-‘,’About’] ]; config.toolbar_Basic = [ [‘Bold’, ‘Italic’, ‘-‘, ‘NumberedList’, ‘BulletedList’, ‘-‘, ‘Link’, ‘Unlink’,’-‘,’About’] ];
相關文章：
1. vue實現web在線聊天功能2. JavaScript實現頁面動態驗證碼的實現示例3. JavaEE SpringMyBatis是什么? 它和Hibernate的區別及如何配置MyBatis4. Springboot 全局日期格式化處理的實現5. SpringBoot+TestNG單元測試的實現6. 完美解決vue 中多個echarts圖表自適應的問題7. 解決Android Studio 格式化 Format代碼快捷鍵問題8. 在Chrome DevTools中調試JavaScript的實現9. Python使用urlretrieve實現直接遠程下載圖片的示例代碼10. Java使用Tesseract-Ocr識別數字
網公網安備