Hello,各位亲，新的一周来临啦，很高兴这么快又跟大家伙见面！话说上一回，军哥带大家用JQuery写了一个城市级联菜单的例子 ，不知道亲们学会了多少，是否自己可以独立写出来了呢。

军哥很是期待大家学有所获的，有不明白的地方随时留言吧。好了，接下来，今天军哥要带大家来一起来完成如何在CI框架中集成百度的UEditor编辑器。

我们先简单来了解一下为什么选择百度UEditor编辑器？

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于BSD协议，允许自由使用和修改代码，在众多的编辑器中还是很出类拔萃的，目前百度编辑器也作为worderPress的插件替换了之前默认的编辑器，也足以看出UEditor的强大。

再来看一下效果图：

不赖吧，相信有淫已经等不急了吧！别急，我们一步步来~~

一、官网上http://ueditor.baidu.com/website/ipanel/panel.html#下载最新UEditor的PHP + UTF-8版完整源码包，解压到任意目录，解压后的源码目录结构如下所示：   
             _examples：编辑器完整版的示例页面
            dialogs：弹出对话框对应的资源和JS文件    
            themes：样式图片和样式文件
            php：涉及到服务器端操作的PHP文件    
            third-party：第三方插件
            editor_all.js：_src目录下所有文件的打包文件    
            editor_all_min.js：editor_all.js文件的压缩版，建议在正式部署时才采用
            editor_config.js：编辑器的配置文件，建议和编辑器实例化页面置于同一目录

二、部署UEditor到CI项目（CI_UETest）中的步骤

第一步：在项目的CI_UETest/public/scripts中建立一个用于存放UEditor相关资源和文件的目录，起名为ueditor。

第二步：拷贝源码包中的php、_src、dialogs、themes、third-party和editor_config.js到CI_UETest/public/scripts/ueditor文夹中。

第三步：我们以公告管理模块中的发布公告页面作为编辑器的实例化页面，用来展示UEditor的完整版效果。
1、控制器：

  1. if (!defined('BASEPATH'))
  2. exit('No direct script access allowed');
  3. /**
  4. * @author JayJun
  5. * @copyright 2012.09.10
  6. */
  7. class notice extends CI_Controller {
  8. //构造函数
  9. function __construct(){
  10. parent::__construct();
  11. $this->base_url = $this->config->item("base_url");
  12. }
  13. //显示公告发布页面
  14. function edit() {
  15. $data['base_url'] = $this->base_url;
  16. $this->load->helper('form');  //加载表单辅助函数
  17. // 显示视图
  18. $this->load->view('notice_edit', $data);
  19. }
  20. }

2、视图：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  5. <title>发布公告</title>
  6. <link rel="stylesheet" href="<?php echo $base_url; ?>/public/css/base.css" type="text/css" />
  7. <link rel="stylesheet" href="<?php echo $base_url; ?>/bootstrap/css/bootstrap.min.css" type="text/css" />
  8. <link rel="stylesheet" href="<?php echo $base_url; ?>/public/scripts/ueditor/themes/default/ueditor.css" type="text/css" />
  9. <script type="text/javascript" src="<?php echo $base_url; ?>/public/scripts/ueditor/editor_config.js"></script>
  10. <script type="text/javascript" src="<?php echo $base_url; ?>/public/scripts/ueditor/editor_all.js"></script>
  11. </head>
  12. <body>
  13. <div class="w800 bc">
  14. <h2>发布公告</h2>
  15. <table class="table table-condensed table-bordered mt10">
  16. <?php echo form_open();?>
  17. <thead>
  18. <tr>
  19. <td colspan="2" class="fb">
  20. <span class="icon-exclamation-sign"></span>
  21. 新发布的公告默认为不显示.
  22. </td>
  23. </tr>
  24. </thead>
  25. <tbody>
  26. <tr>
  27. <td width='15%' class="fb">公告标题：</td>
  28. <td><?php echo form_input('Title')?></td>
  29. </tr>
  30. <tr>
  31. <td class="fb">公告内容：</td>
  32. <td>
  33. <?php echo form_textarea('Content','','id="myEditor"'); ?>
  34. </td>
  35. </tr>
  36. <tr>
  37. <td class="fb">是否显示：</td>
  38. <td><?php echo form_checkbox("Nstatus") ;?></td>
  39. </tr>
  40. <tr>
  41. <td colspan='2' class="form-actions">
  42. <?php echo form_submit("submit","提交","class='btn btn-primary'"); ?>
  43. <?php echo form_reset("reset","重置","class='btn'"); ?>
  44. </td>
  45. </tr>
  46. </tbody>
  47. <?php echo form_close(); ?>
  48. </table>
  49. </div>
  50. </body>
  51. <script type="text/javascript">
  52. var ue = new UE.ui.Editor();
  53. ue.render('myEditor'); //myEditor为id值
  54. </script>
  55. </html>

第四步：然后在notice_edit.php文件中创建编辑器实例。具体代码示例如下：

  1. <script type="text/javascript">
  2. var ue = new UE.ui.Editor();
  3. ue.render('myEditor');  // myEditor为id值
  4. </script>

