欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

如何在CI框架中集成百度的UEditor编辑器 有大用

如何在CI框架中集成百度的UEditor编辑器 
我们先简单来了解一下为什么选择百度UEditor编辑器
 
 
 
引用 
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器具有
轻量可定制注重用户体验等特点开源基于BSD协议允许自由使用和
修改代码在众多的编辑器中还是很出类拔萃的目前百度编辑器也作为
worderPress
的插件替换了之前默认的编辑器也足以看出UEditor的
强大。 
 再来看一下效果图
 
 
不赖吧相信有淫已经等不急了吧别急我们一步步来~~
 
 
下载最新
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. } 
13.  
14. //显示公告发布页面 
15. function edit() { 
16. $data['base_url'] = $this->base_url; 
17. // 显示视图 
18. $this->load->view('notice_edit', $data); 
19. } 
20. } 
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
1. <html xmlns="http://www.w3.org/1999/xhtml"> 
2. <head> 
3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
4. <title>发布公告</title> 
5. <link rel="stylesheet" href="<?php echo $base_url; ?>/public/css/base.css" type="text/css" 
/> 
6. <link rel="stylesheet" href="<?php echo $base_url; ?>/bootstrap/css/bootstrap.min.css" 
type="text/css" /> 
7. <link rel="stylesheet" href="<?php echo 
$base_url; ?>/public/scripts/ueditor/themes/default/ueditor.css" type="text/css" /> 
8. <script type="text/javascript" src="<?php echo 
$base_url; ?>/public/scripts/ueditor/editor_config.js"></script> 
9. <script type="text/javascript" src="<?php echo 
$base_url; ?>/public/scripts/ueditor/editor_all.js"></script> 
10. </head> 
11. <body> 
12. <div class="w800 bc"> 
13. <h2>发布公告</h2> 
14. <table class="table table-condensed table-bordered mt10"> 
15. <?php echo form_open();?> 
16. <thead> 
17. <tr> 
18. <td colspan="2" class="fb"> 
19. <span class="icon-exclamation-sign"></span> 
. </tr> 
23. </thead> 
24. <tbody> 
25. <tr> 
26. <td width='15%' class="fb">公告标题</td> 
27. <td><?php echo form_input('Title')?></td> 
28. </tr> 
29. <tr> 
30. <td class="fb">公告内容</td> 
31. <td> 
32. <?php echo form_textarea('Content','','id="myEditor"'); ?> 
33. </td> 
34. </tr> 
35. <tr> 
36. <td class="fb">是否显示</td> 
37. <td><?php echo form_checkbox("Nstatus") ;?></td> 
38. </tr> 
39. <tr> 
40. <td colspan='2' class="form-actions"> 
42. <?php echo form_reset("reset","重置","class='btn'"); ?> 
43. </td> 
44. </tr> 
45. </tbody> 
46. <?php echo form_close(); ?> 
47. </table> 
48. </div> 
49. </body> 
50. <script type="text/javascript"> 
51. var ue = new UE.ui.Editor(); 
52. ue.render('myEditor'); //myEditor为id值 
53. </script> 
54. </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行设置其值为
需要的提示或者问候语即可
 
 
 
来自  http://www.doc88.com/p-666125653391.html


在CodeIgniter中集成百度编辑器UEditor

 (2012-06-19 15:33:58)
标签: 

杂谈

分类: php

一项目中需要用到富文本编辑器,目前可选择的编辑器可以参看求推荐好用的富文本编辑器这个讨论。然后我就试用了百度的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文件,里面有配置路径的地方。看以下代码:



(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://blog.sina.com.cn/s/blog_454f2c8c010145k4.html



请教,ci框架嵌入百度编辑器,如何获取编辑器内容






 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

普通分类: