CKEditor4.x部署和配置

CKEditor4.x && JSP

官网下载CKEditor,可选Basic, Standard, Full

解压放置其WebRoot下

JSP中引入以下文件：

[javascript] view plain copy

 

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

有以下几种方法可实现CKEditor

一：通过设置class样式

[html] view plain copy

 

1. <textarea class="ckeditor" name="editor1"></textarea>  

二：使用JS代码

[javascript] view plain copy

 

1. $(document).ready(function(){  
2.     CKEDITOR.replace('entity_content');  //entity_content为textarea元素ID  
3. });  

三：使用jquery

使用jquery之前一定要先引入jquery文件，另外还要引入ckeditor/adapters下的一个jquery.js

(两者不一样，务必要引入)

[javascript] view plain copy

 

1. $(document).ready(function(){  
2.     $('textarea#editor1').ckeditor();  
3. });  

另外配置config.js以满足自己的项目需求。

[javascript] view plain copy

 

1. CKEDITOR.editorConfig = function( config ) {  
2.     // Define changes to default configuration here.  
3.     // For the complete reference:  
4.     // http://docs.ckeditor.com/#!/api/CKEDITOR.config  
5.   
6.     // The toolbar groups arrangement, optimized for a single toolbar row.  
7.     config.toolbarGroups = [  
8.         { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },  
9.         { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },  
10.         { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },  
11.         { name: 'forms' },  
12.         { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },  
13.         { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },  
14.         { name: 'links' },  
15.         { name: 'insert' },  
16.         { name: 'styles' },  
17.         { name: 'colors' },  
18.         { name: 'tools' },  
19.         { name: 'others' },  
20.         { name: 'about' }  
21.     ];  
22.   
23.     // The default plugins included in the basic setup define some buttons that  
24.     // we don't want too have in a basic editor. We remove them here.  
25.     config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript';  
26.   
27.     // Let's have it basic on dialogs as well.  
28.     config.removeDialogTabs = 'link:advanced';  
29. };  

根据需要  具体配置查阅其他资料

PS：需要注意的是路径问题，在引入js的时候 如果ckeditor放在了WebRoot根目录下。

src应该是src="ckeditor/ckeditor.js" ，不能为src="/ckeditor/ckeditor.js"