在CI中集成ckeditor 和 ckfinder插件

首先,我從官網上分別下載了 ckeditorckfinder
我用的版本是:CKEditor 3.6.4-released on 17 July 2012, ckfinder 2.3 - updated 24.08.2012javascript

 在CI的library目錄中我是這樣寫的:php

<?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的控制器中我是這樣引用的:html

<?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在線編輯器。java

後來我發如今頁面中編輯的時候,驗證很差用,我又加了段 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>

至此,終於完成了。ide

相關文章
相關標籤/搜索