在CodeIgniter中集成百度编辑器UEditor

一项目中需要用到富文本编辑器，目前可选择的编辑器可以参看求推荐好用的富文本编辑器这个讨论。然后我就试用了百度的UEditor。

把UEditor下载下来，在CI的views层建立一个名为ueditor的文件夹，拷贝源码包中的dialogs、themes、third-party、editor_all.js和editor_config.js到ueditor文夹中。

然后在需要显示富文本编辑器的区域里加上下面代码：

<script type="text/javascript" src="<?=base_url().'application/views/default/'?>ueditor/editor_config.js"></script>
<script type="text/javascript" src="<?=base_url().'application/views/default/'?>ueditor/editor_all.js"></script>
<link rel="stylesheet" href="<?=base_url().'application/views/default/'?>ueditor/themes/default/ueditor.css"/>
<div id="myEditor"></div>
<script type="text/javascript">
//var URL= "<?=base_url().'application/views/default/'?>";
var editor = new baidu.editor.ui.Editor();
editor.render("myEditor");
</script>

刷新页面，可以看到编辑器就出来了。但是点击发现弹出层里的iframe页面没显示出来，用firebug等调试器一看，发现是相对路径出错了。

这个问题也好办，找到ueditor/ueditor_config.js文件，里面有配置路径的地方。看以下代码：

/**
*  ueditor完整配置项
*  可以在这里配置整个编辑器的特性
*/
(function () {
//这里你可以配置成ueditor目录在您网站中与根目录之间的相对路径或者绝对路径（指以http开头的绝对路径）
//window.UEDITOR_HOME_URL可以在外部配置，这里就不用配置了
//场景：如果你有多个页面使用同一目录下的editor,因为路径不同，所以在使用editor的页面上配置这个路径写在这个js外边
//var URL = window.UEDITOR_HOME_URL || '../';
var tmp = window.location.pathname,
//URL = window.UEDITOR_HOME_URL||tmp.substr(0,tmp.lastIndexOf("\/")+1).replace("_examples/","").replace("website/","");//这里你可以配置成ueditor目录在您网站的相对路径或者绝对路径（指以http开头的绝对路径）
URL = 'http://www.nowamagic.net/ci/ueditor/';

把URL编程绝对路径。现在再刷新页面，OK了，Ueditor的弹出框也正常了。