如何將文字編輯器嵌入框架--以Umeditor&CodeIgniter框架為例

weixin_34259232發表於2017-11-02
框架

轉：http://blog.csdn.net/u013332865/article/details/52066211

最近接到一個給某私立貴族(小，初，高 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/
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

先來一張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'); ?>">
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
引入相關PHP類：
在CI框架下的application\libraries中新建一個檔案'Umupload.php'(我個人只是想用上傳，所以變這麼命名)
然後將圖一中umeditor\php\Upload.class.php中的所以程式碼直接Copy至上一步新建的檔案中。

處理上傳：
這裡本菜雞直接在CI的預設控制器 welcome中寫了兩個function 分別載入編輯器檢視和處理上傳，如下：
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
<?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);
        }

    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

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

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

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

        //圖片上傳配置區
        ,imageUrl:URL+"../../../index.php/welcome/umupload"             //圖片上傳提交地址
        ,imagePath:URL + "../../../"                     //圖片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
        ,imageFieldName:"upfile"                   //圖片資料的key,若此處修改，需要在後臺對應檔案修改對應引數
  • 1
  • 2
  • 3
  • 4
  • 5
    這裡主要是修改路徑，讓JS可以找到控制器。出於倉促這裡使用相對路徑。

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

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

將原編輯器中的 17行


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

修改為：

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

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

第21行附近的

$info = $up->getFileInfo();
  • 1

修改為：

$info = $this->umupload->getFileInfo();
  • 1
  • 2

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

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

    public function __construct( $param)
    {
        $this->fileField = $param['fileField'];
        $this->config = $param['config'];
        $this->stateInfo = $this->stateMap[ 0 ];
        $this->upFile( false );
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

至此，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;
}
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

相關文章