如何将文本编辑器嵌入框架--以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 为包含编辑器的元素*/