PHPCMS V9整合百度UEditor編輯器操作詳解
最近的一個專案使用PHPCMS,而自帶的ckeditor編輯器一點都不好用,於是就整合百度UEditor。支援圖片批量上傳,上傳附件等功能,自己整理一下步驟如下,修改前請先備份。
1、下載Ueditor
官網:http://ueditor.baidu.com/website/download.html
2、上傳ueditor到phpcms目錄
將壓縮包解壓後改名為ueditor,上傳到網站/statics/js/
目錄下,
3、修改檔案上傳路徑
修改ueditor/php/config.json
檔案,全域性替換(共 8處)
– 如果是本地專案,將/ueditor/php/upload/
替換為 /網站資料夾/uploadfile/
– 如果是線上專案,將/ueditor/php/upload/
/uploadfile/
4、修改phpcms預設編輯器ckeditor為Ueditor
修改/phpcms/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
- $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
配置檔案,toolbars: [[]]
陣列
這個工具欄圖示你可以參照官方文件進行修改,去掉不需要的功能:http://fex.baidu.com/ueditor/#start-toolbar
2.上傳的檔案&圖片沒有按照phpcms的命名規則,如果需要修改ueditor/php/config.json
檔案:
上傳圖片、抓取遠端圖片 、上傳視訊,為/uploadfile/{yyyy}/{mm}{dd}/{yyyy}{mm}{dd}{rand:6}
,
不過本人喜歡按月份建立目錄,如下:上傳圖片配置項 imagePathFormat: /uploadfile/{yyyy}{mm}/{yyyy}{mm}{dd}{rand:4}
,同時修改/phpcms/libs/classes/attachment.class.php
檔案,第47行左右的縮圖和多圖片上傳路徑設定為$this->savepath = $this->upload_root.$this->upload_dir.date('Ym/');
列出指定目錄下的圖片 imageManagerListPath ,/uploadfile/
列出指定目錄下的檔案 fileManagerListPath ,/uploadfile/file/
3.phpcms自帶的ckeditor
是上傳附件的時候是操作資料庫的,所以後臺附件管理有資料庫模式,而咱沒有寫相關程式碼,所以如果需要管理附件只能用目錄模式進行刪除,這種情況下也就不需要注意路徑問題了
4、如果需要修改編輯器裡內容的樣式,需要修改ueditor/themes/iframe.css
檔案。