ckediotor的使用

CKEditor就像一个在你网页中的文本区域（textarea）一样工作，它提供了一个简单易写的用户界面、版式和丰富的文字输入区域。但用文本区域要实现同样的效果，并不容易，它需要用户输入html代码。

在使用之前需要导入ckedior的js和css文件 下载地址

需要配置根目录下面的config.js，配置自己需要的工具栏

• config.js的配置

CKEDITOR.editorConfig = function( config ) {

    config.language = 'zh-cn';     //设置语言

    config.height = 240;          //设置高度
    config.toolbarCanCollapse = true;
    config.uiColor = '#90B8E9';   //设置外边框的颜色
    config.toolbar = 'Full';
    config.toolbarGroups = [      //将工具栏以组的形式显示
      { name: 'document',    groups: [ 'mode', 'document', 'doctools' ,'save'] },   
      { 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: 'styles' },
      { name: 'colors' , groups:['TextColor'] },
      { name: 'tools', groups:[ 'TextColor','BGColor' ]}
    ];

    config.fontSize_defaultLabel = '18px';
};

• ckEditor的初始化

window.setTimeout('CKEDITOR.replace("editorContent")', 200); 

• ckEditor的定义

<textarea  id="editorContent" name="editorContent"></textarea>

• ckEditor的数据保存

 var data = CKEDITOR.instances.editorContent.getData(); 

ckEditor将所有设置的字体格式以html标签的形式进行保存，在数据端以Text的格式保存，在前端展示时，取出来存放在页面里，就展示成了有样式的字体。