CKEditor4.x && JSP
官网下载CKEditor,可选Basic, Standard, Full
解压放置其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');
- });
三:使用jquery
使用jquery之前一定要先引入jquery文件,另外还要引入ckeditor/adapters下的一个jquery.js
(两者不一样,务必要引入)
- $(document).ready(function(){
- $('textarea#editor1').ckeditor();
- });
另外配置config.js以满足自己的项目需求。
- CKEDITOR.editorConfig = function( config ) {
-
-
-
-
-
- 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' }
- ];
-
-
-
- config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript';
-
-
- config.removeDialogTabs = 'link:advanced';
- };
根据需要 具体配置查阅其他资料
PS:需要注意的是路径问题,在引入js的时候 如果ckeditor放在了WebRoot根目录下。
src应该是src="ckeditor/ckeditor.js" ,不能为src="/ckeditor/ckeditor.js"