首先,我从官网上分别下载了 ckeditor 和 ckfinder,
我用的版本是:CKEditor 3.6.4-released on 17 July 2012, ckfinder 2.3- updated 24.08.2012
在CI的library目录中我是这样写的:
# CI 的 library 目录
require_once $_SERVER['DOCUMENT_ROOT'] . '/js/ckeditor/ckeditor.php';
require_once $_SERVER['DOCUMENT_ROOT'] . '/js/ckfinder/ckfinder.php';
class Create_ckeditor {
function create_ckeditor_and_ckfinder($config = array())
{
$js_url = base_url() . '/js/';
$editor = new CKEditor();
$editor->basePath = $js_url . 'ckeditor/';
$editor->returnOutput = TRUE;
$editor->config = $config;
$editor->config['value'] = isset($config['value']) ? $config['value'] : '';
$editor->config['name'] = (isset($config['name'])&&$config['name']!='') ? $config['name'] : 'myeditor';
$editor->config['language'] = isset($config['language']) ? $config['language'] : 'en';
$editor->config['width'] = isset($config['width']) ? $config['width'] : '100%';
$editor->config['height'] = isset($config['height']) ? $config['height'] : '200';
$editor->config['filebrowserBrowseUrl'] = $js_url . 'ckfinder/ckfinder.html';
$editor->config['filebrowserImageBrowseUrl'] = $js_url . 'ckfinder/ckfinder.html?Tylpe=Images';
$editor->config['filebrowserFlashBrowseUrl'] = $js_url . 'ckfinder/ckfinder.html?Tylpe=Flash';
$editor->config['filebrowserUploadUrl'] = $js_url . 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
$editor->config['filebrowserImageUploadUrl'] = $js_url . 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';
$editor->config['filebrowserFlashUploadUrl'] = $js_url . 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';
CKFinder::SetupCKEditor($editor, $js_url .'ckfinder/');
$str_editor = $editor->editor($editor->config['name'], $editor->config['value'] );
return $str_editor;
}
}
在 CI的控制器中我是这样引用的:
class Contents extents Controller{
function __construct(){
parent::__construct();
}
function index(){
$this->load->library('create_ckeditor');
$data['my_editor'] = $this->create_ckeditor->create_ckeditor_and_ckfinder();
$this->load->view('contents/index',$data);
}
}
在视图中的相应位置直接输出 <?php echo $my_editor; ?> 即可显示 CKeditor在线编辑器。
后来我发现在页面中编辑的时候,验证不好用,我又加了段 javascript:
//
$(document).ready(function(){
// CKEDITOR 的验证功能
$("#content_form").submit(function(){
var contents = CKEDITOR.instances.meditor.getData();
$("textarea[name=meditor]").html(contents);
if( contents.length>0 ){
$("#content_error").hide();
if(valdater.valid()){
return true;
}
} else {
$("#content_error").show();
}
return false;
});
// 修改CKEDITOR默认的保存按钮事件 为 提交页面中的form.submit()
CKEDITOR.instances.meditor.on("beforeCommandExec",function(event){
if(event.data.name === "save"){
event.cancel();
$("#content_form").submit();
}
});
});
//]]>
至此,终于完成了。