CI框架整合UEditor編輯器上傳功能

時間 2019-11-16

標籤框架整合 ueditor 編輯器上傳功能简体版

原文原文鏈接

最近項目中要使用到富文本編輯器，選用了功能強大的UEditor，接下來就來說講UEditor編輯器的上傳功能整合。php

本文UEditor版本：ueditor1_4_3_utf8_php版本前端

第一步：部署編輯器json

HTML代碼：數組

1  <textarea id="editor" class="editor" type="text/plain" style="width:100%;height:500px;"></textarea>

JavaScript代碼：安全

 1 $(document).ready(function () {
 2         var ue = UE.getEditor('editor',{
 3             serverUrl:'/ueditorup/unifiedRequest/',//後臺統一請求路徑
 4             autoHeightEnabled:false,
 5             toolbars:
 6                 [[
 7                 'fullscreen', 'source', '|', 'undo', 'redo', '|',
 8             'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
 9             'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
10             'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
11             'directionalityltr', 'directionalityrtl', 'indent', '|',
12             'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
13             'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
14             'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'pagebreak', 'template', 'background', '|',
15             'horizontal', 'date', 'time', 'spechars', '|',
16             'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
17             'print', 'preview', 'searchreplace', 'help', 'drafts'
18             ]],
19         });

第二步：服務端整合服務器

前端代碼部署完，如今頁面已經能夠正常顯示百度編輯器的編輯框了，接下來就是本文要介紹的上傳功能的整合。框架

首先在CI框架的controllers目錄下建立名爲ueditorup的.php文件並在此文件建立同名的類（UeditorUp），百度編輯器的全部上傳功能都將在這個類裏實現（圖片、塗鴉、視頻，附件上傳）。編輯器

下面代碼中的上傳處理類MyUploader 就是UEditor中的Uploader.class.php文件，這裏爲了與前端編輯器上傳功能完美銜接使用了UEditor自帶的Uploader.class.php文件而沒有使用CI框架的上傳處理功能（本人對UEditor不是很熟悉），不過爲了讓上傳更加安全，增長了上傳文件的MIME類型判斷，判斷代碼就直接來自CI框架的上傳類，配置都放在mimeconfig.php配置文件中。
ide

而配置文件uploadconfig則是UEditor編輯器的config.json文件配置，只是把json格式改爲了CI的數組格式。this

UEditor編輯器個服務器交互都是經過統一請求地址進行訪問的，同時會經過GET方法提交action的值，服務器端則經過action的值判斷具體的處理方法。

<?php
//ueditorup.php
class UeditorUp extends MY_Controller
{
    function __construct()
    {
        parent::__construct();
    }
    
    /**
     * 百度編輯器惟一請求接口
     * @throws Exception
     */
    public function unifiedRequest () 
        {
        try 
        {
            $action = $this->input->get('action');
            $this->config->load('uploadconfig');//獲取上傳配置
            $config = $this->config->item('ueditor_upload');
            if(empty($config))
                throw new Exception(errorLang('62409'));if($action == 'config')
            {
                echo json_encode($config);
            }elseif(method_exists($this, $action))
            {
                $this->config->load('mimeconfig');
                $config['mimeType'] = $this->config->item('mime_type_conf');
                $result = $this->{$action}($config);
                echo json_encode($result);
　　　　　　　　}else
                throw new Exception(errorLang('62409'));
        } 
        catch (Exception $e) 
        {
            echo json_encode(array('state'=>$e->getMessage()));
        }
    }
    
    /**
     * 圖片上傳處理方法
     * @param array $config
     */
    public function imageUpload ($config)
    {
        $this->load->library('MyUploader');
        $config = $this->setConf($config, 'image');
        $this->myuploader->do_load($config['imageFieldName'], $config);
        return $this->myuploader->getFileInfo();
    }
     /**
      * 視頻上傳處理方法
      * @param array $config
      */
     public function videoUpload ($config)
     {
         $this->load->library('MyUploader');
         $config = $this->setConf($config, 'video');
         $this->myuploader->do_load($config['videoFieldName'], $config);
         return $this->myuploader->getFileInfo();
     }
    /**
     * 附件上傳處理方法
     * @param array $config
     */
    public function filesUpload ($config)
    {
        $this->load->library('MyUploader');
        $config = $this->setConf($config, 'file');
        $this->myuploader->do_load($config['fileFieldName'], $config);
        return $this->myuploader->getFileInfo();
    }
    /**
     * 塗鴉圖片上傳處理方法
     * @param unknown $config
     */
    public function scrawlUpload ($config)
    {
        $this->load->library('MyUploader');
        $config = $this->setConf($config, 'scrawl', 'scrawl.png');
        $this->myuploader->do_load($config['scrawlFieldName'], $config, 'base64');
        return $this->myuploader->getFileInfo();
    }
    
    /**
     * 設置config
     * @param array     $config
     * @param string    $prefix
     * @param string    $oriName
     * @return array
     */
    private function setConf (array $config, $prefix, $oriName=NULL)
    {
        $config['maxSize']       =    array_key_exists($prefix.'MaxSize', $config) ? $config[$prefix.'MaxSize'] : $config['fileMaxSize'];
        $config['allowFiles']    =    array_key_exists($prefix.'AllowFiles', $config) ? $config[$prefix.'AllowFiles'] : $config['fileAllowFiles'];
        $config['pathFormat']    =    array_key_exists($prefix.'PathFormat', $config) ? $config[$prefix.'PathFormat'] : $config['filePathFormat'];
        empty($oriName) || $config['oriName'] = $oriName;
        return $config;
    }
    
}

下面是修改後的MyUploader上傳類的文件後綴獲取方法。

  /**
　　　* MyUploader.php
     * 獲取文件擴展名(MIME)
     * @return string
     */
    private function getFileExt()
    {
            $regexp = '/^([a-z\-]+\/[a-z0-9\-\.\+]+)(;\s.+)?$/';
            if (function_exists('finfo_file'))
            {
                $finfo = finfo_open(FILEINFO_MIME);
                if (is_resource($finfo))
                {
                    $mime = @finfo_file($finfo, $this->file['tmp_name']);
                    finfo_close($finfo);
                    if (is_string($mime) && preg_match($regexp, $mime, $matches))
                    {
                        if(array_key_exists($matches[1], $this->config['mimeType']))
                        {
                            $type = $this->config['mimeType'][$matches[1]];
                            return $type;
                        }
                    }
                }
            }
        return FALSE;
    }