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

本文UEditor版本:ueditor1_4_3_utf8_php版本

第一步:部署编辑器

HTML代码:

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

JavaScript代码:

 $(document).ready(function () {
var ue = UE.getEditor('editor',{
serverUrl:'/ueditorup/unifiedRequest/',//后台统一请求路径
autoHeightEnabled:false,
toolbars:
[[
'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'pagebreak', 'template', 'background', '|',
'horizontal', 'date', 'time', 'spechars', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
'print', 'preview', 'searchreplace', 'help', 'drafts'
]],
});

第二步:服务端整合

前端代码部署完,现在页面已经可以正常显示百度编辑器的编辑框了,接下来就是本文要介绍的上传功能的整合。

首先在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编辑器就算完成了。

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

CI框架整合UEditor编辑器上传功能的更多相关文章

  1. Dedecmsv5.7整合ueditor 图片上传添加水印

    最近的项目是做dedecmsv5.7的二次开发,被要求上传的图片要加水印,百度ueditor编辑器不支持自动加水印,所以,找了很多资料整合记录一下,具体效果图 这里不仔细写dedecmsv5.7 整合 ...

  2. django下的ckeditor 5.0 文本编辑器上传功能。

    完整的后台界面怎么可以没有文本编辑器,但是django的admin界面很疑惑,没有自带文本编辑器,好在网上有不少成型的库可以用 我用的是ckeditor编辑器,安装和配置我引用别人的博客 这篇博客配置 ...

  3. dedecmsv5.7 ueditor编辑器上传视频/修改,视频显示空白,解决方案

    dedecmsv5.7 ueditor 在上传视频之后,显示空白.其实是有视频的,就是显示空白.找了资料,记录一下. 解决方案: 找到include下面的ueditor下面的ueditor.all.j ...

  4. ueditor 编辑器上传到服务器后图片上传不能正常使用

    网站集成ueditor编辑器后在本地能正常使用,上传到服务器上后,图片上传功能提示:后端配置项没有正常加载,上传插件不能正常使用.且单个图片上传图标是灰色的不能点击. 相信遇到这个问题的同学是很多的吧 ...

  5. CI框架结合jQuery实现上传多张图片即时显示

    一.Html代码如下: <tr> <td class="txt_r"><span class="orange">* < ...

  6. ueditor 图片上传功能(.net)

    假如下载的net文件 所在工程引用bin文件中的Newtonsoft.Json.dll 在浏览器中运行 `net/controller.ashx`,如果返回 "`{"state&q ...

  7. 百度富文本编辑器整合fastdfs文件服务器上传

    技术:springboot+maven+ueditor   概述 百度富文本整合fastdfs文件服务器上传 详细 代码下载:http://www.demodashi.com/demo/15008.h ...

  8. Spring+SpringMVC+MyBatis+easyUI整合优化篇(七)图片上传功能

    日常啰嗦 前一篇文章<Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合>讲了富文本编辑器UEditor的整合与使用 ...

  9. 在SAE上使用Ueditor的图片上传功能

    SAE上是没有文件夹读写权限的,所以要在SAE使用Ueditor的图片上传功能须要借助SAE的Storage服务. 一.开通Storage服务 在SAE控制台开通Storage服务,并新增一个doma ...

随机推荐

  1. 经典面试题目C语言

    题一,堆和栈的区别是? 题二,Volatile与Register的区别是? 题三,ARM里的大端格式和小端格式分别是什么意思? 题一答案:   (1)存储内容不同 栈:在函数调用时,栈中存放的是函数中 ...

  2. 六、java异常处理

    目录 一.异常的概念 二.异常的分类 三.异常的捕获和处理 四.使用自定义异常 一.异常的概念 java异常是指java提供的用于处理程序运行过程中错误的一种机制 所谓错误是指在程序运行的过程中发生的 ...

  3. Git7:使用Gitlab管理远程仓库

    目录 1.安装 2.gitlab基本配置 3.gitlab的邮件配置 3.1.使用本地的postfix发送邮件 3.2.使用邮件发送模板 3.3.使用腾讯企业邮箱配置发送邮件 3.4.使用163邮箱来 ...

  4. Hadoop基础-MapReduce的工作原理第一弹

    Hadoop基础-MapReduce的工作原理第一弹 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在本篇博客中,我们将深入学习Hadoop中的MapReduce工作机制,这些知识 ...

  5. java io读写文件

    java io读写文件相关阅读:http://www.cnblogs.com/wing011203/archive/2013/05/03/3056535.html public class DemoI ...

  6. Git之简介及安装

    简介 Git是一个分布式版本控制系统,GitHub相当于一个远程仓库,注册账号可免费获得Git远程仓库. GitHub使用参考:https://guides.github.com/activities ...

  7. Java并发编程原理与实战二十三:Condition原理分析

    先来回顾一下java中的等待/通知机制 我们有时会遇到这样的场景:线程A执行到某个点的时候,因为某个条件condition不满足,需要线程A暂停:等到线程B修改了条件condition,使condit ...

  8. Centos7 设置静态IP后重启网络服务出错

    systemctl restart networkJob for network.service failed because the control process exited with erro ...

  9. tomcat关闭后没有及时释放内存资源

    1.ps -ef|grep java 找到对应的tomcat服务 2.kill -9  线程id 3.free -m 查看内存情况

  10. HDU1505 City Game 悬线法

    题意: 给出一个像这样的矩阵 R F F F F F F F F F F F R R R F F F     F F F F F F F F F F F F 求F组成的最大子矩阵(面积最大) 有多组数 ...