****CI和UEditor集成

简介: 百度UEditor是一款比较常用编辑器 下载地址: http://ueditor.baidu.com/website/download.html1.在assets目录下建立ueditor文件夹,把下载的源码放入该文件夹 2.

百度UEditor是一款比较常用编辑器 
下载地址: 
http://ueditor.baidu.com/website/download.html

1.在assets目录下建立ueditor文件夹,把下载的源码放入该文件夹 
2.在需要使用ueditor的文件内引入ueditor相关文件 
上代码:

<html>
<head>
    <title>完整demo</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <script type="text/javascript" charset="utf-8" src="<?php echo base_url().'assets/ueditor/;?>ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="<?php echo base_url().'assets/ueditor/;?>ueditor.all.min.js"> </script> <script type="text/javascript" charset="utf-8" src="<?php echo base_url().'assets/ueditor/;?>lang/zh-cn/zh-cn.js"></script> <style type="text/css"> div{ width:100%; } </style> </head> <body> <div> <h1>完整demo</h1> <script name="content" id="editor" type="text/plain" style="width:1024px;height:500px;"> 初始化内容 </script> </div> <script type="text/javascript"> var ue = UE.getEditor('editor'); </script> </body> </html>





CI框架整合UEditor编辑器上传功能

最近项目中要使用到富文本编辑器,选用了功能强大的UEditor,接下来就来讲讲UEditor编辑器的上传功能整合。

本文UEditor版本:ueditor1_4_3_utf8_php版本

第一步:部署编辑器

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配置文件中。

而配置文件uploadconfig则是UEditor编辑器的config.json文件配置,只是把json格式改成了CI的数组格式

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; }
复制代码

到此CI框架整合UEditor编辑器就算完成了。

*注意:在整合上传功能的时候,要开启文件保存目录的读写权限。

 转:

http://www.cnblogs.com/wenxiong/p/3930013.html

 


 

参考:

CI框架+Umeditor上传图片配置信息

(注:UMeditor是Ueditor的迷你版)

Umeditor提供了一个上传文件通用的类Uploader.class.php, 首先将Uploader.class.php类放入CI框架的libraries目录下更名为Myuploader.php然后将该类提供的构造方法替换掉

本来的构造方法:

[php]  view plain  copy
 
  1. /** 
  2.     * 构造函数 
  3.     * @param string $fileField 表单名称 
  4.     * @param array $config 配置项 
  5.     * @param bool $base64 是否解析base64编码,可省略。若开启,则$fileField代表的是base64编码的字符串表单名 
  6.     */  
  7.    public function __construct($fileField, $config, $type = "upload")  
  8.    {  
  9.        $this->fileField = $fileField;  
  10.        $this->config = $config;  
  11.        $this->type = $type;  
  12.        if ($type == "remote") {  
  13.            $this->saveRemote();  
  14.        } else if($type == "base64") {  
  15.            $this->upBase64();  
  16.        } else {  
  17.            $this->upFile();  
  18.        }  
  19.   
  20.        $this->stateMap['ERROR_TYPE_NOT_ALLOWED'] = iconv('unicode', 'utf-8', $this->stateMap['ERROR_TYPE_NOT_ALLOWED']);  
  21.    }  

 

替换成:

[php]  view plain  copy
 
  1. /** 
  2.      * 构造函数 
  3.      * @param string $fileField 表单名称 
  4.      * @param array $config  配置项 
  5.      * @param bool $base64  是否解析base64编码,可省略。若开启,则$fileField代表的是base64编码的字符串表单名 
  6.      */  
  7.     public function __construct()  
  8.     {  
  9.           
  10.     }  
  11.   
  12.     public function Init($fileField , $config , $base64 = false)  
  13.     {  
  14.         /*var_dump($fileField); 
  15.         var_dump($config);exit;*/  
  16.         $this->fileField = $fileField;  
  17.         $this->config = $config;  
  18.         $this->stateInfo = $this->stateMap[ 0 ];  
  19.         $this->upFile( $base64 );  
  20.     }  



 

然后创建上传文件的方法:

 

[php]  view plain  copy
 
  1. /*Ueditor_model*/  
  2. class Ueditor_model extends CI_Model {  
  3.   
  4.         function __construct() {  
  5.             parent::__construct();  
  6.             $this->load->library("myuploader");  
  7.         }  
  8.   
  9.         function upload_image(){  
  10.             $dir = 'source/uploads/images/ueditor_images/';  
  11.             if (!is_dir($dir)) {  
  12.                 $res = mkdir($dir, 0755, true);  
  13.             }  
  14.             //上传配置  
  15.             $config = array(  
  16.                 "savePath" => $dir ,             //存储文件夹  
  17.                 "maxSize" => 512,                   //允许的文件最大尺寸,单位KB  
  18.                 "allowFiles" => array( ".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp" )  //允许的文件格式  
  19.             );  
  20.   
  21.             $config[ "savePath" ] = $dir;  
  22.             $this->myuploader->init("upfile", $config, $base=false);  
  23.   
  24.             $info = $this->myuploader->getFileInfo();  
  25.   
  26.             return $info;  
  27.         }  
  28.     }  
  29. /*controller*/  
  30. class Uploads_files extends CI_Controller {   
  31.     function goods_edition_upload_img() {  
  32.         $info = $this -> ueditor_model -> upload_image();  
  33.   
  34.         echo json_encode($info);  
  35.     }  
  36. }  

最后一步到umeditor.config.js中修改上传文件方法

 

