百度UEditor是一款比较常用编辑器
下载地址:
<a href="http://ueditor.baidu.com/website/download.html" target="_blank">http://ueditor.baidu.com/website/download.html</a>
1.在assets目录下建立ueditor文件夹,把下载的源码放入该文件夹
2.在需要使用ueditor的文件内引入ueditor相关文件
上代码:
最近项目中要使用到富文本编辑器,选用了功能强大的UEditor,接下来就来讲讲UEditor编辑器的上传功能整合。
本文UEditor版本:ueditor1_4_3_utf8_php版本
第一步:部署编辑器
HTML代码:
JavaScript代码:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuQWZzUTOhljM0cTO2ATOwATNxMWM1EWYxEjY5ADNlFTNfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.gif)
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuQWZzUTOhljM0cTO2ATOwATNxMWM1EWYxEjY5ADNlFTNfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.gif)
第二步:服务端整合
前端代码部署完,现在页面已经可以正常显示百度编辑器的编辑框了,接下来就是本文要介绍的上传功能的整合。
首先在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的值判断具体的处理方法。
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuQWZzUTOhljM0cTO2ATOwATNxMWM1EWYxEjY5ADNlFTNfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.gif)
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuQWZzUTOhljM0cTO2ATOwATNxMWM1EWYxEjY5ADNlFTNfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.gif)
下面是修改后的MyUploader上传类的文件后缀获取方法。
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuQWZzUTOhljM0cTO2ATOwATNxMWM1EWYxEjY5ADNlFTNfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.gif)
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuQWZzUTOhljM0cTO2ATOwATNxMWM1EWYxEjY5ADNlFTNfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.gif)
到此CI框架整合UEditor编辑器就算完成了。
*注意:在整合上传功能的时候,要开启文件保存目录的读写权限。
转:
http://www.cnblogs.com/wenxiong/p/3930013.html
参考:
(注:UMeditor是Ueditor的迷你版)
Umeditor提供了一个上传文件通用的类Uploader.class.php, 首先将Uploader.class.php类放入CI框架的libraries目录下更名为Myuploader.php然后将该类提供的构造方法替换掉
本来的构造方法:
/**
* 构造函数
* @param string $fileField 表单名称
* @param array $config 配置项
* @param bool $base64 是否解析base64编码,可省略。若开启,则$fileField代表的是base64编码的字符串表单名
*/
public function __construct($fileField, $config, $type = "upload")
{
$this->fileField = $fileField;
$this->config = $config;
$this->type = $type;
if ($type == "remote") {
$this->saveRemote();
} else if($type == "base64") {
$this->upBase64();
} else {
$this->upFile();
}
$this->stateMap['ERROR_TYPE_NOT_ALLOWED'] = iconv('unicode', 'utf-8', $this->stateMap['ERROR_TYPE_NOT_ALLOWED']);
}
替换成:
* 构造函数
* @param string $fileField 表单名称
* @param array $config 配置项
* @param bool $base64 是否解析base64编码,可省略。若开启,则$fileField代表的是base64编码的字符串表单名
*/
public function __construct()
{
}
public function Init($fileField , $config , $base64 = false)
/*var_dump($fileField);
var_dump($config);exit;*/
$this->fileField = $fileField;
$this->config = $config;
$this->stateInfo = $this->stateMap[ 0 ];
$this->upFile( $base64 );
然后创建上传文件的方法:
/*Ueditor_model*/
class Ueditor_model extends CI_Model {
function __construct() {
parent::__construct();
$this->load->library("myuploader");
}
function upload_image(){
$dir = 'source/uploads/images/ueditor_images/';
if (!is_dir($dir)) {
$res = mkdir($dir, 0755, true);
}
//上传配置
$config = array(
"savePath" => $dir , //存储文件夹
"maxSize" => 512, //允许的文件最大尺寸,单位KB
"allowFiles" => array( ".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp" ) //允许的文件格式
);
$config[ "savePath" ] = $dir;
$this->myuploader->init("upfile", $config, $base=false);
$info = $this->myuploader->getFileInfo();
return $info;
/*controller*/
class Uploads_files extends CI_Controller {
function goods_edition_upload_img() {
$info = $this -> ueditor_model -> upload_image();
echo json_encode($info);
}
最后一步到umeditor.config.js中修改上传文件方法
* 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。
window.UMEDITOR_CONFIG = {
//为编辑器实例添加一个路径,这个不能被注释
UMEDITOR_HOME_URL : URL
//图片上传配置区
,imageUrl:URL + "" <span style="white-space:pre"> </span>//图片上传提交地址
,imagePath:URL + "" <span style="white-space:pre"> </span>//图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置
,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/