最近接到一個給某私立貴族(小，初，高 12年只是學費近200W)學校做一個網站，時間緊迫，本來打算用wordpress，但是要求頁面要重新設計，而我們的前端開發沒有WP主題開發的經驗，無疑需要額外的學習成本(主要是時間來不及),所以提出自己做一個CMS的系統。但是文章編輯這塊需要文字編輯器的基本功能，那就只能用富文字編輯器了。再加上本菜雞喜歡用CI框架，所以需要把富文字編輯器和框架相結合，以下內容以此背景展開。

事前準備：
    環境：mac系統+Apache+mysql(沒用到)+php(廢話)
    富文字編輯器：umeditor （ueditor的簡化版，需要用到的文字編輯器的道友可以試一下，很推薦）
    GitHub地址：https://github.com/fex-team/umeditor

    codeigniter框架(簡稱CI框框)
    官網地址：http://codeigniter.org.cn/
 

先來一張umeditor的檔案結構吧：

圖一

將文字編輯器嵌入框架，其本質就是在框架內的view中引入編輯器的樣式和JS，在controller中引入編輯器的相關PHP類。

引入JS&CSS:

圖二
CSS：
圖二中public\umeditor\umeditor.css&umeditor.min.css即圖一中umeditor\themes\default\css中的兩個檔案。前者為未壓縮，後者未壓縮版。
public\umeditor\formbtn.css即圖二umeditor\index.html中檔案裡面的一些樣式。
圖二public\images資料夾即圖一umeditor\themes\default\images
圖二public\js\umeditor\dialogs&third-party即圖一umeditor\dialogs&third-party
圖二public\js\umeditor\umeditor.js&umeditor.config.js即圖一umeditor\umeditor.js&umeditor.config.js(umeditor.js與umeditor.min.js 這裡不再贅述)
圖二public\js\zh-cs.js即圖一umeditor\lang\zh-cn\zh-cn.js(中文的語言包,或者應該說是提示資訊中文包)
jQuery.min.js 這裡用的是v2.2.3
下面是在view中的引入：

    <link href="<?php echo base_url('/public/css/umeditor/umeditor.css'); ?>" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="<?php echo base_url('/public/js/jquery.min.js'); ?>"></script>
    <script type="text/javascript" charset="utf-8" src="<?php echo base_url('/public/js/umeditor/umeditor.js'); ?>"
 
></script>
    <script type="text/javascript" charset="utf-8" src="<?php echo base_url('/public/js/umeditor/umeditor.config.js'); ?>"></script>
    <script type="text/javascript" src="<?php echo base_url('/public/js/umeditor/zh-cn.js'); ?>"></script>
    <link rel="stylesheet" href="<?php echo base_url('/public/css/umeditor/formbtn.css'); ?>">

引入相關PHP類：
在CI框架下的application\libraries中新建一個檔案'Umupload.php'(我個人只是想用上傳，所以變這麼命名)
然後將圖一中umeditor\php\Upload.class.php中的所以程式碼直接Copy至上一步新建的檔案中。

處理上傳：
這裡本菜雞直接在CI的預設控制器 welcome中寫了兩個function 分別載入編輯器檢視和處理上傳，如下：

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {

    public function index()
    {
        $this->load->view('umeditor.html');
    }


    public function umupload(){
        error_reporting( E_ERROR | E_WARNING );
        //上傳配置
        $config = array(
            "savePath" => "upload/" ,             //儲存資料夾 (感覺沒啥用)
            "maxSize" => 1000 ,                  
            "allowFiles" => array( ".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp" )
        );
        //上傳檔案目錄
        $Path = "upload/";

        //背景儲存在臨時目錄中
        $config[ "savePath" ] = $Path;

        $this->load->library('Umupload',array('fileField'=>'upfile', 'config' => $config));
        $type = $_REQUEST['type'];
        $callback=$_GET['callback'];

        $info = $this->umupload->getFileInfo();
        /**
         * 返回資料
         */
        if($callback) {
            echo '<script>'.$callback.'('.json_encode($info).')</script>';
        } else {
            echo json_encode($info);
        }

    }
}

其中public function umupload()的函式體就是圖一umeditor\php\imageUp.php中的內容，並且做了相關修改。

至此，編輯器已經全部嵌入框架，但是還需修改一些程式碼片段才可以正式使用。

後期加工,以下修改均指CI框架中的修改：
修改JS：CI\public\js\umeditor.config.js 第139行附近修改為：

        //圖片上傳配置區
        ,imageUrl:URL+"../../../index.php/welcome/umupload"             //圖片上傳提交地址
        ,imagePath:URL + "../../../"                     //圖片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
        ,imageFieldName:"upfile"                   //圖片資料的key,若此處修改，需要在後臺對應檔案修改對應引數

    這裡主要是修改路徑，讓JS可以找到控制器。出於倉促這裡使用相對路徑。

修改PHP：
    據上文所述，在welcome的控制器中 public function umupload()的函式體是copy而來，所以要修改一部分使之可以在CI中'跑'起來。修改之後的程式碼如上文所示，具體修改為：
    刪除最開始的兩行：

    header("Content-Type:text/html;charset=utf-8");
    error_reporting( E_ERROR | E_WARNING );

將原編輯器中的 17行

    $up = new Uploader( "upfile" , $config );

修改為：

$this->load->library('Umupload',array('fileField'=>'upfile', 'config' => $config));

因為此處通過載入library的方式引入編輯器的相關PHP類。並且library的建構函式只能傳一個引數，因此做此修改。

第21行附近的

$info = $up->getFileInfo();

修改為：

$info = $this->umupload->getFileInfo();

這裡即呼叫library引入類的方法。

修改library檔案：
通上文所述，library的建構函式只能傳一個引數所以作如下修改：
第43行附近修改為：

    public function __construct( $param)
    {
        $this->fileField = $param['fileField'];
        $this->config = $param['config'];
        $this->stateInfo = $this->stateMap[ 0 ];
        $this->upFile( false );
    }

至此，umeditor文字編輯器已經嵌入CI框架。
本人測試試用成功。
umeditor的使用方法就不再贅述了。

更新於2016.8.30 融合bug（與bootstrap的CSS衝突）

如果使用bootstrap前端框架。那麼umeditor編輯器中的圖片在調整大小的時候會有一些”失靈”的BUG。
主要是因為，編輯器的樣式與bootstrap.css 的box-sizing設定有衝突

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

解決方案：
可以在用到編輯器的頁面，重新設定包含編輯器的元素的該項屬性

.edui-container *{
    -webkit-box-sizing: initial;
    -moz-box-sizing: initial;
    box-sizing: initial;
}
/* .edui-container 為包含編輯器的元素*/