[javascript]  view plain  copy
 
    1. /** 
    2.     * 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。 
    3.     */  
    4.    window.UMEDITOR_CONFIG = {  
    5.   
    6.        //为编辑器实例添加一个路径,这个不能被注释  
    7.        UMEDITOR_HOME_URL : URL  
    8.   
    9.        //图片上传配置区  
    10.        ,imageUrl:URL + ""             <span style="white-space:pre">          </span>//图片上传提交地址  
    11.        ,imagePath:URL + ""                     <span style="white-space:pre"> </span>//图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置  
    12.        ,imageFieldName:"upfile"                   <span style="white-space:pre">  </span>//图片数据的key,若此处修改,需要在后台对应文件修改对应参数  

 

转:http://blog.csdn.net/demon3182/article/details/41915283

如何联系我:【万里虎】www.bravetiger.cn 【QQ】3396726884 (咨询问题100元起,帮助解决问题500元起) 【博客】http://www.cnblogs.com/kenshinobiy/
目录
相关文章
|
2月前
|
JavaScript 前端开发 持续交付
Prettier 高级应用:集成 CI/CD 流水线与插件开发
【10月更文挑战第18天】Prettier 是一款流行的代码格式化工具,它能够自动将代码格式化成一致的风格,从而提高代码的可读性和维护性。对于希望进一步发挥 Prettier 潜力的高级用户而言,将 Prettier 集成到持续集成(CI)和持续部署(CD)流程中,确保每次提交的代码都符合团队标准,是非常重要的。此外,通过开发自定义插件来支持更多语言或扩展 Prettier 的功能也是值得探索的方向。本文将详细介绍这两方面的内容。
49 2
|
20天前
|
存储 监控 Devops
DevOps实践:持续集成/持续部署(CI/CD)的实战指南
DevOps实践:持续集成/持续部署(CI/CD)的实战指南
|
27天前
|
jenkins Java 持续交付
软件开发自动化程度的不断提高,持续集成(CI)和持续部署(CD)成为现代软件开发的重要组成部分
随着软件开发自动化程度的不断提高,持续集成(CI)和持续部署(CD)成为现代软件开发的重要组成部分。本文以电商公司为例,介绍如何使用 Jenkins 自动发布 Java 代码,包括安装配置、构建脚本编写及自动化部署等步骤,帮助团队实现高效稳定的软件交付。
30 3
|
2月前
|
缓存 监控 测试技术
掌握容器化持续集成/持续部署(CI/CD)的最佳实践
【10月更文挑战第8天】本文介绍了容器化持续集成/持续部署(CI/CD)的最佳实践,涵盖容器化CI/CD的概念、优势和实施步骤。通过使用容器技术,可以实现环境一致性、快速迭代和易于扩展,提高软件开发的效率和可靠性。文章还详细讨论了编写高效的Dockerfile、自动化测试、安全性、监控和日志管理等方面的最佳实践。
|
2月前
|
Devops jenkins 测试技术
DevOps实践:持续集成与持续部署(CI/CD)的实现之路
【9月更文挑战第33天】在软件开发的海洋中,DevOps是一艘能够加速航行、提升航程质量的巨轮。本文将作为你的航海图,指引你理解并实现DevOps文化中的核心环节——持续集成(CI)与持续部署(CD)。我们将从基础概念出发,逐步深入到实际操作,带你领略代码到部署的全过程。准备好扬帆起航,让我们共同探索如何通过自动化工具和流程优化,让软件交付变得既高效又可靠。
|
1月前
|
运维 安全 Devops
DevOps实践:持续集成与持续部署(CI/CD)的自动化之路
【10月更文挑战第22天】在软件交付的快速迭代中,DevOps文化和实践成为企业加速产品上市、保证质量和提升客户满意度的关键。本文将通过一个实际案例,深入探讨如何利用持续集成(Continuous Integration, CI)和持续部署(Continuous Deployment, CD)实现软件开发流程的高效自动化,包括工具选择、流程设计以及问题解决策略。我们将一起探索代码从编写到部署的全自动化旅程,揭示其对企业运维效率和产品质量所带来的深远影响。
|
2月前
|
jenkins Shell 持续交付
Jenkins持续集成GitLab项目 GitLab提交分支后触发Jenkis任务 持续集成 CI/CD 超级详细 超多图(二)
Jenkins持续集成GitLab项目 GitLab提交分支后触发Jenkis任务 持续集成 CI/CD 超级详细 超多图(二)
70 0
|
3月前
|
Kubernetes Go 持续交付
一个基于Go程序的持续集成/持续部署(CI/CD)
本教程通过一个简单的Go程序示例,展示了如何使用GitHub Actions实现从代码提交到Kubernetes部署的CI/CD流程。首先创建并版本控制Go项目,接着编写Dockerfile构建镜像,再配置CI/CD流程自动化构建、推送Docker镜像及部署应用。此流程基于GitHub仓库,适用于快速迭代开发。
63 3
|
3月前
|
Kubernetes 持续交付 Go
创建一个基于Go程序的持续集成/持续部署(CI/CD)流水线
创建一个基于Go程序的持续集成/持续部署(CI/CD)流水线
|
2月前
|
jenkins Shell 持续交付
Jenkins持续集成GitLab项目 GitLab提交分支后触发Jenkis任务 持续集成 CI/CD 超级详细 超多图(一)
Jenkins持续集成GitLab项目 GitLab提交分支后触发Jenkis任务 持续集成 CI/CD 超级详细 超多图(一)
165 0