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. Linux中dpkg工具update-alternatives实现符号链接软件版本的切换（转）

    一.功能作用 update-alternatives是dpkg的实用工具,用来维护系统命令的符号链接,以决定系统默认使用什么命令. 在Debian系统中,我们可能会同时安装有很多功能类似的程序和可选配 ...

  2. MT【95】由参数前系数凑配系数题2

    提示:都是看$a,b$前的系数做的$a=4/3,b=2/3;a+b=\le2$,一样的可以求得$a+b$的最小值-1,当$b=\frac{1}{3},a=\frac{-4}{3}$时取到等号.此题是清 ...

  3. 学习Spring Boot：（十九）Shiro 中使用缓存

    前言 在 shiro 中每次去拦截请求进行权限认证的时候,都会去数据库查询该用户的所有权限信息, 这个时候就是有一个问题了,因为用户的权限信息在短时间内是不可变的,每次查询出来的数据其实都是重复数据, ...

  4. unity3d 几种镜头畸变

    1.Fisheye distortion  鱼眼镜头 解释来自百度百科:鱼眼镜头是一种焦距为16mm或更短的并且视角接近或等于180°. 它是一种极端的广角镜头,“鱼眼镜头”是它的俗称.为使镜头达到最 ...

  5. 解题：AT2064 Many Easy Problems&EXNR #1 T3 两开花

    题面 两道题比较像,放在一起写了,后者可以看成前者的加强版 (sto ztb orz) 先看AT那道题 考虑计算每个点的贡献,用容斥计算:每个点没有贡献当且仅当选的所有点都在以他为根时的一个子节点的子 ...

  6. Qt error ------ qRegisterMetaType() 跨线程信号与槽的形参携带

    Qt提示: QObject::connect: Cannot queue arguments of type 'FrequencySpectrum' (Make sure 'FrequencySpec ...

  7. angularJs实现下拉框多选

    话不多说,直接上干货. 肯定需要下拉选插件.必须引入的是   注意 先后顺序 select2.css select2-bootstrap.css select2.min.js angular.min. ...

  8. Solr记录-solr文档xml

    Solr添加文档(XML) 在上一章中,我们学习解释了如何向Solr中添加JSON和.CSV文件格式的数据.在本章中,将演示如何使用XML文档格式在Apache Solr索引中添加数据. 示例数据 假 ...

  9. Java 存储和读取 oracle CLOB 类型字段的实用方法

    import java.io.BufferedReader; import java.io.IOException; import java.io.Reader; import java.io.Str ...

  10. shell ssh 批量执行

    ssh 批量执行命令 #版本1 #!/bin/bash while read line do Ip=`echo $line|awk '{print $1}'` Passwd=`echo $line|a ...