由于Ueditor編輯器的圖片上傳后恩沽,默認(rèn)存儲位置是在www根目錄下低滩,而不是在網(wǎng)站項目目錄下刁憋,因此需要重新配置。由于網(wǎng)站項目名有多個县耽,因此需要動態(tài)與存儲地址進(jìn)行拼接。(等不及的可以直接拉到最后看總結(jié)的步驟)
config.json
修改上傳保存路徑(自定義路徑)
"imagePathFormat": "/Public/Home/ueditor/attached/image/{yyyy}{mm}{dd}/{time}{rand:6}",
Uploader.class.php
private function getFilePath()
? ? {
? ? ? ? $fullname = $this->fullName;
? ? ? ? $rootPath = $_SERVER['DOCUMENT_ROOT'];
????????$filePath=$_SERVER['PHP_SELF'];
????????$arr=explode("/", $filePath);
????????$serverName=$arr[1]; //得到項目名稱
? ? ? ? if (substr($fullname, 0, 1) != '/') {
? ? ? ? ? ? $fullname = '/' . $fullname;
? ? ? ? }
? ? ? ? //echo $rootPath . '/'.$serverName.$fullname; exit;
? ? ? ? return $rootPath . '/'.$serverName.$fullname;
? ?}
可以輸出最終return的結(jié)果查看(取消echo那一行注釋代碼在network中可查看) 為:本地圖片地址
D:/phpStudy/WWW/yk/Public/Home/ueditor/attached/image/20180613/1528881946312238.jpg
yk是動態(tài)的項目名稱镣典,此結(jié)果得到的是動態(tài)的圖片地址兔毙。即使更換其他項目名稱也沒關(guān)系。
但是編輯器中兄春,圖片顯示路徑有問題澎剥,后臺返回的圖片地址并沒有帶上項目名稱yk,因此無法顯示赶舆。
如果項目名稱是唯一的哑姚,當(dāng)然可以通過設(shè)置
config.json
"imageUrlPrefix": "/項目名",
來讓圖片顯示出來祭饭。但是開始的問題就是項目名稱并不是唯一的。因此不能在這里將imageUrlPrefix設(shè)置死叙量。
解決辦法:
config.json
"imageUrlPrefix": "",
這一行保持空倡蝙,不要動。
controller.php
$filePath=$_SERVER['PHP_SELF'];
$arr=explode("/", $filePath);
$serverName=$arr[1];? ?//得到項目名
switch ($action) {
????case 'config':
????????if(isset($CONFIG["imageUrlPrefix"])){
????????????$CONFIG["imageUrlPrefix"]="/".$serverName;? ?//動態(tài)設(shè)置imageUrlPrefix
????????}
????????$result = json_encode($CONFIG);
????????break;
............
思路:將項目名稱動態(tài)的加到返回到編輯器中的url中绞佩。即動態(tài)設(shè)置imageUrlPrefix的值寺鸥。
視頻上傳:
config.json? 視頻保存路徑修改成自己需要的
"videoPathFormat": "/Public/Home/ueditor/attached/video/{yyyy}{mm}{dd}/{time}{rand:6}",
Uploader.class.php,此修改和圖片是一樣的品山,都是動態(tài)加載存儲的項目名
private function getFilePath() {
????$fullname = $this->fullName;
????$rootPath = $_SERVER['DOCUMENT_ROOT'];
? ? $filePath=$_SERVER['PHP_SELF'];
? ? $arr=explode("/", $filePath);
? ? $serverName=$arr[1];
????if (substr($fullname, 0, 1) != '/') {
????????$fullname = '/' . $fullname;
????}
????return $rootPath . '/'.$serverName.$fullname;
}
controller.php
$filePath=$_SERVER['PHP_SELF'];
$arr=explode("/", $filePath);
$serverName=$arr[1];
switch ($action) {
? case 'config':
? ? if(isset($CONFIG["imageUrlPrefix"])){? ? //圖片訪問路徑前綴
? ? ? $CONFIG["imageUrlPrefix"]="/".$serverName;
? ? }
? ? if(isset($CONFIG["videoUrlPrefix"])){???//視頻訪問路徑前綴
? ? ? $CONFIG["videoUrlPrefix"]="/".$serverName;
? ? }
? $result = json_encode($CONFIG);
? break;
......
以下ueditor.all.js的配置可以讓視頻在編輯器中能夠播放胆建,但是提交到數(shù)據(jù)庫的時候會存在一些問題,即內(nèi)容僅為視頻時ue.getContent()獲取到的編輯器中的內(nèi)容為空肘交,只有當(dāng)輸入其他字符時笆载,ue.getContent()才能獲取到編輯器中的內(nèi)容。因此不推薦修改下面ueditor.all.js中的內(nèi)容涯呻。
ueditor.all.js
7343,7344,7345三行注釋掉
// var root = UE.htmlparser(html);
// me.filterInputRule(root);
// html = root.toHtml();
17769行? image改成video
// html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'image'));
html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'video'));
其實出現(xiàn)上傳視頻后在編輯器中一片空白的情況宰译,查看HTML源碼src丟失,可將
ueditor.config.js? 第365行??whitList修改為whiteList
修改后編輯器中上傳視頻的效果
這樣改了之后魄懂,編輯器中的視頻內(nèi)容是可以通過ue.getContent()獲取到的沿侈。
總結(jié):
路徑配置:
①在config.json中配置上傳圖片或視頻的保存路徑,不帶項目名稱的市栗。
"imagePathFormat": "/Public/Home/ueditor/attached/image/{yyyy}{mm}{dd}/{time}{rand:6}",? //圖片
"scrawlPathFormat": "/Public/Home/ueditor/attached/image/{yyyy}{mm}{dd}/{time}{rand:6}",? //視頻
"videoPathFormat": "/Public/Home/ueditor/attached/video/{yyyy}{mm}{dd}/{time}{rand:6}",? //涂鴉
②在Uploader.class.php中缀拭,修改文件的完整路徑,主要是動態(tài)添加項目名稱填帽。
private function getFilePath() {????
????$fullname = $this->fullName;????
????$rootPath = $_SERVER['DOCUMENT_ROOT'];????
? ? $filePath=$_SERVER['PHP_SELF'];
? ? $arr=explode("/", $filePath);
? ? $serverName=$arr[1];? ?//得到項目名
????if (substr($fullname, 0, 1) != '/') {????????
????????$fullname = '/' . $fullname;????
????}????
????return $rootPath . '/'.$serverName.$fullname;
}
③在controller.php中蛛淋,動態(tài)設(shè)置圖片或視頻的訪問路徑前綴。
$filePath=$_SERVER['PHP_SELF'];
$arr=explode("/", $filePath);
$serverName=$arr[1];? ?//得到項目名
switch ($action) {
case 'config':
if(isset($CONFIG["imageUrlPrefix"])){ $CONFIG["imageUrlPrefix"]="/".$serverName; }?//圖片 if(isset($CONFIG["videoUrlPrefix"])){ $CONFIG["videoUrlPrefix"]="/".$serverName; }?//視頻 if(isset($CONFIG["scrawlUrlPrefix"])){ $CONFIG["scrawlUrlPrefix"]="/".$serverName; }?//涂鴉
$result = json_encode($CONFIG);
break;
......
④修改ueditor.config.js
第365行??whitList 修改為 whiteList
以上就是全部步驟篡腌。如果還有其他更好方法褐荷,歡迎一起分享。
前端HTML引用請查看官方示例吧(或查看我寫的簡單示例)嘹悼。
ps:關(guān)于視頻音頻上傳還可以參考這個帖子叛甫,有興趣的可以試驗下。
以下是我參考的一些資料:
http://ueditor.baidu.com/website/document.html
http://fex.baidu.com/ueditor/#start-config
圖片上傳路徑配置參考:http://www.cnblogs.com/liugx/p/6907584.html
視頻上傳配置參考:https://blog.csdn.net/eadela/article/details/76264168