1. 程式人生 > >CKEditor4 x部署和配置

CKEditor4 x部署和配置

解壓放置其WebRoot下JSP中引入以下檔案:
<script type="text/javascript" src="ckeditor/ckeditor.js"></script><script type="text/javascript" src="ckeditor/config.js"></script>
有以下幾種方法可實現CKEditor一:通過設定class樣式
<textarea class="ckeditor" name="editor1"></textarea>
二:使用JS程式碼
$(document).ready(function(){ CKEDITOR.replace('entity_content'
);  //entity_content為textarea元素ID});
三:使用jquery使用jquery之前一定要先引入jquery檔案,另外還要引入ckeditor/adapters下的一個jquery.js(兩者不一樣,務必要引入)
$(document).ready(function(){ $('textarea#editor1').ckeditor();});
另外配置config.js以滿足自己的專案需求。
CKEDITOR.editorConfig = function( config ) // Define changes to default configuration here. // For the complete reference:
 // http://docs.ckeditor.com/#!/api/CKEDITOR.config // The toolbar groups arrangement, optimized for a single toolbar row. config.toolbarGroups = [  { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },  { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },  { name: 'editing',     groups: [ 'find'
, 'selection', 'spellchecker' ] },  { name: 'forms' },  { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },  { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },  { name: 'links' },  { name: 'insert' },  { name: 'styles' },  { name: 'colors' },  { name: 'tools' },  { name: 'others' },  { name: 'about' } ]; // The default plugins included in the basic setup define some buttons that // we don't want too have in a basic editor. We remove them here. config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript'// Let's have it basic on dialogs as well. config.removeDialogTabs = 'link:advanced';};
根據需要  具體配置查閱其他資料PS:需要注意的是路徑問題,在引入js的時候 如果ckeditor放在了WebRoot根目錄下。src應該是src="ckeditor/ckeditor.js" ,不能為src="/ckeditor/ckeditor.js"