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

轉：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 爲包含編輯器的元素*/