1、创建一个editor实例：
先把jquery和ckeditor的js文件包含进来（jquery.js已经在我们下载的ckeditor文件夹中了）：
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckeditor/adapters/jquery.js"></script>
然后我们可以在任何<textarea>、<p>、<div>元素都能被转换成在线编辑器，仅需要其对象的ckeditor()方法：
$( 'textarea.editor' ).ckeditor();
obj.ckeditor([callback[,options]])，ckeditor()包含两个参数，第一个是当editor编辑器执行完成时的回调函数，第二个参数是作为
所创建编辑器实例的配置，
$('.jquery_ckeditor').ckeditor( function() { /* callback code */ }, { skin : 'office2003' } );
在每一个回调函数中的$(this)是指代当前的CKEditor编辑器对象。
一旦编辑器实例被创建（即回调函数被调用的时候），可以利用ckeditorGet()来获取一个CKEditor的编辑器对象,同样我们也可以通过
val()方法来获取指定CKEditor中的值：
//获取ckeditor对象
var editor = $('textarea.editor').ckeditorGet();
alert( editor.checkDirty() );
由于获取和设置编辑器的值是很普遍的操作，所有ckeditor编辑器提供了val()操作：
//获取编辑器对象中的值
var data = $( 'textarea.editor' ).val();
//设置编辑器中的值
$( 'textarea.editor' ).val( 'my new content' );
这个方法能通过在加载Jquery Adapter之前，设置CKEDITOR.config.jqueryOverrideVal为false来禁止
对于textarea，当表单提交时候，编辑器editor将自动的返回它的内容。
五、CKEditor的配置文件
1、简介：
我们可以通过CKEditor的配置文件来使它适应我们的应用，主要的配置文件就是config.js，可以在我们下载的文件夹中找到！
2、可用的配置：
所有可用的配置都可以在文档http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html中找到
3、在页面中定义配置：
最后的方法是在我们创建我们的编辑器实例的时候来设置它的基本配置！这样可以避免接触源文件，也方便以后的升级。
在页面中我们可以通过CKEDITOR.replace和CKEDITOR.appendTo来设置：
CKEDITOR.replace( 'editor1',
{
toolbar : 'Basic',
uiColor : '#9AB8F3'
});
4、使用config.js文件
我们同样可以同过CKEditor中的congfig.js文件来进行配置，在config.js文件中，这个文件下下来其中就是一个空函数，我们可以对其
进行编辑：
CKEDITOR.editorConfig = function( config ){
config.language = 'fr';
config.uiColor = '#AADC6E';
};
我们也可以用我们自己的配置：
CKEDITOR.replace( 'editor1',{
customConfig : '/custom/ckeditor_config.js'
});
其中的js文件必须要和默认配置文件中的设置一样！
5、配置覆盖规则：
a.当edtitor实例被创建之后，在这一配置都都设置；
b.如果用户在页面中设置好了editor的配置，优先加载页面中的配置，再加载外联配置文件中的配置
6、避免加载扩展的设置文件：
CKEDITOR.replace( 'editor1', {
customConfig : ''
});
六、CKEditor的Toolbar设置：
1、简介：由于针对不同的用户需求，不是所有的属性都需要，所有我们可以定制化我们的Toolbar!
2、工具栏的定义其实就是一个js数组，包含了所有的可显示的东西，我们有两种方法来配置我们的工具栏：一种是直接设置到默认的工
具栏数组中，还有一种就是定制我们自己的工具栏，其格式要是toolbar_<name>，然后这个name就可以被我们通过toolbar设置在页面中
了。（其中的'-'代表分割符！'[]'代表一组设置！'/'代表的换行，即让几个块工具栏在同一行中！）
默认的：
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'],
'/',
['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']
];
3、自定义我们的工具栏：
一个简单的方法就是通过config.js文件，直接加入我们的配置，或者更好的就是另外建立一个我们的自定义的配置文件，然后把它加载
进来：
CKEDITOR.editorConfig = function( config )
{
config.toolbar = 'MyToolbar';
config.toolbar_MyToolbar =
[
['NewPage','Preview'],
['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']
];
};
然后，你可以根据你的用户需求给予他们不同的工具栏：
CKEDITOR.replace( 'editor1',
{
toolbar : 'MyToolbar'
});
CKEDITOR.replace( 'editor2',
{
toolbar : 'Basic'
});
另一个方法就是直接在我们的页面中设置，即toolbar设置项：
CKEDITOR.replace( 'editor1',
{
toolbar :
[
['Styles', 'Format'],
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
]
});
八、编辑器的样式设置(styles)：
这个我没怎么关注！
九、
浙公网安备 33010602011771号