军哥谈CI框架之CI中集成百度UEditor

Posted 歉信君 —— 信真科技·信守真品 www.xinzhenkj

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了军哥谈CI框架之CI中集成百度UEditor相关的知识，希望对你有一定的参考价值。

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.      }
  14.     //显示公告发布页面
  15.     function edit() {
  16.           $data[‘base_url‘] = $this->base_url;
  17.           $this->load->helper(‘form‘);  //加载表单辅助函数
  18.           // 显示视图
  19.           $this->load->view(‘notice_edit‘, $data);
  20.      }
  21. }


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的主要内容，如果未能解决你的问题，请参考以下文章

ci框架基础之部署百度编辑器

ci框架基础之部署百度编辑器

CI框架 -- 核心文件 之 Hooks.php

十二CI框架之数据库查询

三CI框架之一个最简单的页面

十一CI框架之输出用户IP地址