【軍哥談CI框架】之CI中集成百度UEditor

時間 2019-11-13

標籤軍哥談CI框架集成百度 ueditor 简体版

原文原文鏈接

Hello,各位親，話說上一回，軍哥帶你們用 JQuery寫了一個全國城市級聯菜單的例子，不知道親們學會了多少，是否本身能夠獨立寫出來了呢。

軍哥非常期待你們學有所獲的，有不明白的地方隨時留言吧。好了，接下來，今天軍哥要帶你們來一塊兒來完成如何在CI框架中集成百度的UEditor編輯器。

咱們先簡單來了解一下爲何選擇百度UEditor編輯器？ javascript

UEditor是由百度web前端研發部開發所見即所得富文本web編輯器，具備輕量，可定製，注重用戶體驗等特色，開源基於BSD協議，容許自由使用和修改代碼，在衆多的編輯器中仍是很出類拔萃的，目前百度編輯器也做爲worderPress的插件替換了以前默認的編輯器，也足以看出UEditor的強大。

再來看一下效果圖：

不賴吧，相信有淫已經等不急了吧！別急，咱們一步步來~~

1、官網上http://ueditor.baidu.com/website/ipanel/panel.html#下載最新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：編輯器的配置文件，建議和編輯器實例化頁面置於同一目錄 php

2、部署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的完整版效果。 css

一、控制器： html

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); 
     }
}

二、視圖：

<!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','','id="myEditor"'); ?>
                           </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>
</html>

第四步：而後在notice_edit.php文件中建立編輯器實例。具體代碼示例以下：

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

最後一步：在CI_UETest/public/scripts/ueditor/editor_config.js中查找URL變量配置編輯器在你項目中的路徑。

//強烈推薦以這種方式進行絕對路徑配置 
URL= window.UEDITOR_HOME_URL || "/CI_UETest/public/scripts/ueditor/";  //第27行

3、其餘
1、在引用editor_config.js時，最好先於editor_all.js加載，不然特定狀況下可能會出現報錯。

2、編輯器中預置提示、問候等內容。
在editor_config.js文件中找到initialContent參數（第117行），設置其值爲須要的提示或者問候語便可，如initialContent:’你們好，我是軍哥！lamp兄弟連，歡迎你！’。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。