CKEditor和CKFinder的使用说明

首先说明一下：
CKEditor只是一个富文本编辑器，没有文件浏览和文件上传的功能
CKFinder是用来上传文件和浏览服务器上的文件的，和CKEditor配合实现文件上传


下载CKEditor 3.0，地址：http://ckeditor.com/




首先，下载下来解压后，把文件夹ckeditor放到你的站点，CKFinder也一样


其次，在你的网页里面加入下面脚本：


<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="../ckfinder/ckfinder.js"></script>


这里根据你自己的编辑器路径修改，请务必配置正确。


再次，在需要引用CKEditor编辑器的地方加入下面代码：


            <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">
                这里是内容
                </textarea>


或者：


      <textarea cols="80" id="editor1" name="editor1" rows="10">
                这里是内容
      </textarea>
     <script type="text/javascript">
      var editor = CKEDITOR.replace( 'editor1' );//调用ckeditor生成富文本编辑器
 CKFinder.setupCKEditor(editor, 'ckfinder/');  //结合上传控件
     </script>


这样，一个编辑器就基本可以使用了。


--------------------------------------------------


配置属于自己的编辑器，配置Config.js文件（官方给出配置的几种方法，详见参考官方文档）如下：


用记事本打开config.js文件，可看到下面代码：


CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
config.language = 'en';
config.uiColor = '#F00';
};


我们只需在函数里面加入自己需要配置的选项即可，例如本人配置的：


CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'zh-cn'; //配置语言
//config.uiColor = '#FFF'; //背景颜色
//config.width = 500; //宽度
config.height = 500; //高度


//工具栏
config.toolbar =
[
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
    '/',
    ['Styles','Format','Font','FontSize'],
    ['TextColor','BGColor'],
    ['Maximize', 'ShowBlocks','-','Source','-','Undo','Redo']


];
};


更详细配置选项，请参考官方文档http://docs.cksource.com/


--------------------------------------------


如果你觉得整个编辑器太大，你可以删除文件。


例如把_samples、_source、_tests三个文件夹删除，进入lang文件目录，保留en.js、zh.js、zh-cn.js三个文件，其余的语言文件如果你用不到，可以删除。


配置CKFinder
ckfinder/config.php为其上传文件的配置文件，进行相关的一些设置。


为了防止上传文件重名可以修改ckfinder\core\connector\php\php5\CommandHandler\FileUpload.php


在64行加入
sExtension=CKFinder_Connector_Utils_FileSystem::getExtension($sFileName);
$sFileName=date('YmdHis').'.'.$sExtension;




获取ckeditor的内容
// 设定文章内容
CKEDITOR.instances.editor1.setData(obj.result[0].Content);
// 获取文章内容
var f_content = CKEDITOR.instances.editor1.getData();
或者
editor1.getData();//editor1为建立的ckeditor对象