Codeigniter與百度UEditor整合教程

2013-02-02 13:00:30來(lái)源:西部e網(wǎng)作者:icech

網(wǎng)站使用的比較多的是CKeditor編輯器,不過(guò)百度UEditor也是不錯(cuò)的可視化富文本編輯器,中國(guó)人開(kāi)發(fā)更適合國(guó)情,所以這里就將CI與UEditor來(lái)結(jié)合一下。

網(wǎng)站使用的比較多的是CKeditor編輯器,不過(guò)百度UEditor也是不錯(cuò)的可視化富文本編輯器,中國(guó)人開(kāi)發(fā)更適合國(guó)情,所以這里就將CI與UEditor來(lái)結(jié)合一下。

獲取UEditor資源

下載地址:http://ueditor.baidu.com/website/download.html

Demo地址:http://ueditor.baidu.com/website/onlinedemo.html

文檔地址:http://ueditor.baidu.com/website/document.html

網(wǎng)上有關(guān)UEditor的文章不多,但是論壇上針對(duì)DedeCMS、帝國(guó)和PHPCMS的整合方法都有,但是對(duì)整合CI的不多,而且版本也不太對(duì)。這里使用的是UEditor 1.2.5.0 PHP版本。

下載UEditor后解壓縮,我們只需要使用選中的這些文件夾和文件就可以了。文件夾dialogs、lang、php、themes、third-party和文件editor_all_min.js、editor_config.js、uparse.js。將這些文件復(fù)制到CI根目錄的ueditor文件夾里面(這個(gè)是新建的)。

\
 
修改editor_config.js文件

將js文件的URL變量數(shù)值修改為存放目錄,這里我們使用ueditor文件夾存放。

URL = "/ueditor/";

修改模板:application/views/news_add.php

<script type="text/javascript" charset="utf-8" src="<?=base_url()?>ueditor/editor_config.js"></script>
<script type="text/javascript" charset="utf-8" src="<?=base_url()?>ueditor/editor_all_min.js"></script>
<div>
   <?php echo form_textarea('content','初始內(nèi)容','id="myEditor2"'); ?>
  <script type="text/javascript">
      UE.getEditor('myEditor2', {
          autoClearinitialContent:true, //focus時(shí)自動(dòng)清空初始化時(shí)的內(nèi)容
          wordCount:false, //關(guān)閉字?jǐn)?shù)統(tǒng)計(jì)
          elementPathEnabled:false//關(guān)閉elementPath
      });
  </script>
   </div>

在寫(xiě)這段代碼的時(shí)候,發(fā)現(xiàn)了一個(gè)BUG,如果textarea標(biāo)簽外用<p>標(biāo)簽包含起來(lái),在IE8下顯示就會(huì)有問(wèn)題,但是改成<div>就沒(méi)事了,很奇怪。

效果圖如下:

 \

修改UEditor上傳圖片路徑

以上傳圖片為例,其他的比如上傳文件、遠(yuǎn)程圖片等等都是同樣的修改方法,這里就不多介紹了:

修改ueditor/editor_config.js

將imagePath的值修改為“../”
//圖片上傳配置區(qū)
        ,imageUrl:URL+"php/imageUp.php"             //圖片上傳提交地址
        ,imagePath:"../"

修改ueditor/php/ imageUp.php

將savePath的值修改為“../../upload/”
//上傳配置
    $config = array(
        "savePath" => ($path == "1" ? "../../upload/" : "../../upload1/"),
        "maxSize" => 1000, //單位KB
        "allowFiles" => array(".gif", ".png", ".jpg", ".jpeg", ".bmp")
    );

由于篇幅問(wèn)題,這樣就差不多了。謝謝!

關(guān)鍵詞:CodeigniterciUEditor

贊助商鏈接: