百度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然后将该类提供的构造方法替换掉

本来的构造方法：

/**
* 构造函数
* @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 + "" //图片上传提交地址
,imagePath:URL + "" //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
,imageFieldName:"upfile" //图片数据的key,若此处修改，需要在后台对应文件修改对应参数

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

****CI和UEditor集成的更多相关文章

ueditor集成自己的ImageServer时出现错误的原因分析
1.场景:应用是一个独立的站点,ImageServer是一个独立的站点,因此存在跨域的问题. 2.遇到的详细错误“网络链接错误,请检查配置后重试!” 我使用uploadify测试是没问题的.使用ued ...
CI/CD持续集成/持续部署敏捷开发
敏捷软件开发(英语:Agile software development),又称敏捷开发,是一种从1990年代开始逐渐引起广泛关注的一些新型软件开发方法,是一种应对快速变化的需求的一种软件开发能力.它 ...
[转] 基于Gitlab CI搭建持续集成环境
[From] https://blog.csdn.net/wGL3k77y9fR1k61T1aS/article/details/78798577 前言本文是在12月12号迅雷@赵兵在前端早读课第三 ...
用 GitLab CI 进行持续集成
简介从 GitLab 8.0 开始,GitLab CI 就已经集成在 GitLab 中,我们只要在项目中添加一个 .gitlab-ci.yml 文件,然后添加一个 Runner,即可进行持续集成. ...
vue.js+UEditor集成 [前后端分离项目]
首先,谈下这篇文章中的前后端所涉及到的技术框架内容. 虽然是后端的管理项目,但整体项目,是采用前后端分离的方式完成,这样做的目的也是产品化的需求: 前端,vue+vuex+vue router+web ...
Android敏捷开发、CI（持续集成）探究
比较老的几篇文章,依旧有学习价值 http://blog.csdn.net/baodinglaolang/article/details/9530695 http://blog.csdn.net/ba ...
vue+Ueditor集成 [前后端分离项目][图片、文件上传][富文本编辑]
后端DEMO:https://github.com/coderliguoqing/UeditorSpringboot 前端DEMO:https://github.com/coderliguoqing/ ...
GitLab CI/CD持续集成设置
GitLab CI/CD持续设置官方文档地址(https://docs.gitlab.com/ee/ci/README.html) GitLab CI.CD功能非常完善,只需要简单几步,就可以完成项 ...
CI/CD持续集成小结
一.概念什么是devops,基于Gitlab从零开始搭建自己的持续集成流水线(Pipeline) https://blog.csdn.net/chengzi_comm/article/details ...

随机推荐

Fantastic Graph 2018 沈阳赛区网络预赛 F题
题意: 二分图有k条边,我们去选择其中的几条每选中一条那么此条边的u 和 v的度数就+1,最后使得所有点的度数都在[l, r]这个区间内 , 这就相当于边流入1,流出1,最后使流量平衡解析: ...
Dubbo 生态添新兵，Dubbo Admin 发布 v0.1
为了提升 Dubbo 里程碑版本2.7.0的使用体验,我们于去年年中启动了 Dubbo Admin 的重构计划,并作为Dubbo生态的子项目,于近期发布了v0.1,重构后的项目在结构上的变化如下: 将 ...
安装完打开 eclipse 提示 JVM 版本较低
在安装完 eclipse 后打开出现如下提示解决办法: 1> 去官网下载最新版本安装地址 2> linux 下直接下载安装 1.打开终端 2.控制台输入:su 3.控制台输入个人密码 ...
What is SCons?
SCons: A software construction tool What is SCons? SCons is an Open Source software construction too ...
NOIP 2018 记
“这个时刻总是会来临的,日夜磨砺的剑锋,能否在今天展现出你的利刃呢?” 十一月十一日的紫荆港,早上的空气有些冷瑟.面对未知的$Day1$,我的心里尚且没有多少底数. $T1$是一道原题,也不难,并没有 ...
解题：LNOI 2014 LCA
题面这题有点意思转化问题,我们把询问区间的点到根链加,再查询询问点到根的权值和就是每个询问的答案. 然后如果你数据结构没学傻只需要差分一下就可以扫一遍出解了 #include<cstdio& ...
jQuery EasyUI API 中文文档 - 消息框（Messager）
http://www.cnblogs.com/Philoo/archive/2011/11/15/jeasyui_api_messager.html Messager 消息框博客园风流涕淌 (p ...
Qt ------ WAV 音频文件播放
1.用 QFile 打开 WAV 文件,读出文件头信息,看看是否符合音频播放设备的要求 QAudioDeviceInfo m_audioOutputDevice;//可以获取音频输出设备的信息,比如哪 ...
Spark记录-Scala集合
Scala列表 Scala列表与数组非常相似,列表的所有元素都具有相同的类型,但有两个重要的区别. 首先,列表是不可变的,列表的元素不能通过赋值来更改. 其次,列表表示一个链表,而数组是平的. 具有类 ...
Spark记录-Scala数组
Scala提供了一种数据结构叫作数组,数组是一种存储了相同类型元素的固定大小顺序集合.数组用于存储数据集合,但将数组视为相同类型变量的集合通常更为有用. 可以声明一个数组变量,例如:numbers,使 ...

****CI和UEditor集成

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

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

****CI和UEditor集成的更多相关文章

随机推荐

热门专题