首先,我從官網上分別下載了 ckeditor 和 ckfinder ,
我用的版本是: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