在CI中集成ckeditor 和 ckfinder插件

2019独角兽企业重金招聘Python工程师标准>>>

首先，我从官网上分别下载了 ckeditor 和 ckfinder ，
我用的版本是：CKEditor 3.6.4-released on 17 July 2012， ckfinder 2.3 - updated 24.08.2012

 在CI的library目录中我是这样写的：

<?php 

# 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的控制器中我是这样引用的：

<?php 

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:

<script type="text/javascript">
//<![CDATA[
$(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();
        }
    });
});
//]]>
</script>

至此，终于完成了。

转载于:https://my.oschina.net/u/574208/blog/80295