phpcmsV9.5.8整合百度編輯器Ueditor1.4.3教程

最近在搞phpcms視頻功能，官方的視頻功能實在是坑，剛開始是想將優酷的上傳功能集成到ckeditor，在coding上有個項目，上傳已經集成好了，還沒有做上傳后視頻的獲取和顯示

項目地址：https://coding.net/savokiss/melos.git

這個項目是可以在線演示的，有興趣的同學可以私信我或者fork一下

今天偶然看到了百度的ueditor，看了一下有視頻上傳功能，可以滿足小規模視頻需求，所以就開始搞了，

網上看了很多教程有個別的缺點，不太適用於最新版v9，所以自己整理了一下：修改前注意備份

 

1. 下載Ueditor

官網：http://ueditor.baidu.com/website/download.html

 

2.解壓到phpcms目錄

將壓縮包內文件夾改名為ueditor解壓到phpcms目錄下面的./statics/js/下，目錄結構如下：

 

3.修改ueditor/php/config.json

全局替換，

- 如果是本地項目，將/ueditor/php/upload/替換為/網站文件夾/uploadfile/

- 如果是線上項目，將/ueditor/php/upload/替換為/uploadfile/

 

4.修改./libs/classes/form.class.php文件

將靜態方法editor里面所有內容替換為：

$str ='';
if(!defined('EDITOR_INIT')) {
            $str .= '<script type="text/javascript" src="'.JS_PATH.'ueditor/ueditor.config.js"></script>';
            $str .= '<script type="text/javascript" src="'.JS_PATH.'ueditor/ueditor.all.js"></script>';
            $str .= '<script type="text/javascript" src="'.JS_PATH.'ueditor/ueditor.parse.js"></script>';
            $str .= '<link rel="stylesheet" href="'.JS_PATH.'ueditor/themes/default/css/ueditor.css"/>';
            define('EDITOR_INIT', 1);
        }
            $str .= "<script type=\"text/javascript\">\r\n";
            $str .= "var editor = UE.getEditor('$textareaid');";
            $str .= '</script>';
return $str;

 

5.修改ueditor大小

在ueditor/themes/default/css/ueditor.css中，

找到/*UI工具欄、編輯區域、底部*/下面的css：.edui-default .edui-editor，在其中添加：

width:auto!important;//用於ueditor工具欄的寬度自適應

往下找到edui-editor-iframeholder，在其中也添加：

width:auto!important;//用於ueditor內容框寬度自適應

 

6.修改ueditor寬度

在ueditor/ueditor.config.js中，

找到initialFrameHeight，將此行注釋取消掉（默認的高度比較低）

 

 

 

 

 

注意：

1.如果需要自定義工具欄：

修改ueditor/ueditor.config.js配置文件，

 ,toorbars : [[ ********** ]]

這個工具欄圖標你可以參照官方文檔進行修改，去掉不需要的功能：http://fex.baidu.com/ueditor/#start-toolbar

 

2.附件沒有按照phpcms的命名規則修改，

如果需要修改，在config.json文件中：

按如下替換：注意涉及到image,file,video，需要替換三次

uploadfile/{yyyy}/{mm}{dd}/{yyyy}{mm}{dd}{rand:6}

 

3.phpcms自帶的ckeditor是上傳附件的時候是操作數據庫的，

所以后台附件管理有數據庫模式，而咱沒有寫相關代碼，所以如果需要管理附件只能用目錄模式進行刪除，這種情況下也就不需要注意路徑問題了

 

4.本方法是在新安裝的phpcms v9.5.8上面完成的，所以沒有考慮已有附件在ueditor中的顯示問題

如果是已存在的附件，需要替換如下圖三個文件中的一些路徑：

具體可以參考下帖對這三個文件的操作部分：http://bbs.phpcms.cn/thread-882637-1-1.html

 

5.關於上傳的視頻在IE下看不到的問題（2014.11.6更新）

參考這篇文章：http://blog.csdn.net/estelle_belle/article/details/40047443

在視頻播放的頁面或者header引入如下代碼即可

<!--[if IE]>
<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>  
<![endif]-->

 

 

 

上述方法改過之后暫時沒有發現問題，如果有問題隨時更新，歡迎交流！