CI框架中使用百度的UMeditor并实现上传图片

qiucong 2017/3/19 富文本

在开发过程中，在富文本编辑区域有上传图片的需求，综合考虑了与CI框架集成的复杂性以及富文本编辑器的适用性，在CKeditor和UEditor 以及UMeditor之间选择了相对轻量级的UMeditor。

# 使用

UMeditor的使用非常简单，在官网下载最新版本（目前是[1.2.3 PHP 版本]），选择相应的UTF-8或GBK版本下载即可。选择这个编辑器很重要的一个原因就是该编辑器开源且文档为中文，而且使用的人也非常多，安全问题好像也比较少，有不少网站的安全问题就是出在富文本编辑器上。

我们只要在需要使用富文本编辑器的页面上引用相关的文件就行了，UMeditor需要手动引入的文件比较多。

third-party/jquery.min.js
third-party/template.min.js
umeditor.config.js
umeditor.min.js

1
2
3
4

这几个文件都需要引用不然会无法正常使用的，最好把lang/zh-cn/zh-cn.js这个语言文件也手动引入。然后在页面中使用

<script type="text/plain" id="ueditor" style="width:1000px;height:240px;">
    这里可以放一些默认的内容
</script>

<script>
    var um = UM.getEditor('ueditor', {
        textarea: 'content' //可以在这里面设置相关的配置，具体看umeditor.config.js文件
    });
</script>

1
2
3
4
5
6
7
8
9

具体使用可以参考下载文件夹里面的index.html文件以及官方演示和文档。

# 上传文件到服务器

# 直接上传文件到服务器

在php中是用UMeditor上传到服务器还是比较简单的。
点击编辑器上的上传图片按钮，根据调用的URL可以发现进入了存放umeditor相关文件的php文件夹里面的imageUp.php，这个文件主要是设置一些配置信息，我们可以在这边修改相应的配置

$config = array(
        "savePath" => "" ,             //存储文件夹,设置为相对路径或者绝对路径，看项目需求
        "showPath" => "/static/img/" ,             //我添加的一个用来显示图片的路径
        "maxSize" => 1000 ,                   //允许的文件最大尺寸，单位KB
        "allowFiles" => array( ".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp" )  //允许的文件格式
    );

1
2
3
4
5
6

然后调用Uploader.class.php文件，这个文件主要是用来实现上传文件的方法。可以在这边做一些修改以更符合项目的实际需求。我修改了返回文件信息方法以便上传之后在上传面板上的图片显示的是正确的URL。

public function getFileInfo()
{
    return array(
        "originalName" => $this->oriName ,
        "name" => $this->fileName ,
        "url" => $this->fullName , //项目中这个地方需要使用的是图片的URL，不然不会正确显示图片
        "size" => $this->fileSize ,
        "type" => $this->fileType ,
        "state" => $this->stateInfo
    );
}

1
2
3
4
5
6
7
8
9
10
11

//定义showPath并在upFile()中加上 $this->showPath = $this->config[ "showPath" ] . date( "Ymd" ) . '/' . $this->fileName; //将getFileInfo()中的url改为$this->showPath即可 //主要还是要根据项目的实际需求来更改

# 融入CI框架的上传

直接在umeditor相关文件的文件夹中操作实际上是有些不方便的，比如有些时候喜欢把这种插件放在静态资源一次，是可以直接访问的，这样就相当于把我们的上传相关的php文件直接暴露出来了。简单的办法就是可以把里面的整个php文件夹放到某个合适的地方去。
在CI框架中有更好的方法来实现上传图片这个需求的，CI框架允许我们使用自定义的扩展类，这样我们就可以将上传图片的方法写入一个自定义的类，然后在Controller里面调用，相关的配置信息可以在config里面建立一个新的配置项。具体实现可以参考我在网上找到的这个Ueditor-for-CodeIgniter扩展 (opens new window)。

学非探其花

Choose mode