军哥ajax分页,【军哥谈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、控制器：

if (!defined('BASEPATH'))

exit('No direct script access allowed');

/**

* @author JayJun

* @copyright 2012.09.10

*/

class notice extends CI_Controller {

//构造函数

function __construct(){

parent::__construct();

$this->base_url = $this->config->item("base_url");

}

//显示公告发布页面

function edit() {

$data['base_url'] = $this->base_url;

$this->load->helper('form');  //加载表单辅助函数

// 显示视图

$this->load->view('notice_edit', $data);

}

} 2、视图：

发布公告

发布公告

新发布的公告默认为不显示.

公告标题：<?php echo form_input('Title')?>公告内容：是否显示：<?php echo form_checkbox("Nstatus") ;?>

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

var ue = new UE.ui.Editor();

ue.render('myEditor');  // myEditor为id值

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

//强烈推荐以这种方式进行绝对路径配置

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:’大家好，我是军哥！lamp兄弟连，欢迎你！’。