最后一步： 在CI_UETest/public/scripts/ueditor/editor_config.js中查找URL变量配置编辑器在你项目中的路径。

  1. //强烈推荐以这种方式进行绝对路径配置
  2. URL= window.UEDITOR_HOME_URL || "/CI_UETest/public/scripts/ueditor/";  //第27行

三、其他
1、在引用editor_config.js时，最好先于editor_all.js加载，否则特定情况下可能会出现报错。

2、编辑器中预置提示、问候等内容。 
在editor_config.js文件中找到initialContent参数（第117行），设置其值为需要的提示或者问候语即可，如initialContent:’大家好’。

转：https://my.oschina.net/jayjun/blog/89078

【军哥谈CI框架】之CI中集成百度UEditor的更多相关文章

  1. 【军哥谈CI框架】之入门教程之第二讲：分析CI结构和CI是怎么工作的

    [军哥谈CI框架]之入门教程之第二讲:分析CI结构和CI是怎么工作的   之入门教程之第二讲:分析CI结构和CI是如何工作的大家好!上一节,我们共同部署了一个CI网站,做到这一点非常简单,但是,亲们, ...

  2. CI框架在模型中切换读写库和读写库

    如果你想在控制器中切换在application/config/database.php中配置好的数据库group,那么你可以参考这篇博客:CI框架在控制器中切换读写库和读写库 如果你是希望在模型中切换 ...

  3. AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能

    在AngularJS应用中集成百度地图实现定位功能 注:请点击此处进行充电! 前言 根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与 ...

  4. Android Studio 项目中集成百度地图SDK报Native method not found: com.baidu.platform.comjni.map.commonmemcache.JNICommonMemCache.Create:()I错误

    Android Studio 项目中集成百度地图SDK报以下错误: java.lang.UnsatisfiedLinkError: Native method not found: com.baidu ...

  5. CI框架在控制器中切换读写库和读写库

    CodeIgniter框架版本:3.1.7 ,php版本:5.6.* ,mysql版本:5.6 在Ci框架中,可以在application/config/database.php中配置多个group, ...

  6. ngnix 配置CI框架 与 CI的简单使用

    ngnix 支持 CI框架1.修改config.php 参考网址:https://www.chenyudong.com/archives/codeigniter-in-nginx-and-url-re ...

  7. 【ci框架基础】之部署百度编辑器

    在ci框架下加载编辑器,现在复习下内容.我的框架文件名称为ci 1.下载百度编辑器ueditor,http://ueditor.baidu.com/ 一般情况下下载ubuilder版即可,并将uedi ...

  8. CI框架在辅助函数中使用配置文件中的变量

    问题: 现有一个自定义的辅助函数,想要获取配置文件中的配置项(配置文件路径为application/config/config.php) 分析: 辅助函数并不是定义在一个class中,而是很多个可供外 ...

  9. 去掉CI框架默认url中的index.php

    1:.htaccess //放置在根目录下,和入口文件index.php的同级目录<IfModule mod_rewrite.c>RewriteEngine onRewriteCond % ...

随机推荐

  1. anaconda的spyder打不开

    因为最近一段时间没有用Spyder,今天使用时,发现Spyder又又打不开了. 之前遇到Spyder打不开的情况时,是根据这里的教程:删除.matplotlib和.spyder两个文件,但这次删除这两 ...

  2. poj3667 Hotel （线段树 区间合并）

    poj3667 HotelTime Limit: 3000MS Memory Limit: 65536KTotal Submissions: 18925 Accepted: 8242Descripti ...

  3. 【刷题】LOJ 6003 「网络流 24 题」魔术球

    题目描述 假设有 \(n\) 根柱子,现要按下述规则在这 \(n\) 根柱子中依次放入编号为 \(1, 2, 3, 4, \cdots\) 的球. 每次只能在某根柱子的最上面放球. 在同一根柱子中,任 ...

  4. 深入解析ES6 更易于继承的类语法的使用

    和其它面向对象编程语言一样,ES6 正式定义了 class 类以及 extend 继承语法糖,并且支持静态.派生.抽象.迭代.单例等,而且根据 ES6 的新特性衍生出很多有趣的用法. 一.类的基本定义 ...

  5. mysql列类型char,varchar,text,tinytext,mediumtext,longtext的比较与选择

    储存不区分大小写的字符数据 TINYTEXT 最大长度是 255 (2^8 – 1) 个字符. TEXT 最大长度是 65535 (2^16 – 1) 个字符. MEDIUMTEXT 最大长度是 16 ...

  6. Stanford机器学习笔记-9. 聚类(K-means算法)

    9. Clustering Content 9. Clustering 9.1 Supervised Learning and Unsupervised Learning 9.2 K-means al ...

  7. git 创建空提交

    git commit --allow-empty -m "Empty Commit to setup deployments"

  8. UML类图学习笔记

    http://note.youdao.com/noteshare?id=d5af220db7081dda73511fcb7b4da390

  9. AngularJS 项目里使用echarts 2.0 实现地图功能

    项目中有一页是显示全国地图, echarts官网的地图实例里,有一个模拟迁徙的实例,比较符合项目需求.所以大部分配置项是参考此实例. angular 就不过多介绍了, Google出品的mvc(或者说 ...

  10. Hadoop生态圈-kafka事务控制以及性能测试

    Hadoop生态圈-kafka事务控制以及性能测试 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.