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

本来的构造方法:

  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. $this->stateMap['ERROR_TYPE_NOT_ALLOWED'] = iconv('unicode', 'utf-8', $this->stateMap['ERROR_TYPE_NOT_ALLOWED']);
  20. }

替换成:

  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. public function Init($fileField , $config , $base64 = false)
  11. {
  12. /*var_dump($fileField);
  13. var_dump($config);exit;*/
  14. $this->fileField = $fileField;
  15. $this->config = $config;
  16. $this->stateInfo = $this->stateMap[ 0 ];
  17. $this->upFile( $base64 );
  18. }

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

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

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

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

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

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

  1. ueditor集成自己的ImageServer时出现错误的原因分析

    1.场景:应用是一个独立的站点,ImageServer是一个独立的站点,因此存在跨域的问题. 2.遇到的详细错误“网络链接错误,请检查配置后重试!” 我使用uploadify测试是没问题的.使用ued ...

  2. CI/CD持续集成/持续部署 敏捷开发

    敏捷软件开发(英语:Agile software development),又称敏捷开发,是一种从1990年代开始逐渐引起广泛关注的一些新型软件开发方法,是一种应对快速变化的需求的一种软件开发能力.它 ...

  3. [转] 基于Gitlab CI搭建持续集成环境

    [From] https://blog.csdn.net/wGL3k77y9fR1k61T1aS/article/details/78798577 前言 本文是在12月12号迅雷@赵兵在前端早读课第三 ...

  4. 用 GitLab CI 进行持续集成

    简介 从 GitLab 8.0 开始,GitLab CI 就已经集成在 GitLab 中,我们只要在项目中添加一个 .gitlab-ci.yml 文件,然后添加一个 Runner,即可进行持续集成. ...

  5. vue.js+UEditor集成 [前后端分离项目]

    首先,谈下这篇文章中的前后端所涉及到的技术框架内容. 虽然是后端的管理项目,但整体项目,是采用前后端分离的方式完成,这样做的目的也是产品化的需求: 前端,vue+vuex+vue router+web ...

  6. Android敏捷开发、CI(持续集成)探究

    比较老的几篇文章,依旧有学习价值 http://blog.csdn.net/baodinglaolang/article/details/9530695 http://blog.csdn.net/ba ...

  7. vue+Ueditor集成 [前后端分离项目][图片、文件上传][富文本编辑]

    后端DEMO:https://github.com/coderliguoqing/UeditorSpringboot 前端DEMO:https://github.com/coderliguoqing/ ...

  8. GitLab CI/CD持续集成设置

    GitLab CI/CD持续设置 官方文档地址(https://docs.gitlab.com/ee/ci/README.html) GitLab CI.CD功能非常完善,只需要简单几步,就可以完成项 ...

  9. CI/CD持续集成小结

    一.概念 什么是devops,基于Gitlab从零开始搭建自己的持续集成流水线(Pipeline) https://blog.csdn.net/chengzi_comm/article/details ...

随机推荐

  1. Vue项目框架

    Vue项目框架 基本组件的使用: new Vue({ el, //要绑定的DOM element data, //要绑定的资料 props, //可用来接收父原件资料的属性 template, //要 ...

  2. appium获取Toast内容的方法

    做自动化测试的时候,可能需要根据弹出的Toast提示来做下一步判断.这里记录一下获取Toast内容的方法,同时巩固一下显示等待的方法之一WebDriverWait. from selenium.web ...

  3. c++/ boost 库常见错误及解决方法总结

    1. error LNK2019: 无法解析的外部符号 "class boost::system::error_category const & __cdecl boost::sys ...

  4. eclipse运行tomcat中发生异常重启后tomcat端口被占用

    在任务管理器关闭javaw进程即可,一般此时会有两个以上javaw进程,关闭其中占用内存较少的那个 可用netstat -ano命令查看端口占用情况

  5. hdu 1151 Air Raid 最小路径覆盖

    题意:一个城镇有n个路口,m条路.每条路单向,且路无环.现在派遣伞兵去巡逻所有路口,伞兵只能沿着路走,且每个伞兵经过的路口不重合.求最少派遣的伞兵数量. 建图之后的就转化成邮箱无环图的最小路径覆盖问题 ...

  6. 架构师成长之路1.1-系统监控工具htop

    点击返回架构师成长之路 架构师成长之路1.1-系统监控工具htop htop 是Linux系统中的一个互动的进程查看器,一个文本模式的应用程序(在控制台或者X终端中),需要ncurses. 与Linu ...

  7. ARG102E:Stop. Otherwise...

    传送门 Sol 对于每个 \(i\) ,可以把 \(k\) 个数字分成 \((x,i-x)\) 的若干组. 那么就是求每组只能其中选择一个且可以重复的方案数. 预处理 \(f[i][j]\) 表示从 ...

  8. Spring Boot整合MyBatis(使用Spring Tool Suite工具)

    1. 创建Spring Boot项目 通过Spring Tool Suite的Spring Starter Project对话框,其实是把项目生成的工作委托http://start.spring.io ...

  9. Delphi 的内存操作函数(5): 复制内存

    MoveMemory.CopyMemory 的功能类似, 都是复制内存, 都是调用 Move 过程; MoveMemory.CopyMemory 操作指针; Move 操作实体. 还要注意, 它们的参 ...

  10. Java基础-进制转换

    Java基础-进制转换 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Java 程序中常用的进制 1>.十进制,由“0123456789” 这10个数字组成,逢十进一: ...