如何將文字編輯器嵌入框架--以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 為包含編輯器的元素*/

相關文章