一项目中需要用到富文本编辑器,目前可选择的编辑器可以参看求推荐好用的富文本编辑器这个讨论。然后我就试用了百度的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的弹出框也正常了。
本文地址:http://www.nowamagic.net/librarys/veda/detail/1873,欢迎访问原出处。
大家都在看