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

Hello,各位亲，新的一周来临啦，很高兴这么快又跟大家伙见面！话说上一回，军哥带大家用我们先简单来了解一下为什么选择百度UEditor编辑器？

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

再来看一下效果图：
【军哥谈CI框架】之CI中集成百度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、视图：

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>发布公告</title>
<link rel="stylesheet" href="<?php echo $base_url; ?>/public/css/base.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $base_url; ?>/bootstrap/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $base_url; ?>/public/scripts/ueditor/themes/default/ueditor.css" type="text/css" />
<script type="text/javascript" src="<?php echo $base_url; ?>/public/scripts/ueditor/editor_config.js"></script>
<script type="text/javascript" src="<?php echo $base_url; ?>/public/scripts/ueditor/editor_all.js"></script>
</head>
<body>
<div class="w800 bc">
<h2>发布公告</h2>
<table class="table table-condensed table-bordered mt10">
<?php echo form_open();?>
<thead>
<tr>
<td colspan="2" class="fb">
<span class="icon-exclamation-sign"></span>
新发布的公告默认为不显示.
</td>
</tr>
</thead>
<tbody>
<tr>
<td width='15%' class="fb">公告标题：</td>
<td><?php echo form_input('Title')?></td>
</tr>
<tr>
<td class="fb">公告内容：</td>
<td>
<?php echo form_textarea('Content','',''); ?>
</td>
</tr>
<tr>
<td class="fb">是否显示：</td>
<td><?php echo form_checkbox("Nstatus") ;?></td>
</tr>
<tr>
<td colspan='2' class="form-actions">
<?php echo form_submit("submit","提交","class='btn btn-primary'"); ?>
<?php echo form_reset("reset","重置","class='btn'"); ?>
</td>
</tr>
</tbody>
<?php echo form_close(); ?>
</table>
</div>
</body>
<script type="text/javascript">
var ue = new UE.ui.Editor();
ue.render('myEditor'); //myEditor为id值
</script>
</html>

【军哥谈CI框架】之CI中集成百度UEditor 第四步：然后在notice_edit.php文件中创建编辑器实例。具体代码示例如下：

复制代码

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

【军哥谈CI框架】之CI中集成百度UEditor 最后一步：在CI_UETest/public/scripts/ueditor/editor_config.js中查找URL变量配置编辑器在你项目中的路径。

复制代码

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

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