zoukankan      html  css  js  c++  java
  • 【军哥谈CI框架】之CI中集成百度UEditor

    Hello,各位亲,新的一周来临啦,很高兴这么快又跟大家伙见面!话说上一回,军哥带大家用JQuery写了一个城市级联菜单的例子 ,不知道亲们学会了多少,是否自己可以独立写出来了呢。


    军哥很是期待大家学有所获的,有不明白的地方随时留言吧。好了,接下来,今天军哥要带大家来一起来完成如何在CI框架中集成百度的UEditor编辑器。

    我们先简单来了解一下为什么选择百度UEditor编辑器?

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




    再来看一下效果图:






    不赖吧,相信有淫已经等不急了吧!别急,我们一步步来~~

    一、官网上http://ueditor.baidu.com/website/ipanel/panel.html#载最新UEditorPHP + UTF-8完整源码包,解压到任意目录,解压后的源码目录结构如下所示:   
                 _examples:编辑器完整版的示例页面
                dialogs:弹出对话框对应的资源和JS文件    
                themes:样式图片和样式文件
                php:涉及到服务器端操作的PHP文件    
                third-party:第三方插件
                editor_all.js_src目录下所有文件的打包文件    
                editor_all_min.jseditor_all.js文件的压缩版,建议在正式部署时才采用
                editor_config.js:编辑器的配置文件,建议和编辑器实例化页面置于同一目录


    二、部署UEditorCI项目(CI_UETest)中的步骤


    第一步:在项目的CI_UETest/public/scripts中建立一个用于存放UEditor相关资源和文件的目录,起名为ueditor。 


    第二步:拷贝源码包中的php_srcdialogsthemesthird-partyeditor_config.jsCI_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.     function edit() {
    15.           $data['base_url'] = $this->base_url;
    16.           $this->load->helper('form');  //加载表单辅助函数
    17.           // 显示视图
    18.           $this->load->view('notice_edit', $data);
    19.      }
    20. }


    2、视图:

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4.        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    5.        <title>发布公告</title>
    6.        <link rel="stylesheet" href="<?php echo $base_url; ?>/public/css/base.css" type="text/css" />
    7.        <link rel="stylesheet" href="<?php echo $base_url; ?>/bootstrap/css/bootstrap.min.css" type="text/css" />
    8.        <link rel="stylesheet" href="<?php echo $base_url; ?>/public/scripts/ueditor/themes/default/ueditor.css" type="text/css" />
    9.        <script type="text/javascript" src="<?php echo $base_url; ?>/public/scripts/ueditor/editor_config.js"></script>
    10.        <script type="text/javascript" src="<?php echo $base_url; ?>/public/scripts/ueditor/editor_all.js"></script>
    11. </head>
    12. <body>
    13.       <div class="w800 bc">
    14.            <h2>发布公告</h2>
    15.            <table class="table table-condensed table-bordered mt10">
    16.            <?php echo form_open();?>
    17.                  <thead>
    18.                       <tr>
    19.                           <td colspan="2" class="fb">
    20.                                 <span class="icon-exclamation-sign"></span>
    21.                                 新发布的公告默认为不显示.
    22.                           </td>
    23.                       </tr>
    24.                  </thead>
    25.                  <tbody>
    26.                       <tr>
    27.                            <td width='15%' class="fb">公告标题:</td>
    28.                            <td><?php echo form_input('Title')?></td>
    29.                       </tr>
    30.                       <tr>
    31.                            <td class="fb">公告内容:</td>
    32.                            <td>
    33.                                <?php echo form_textarea('Content','','id="myEditor"'); ?>
    34.                            </td>
    35.                       </tr>
    36.                       <tr>
    37.                            <td class="fb">是否显示:</td>
    38.                            <td><?php echo form_checkbox("Nstatus") ;?></td>
    39.                       </tr>
    40.                       <tr>
    41.                            <td colspan='2' class="form-actions">
    42.                                   <?php echo form_submit("submit","提交","class='btn btn-primary'"); ?>
    43.                                   <?php echo form_reset("reset","重置","class='btn'"); ?>
    44.                            </td>
    45.                       </tr>
    46.                  </tbody>
    47.           <?php echo form_close(); ?>
    48.           </table>
    49.       </div>
    50. </body>
    51. <script type="text/javascript">
    52.        var ue = new UE.ui.Editor();
    53.        ue.render('myEditor'); //myEditor为id值
    54. </script>
    55. </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,设置其值为需要的提示或者问候语即可,如initialContent:’大家好’。 

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

  • 相关阅读:
    VBS与JS变量共享与互操作
    VBA之MSForms.DataObject对象
    VBA编程的工程性规划
    WSF脚本详解:JS和VBS互调用
    HTA程序:VBS/JS脚本GUI
    Python字符串格式化
    Python __builtins__模块拾穗
    Java高级特性 第6节 注解初识
    Java高级特性 第5节 序列化和、反射机制
    Java高级特性 第4节 输入输出流
  • 原文地址:https://www.cnblogs.com/kenshinobiy/p/7770741.html
Copyright © 2011-2022 走看看