最近项目中要使用到富文本编辑器，选用了功能强大的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编辑器就算完成了。
*注意：在整合上传功能的时候，要开启文件保存目录的读写权限。
时间： 2024-10-06 17:05:59