把下载下来的CKEditor解压到自己设定的网站目录下,一定要注意调用的路径问题!
在html的head中引入以下文件:
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/config.js"></script>
一:通过设置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';
};
根据需要具体配置请查阅其他资料。