POST TIME:2017-11-13 00:46
以下是內(nèi)容提要:
一、下載Ueditor 1.2.3.0 php utf-8 版本(以下簡稱UE)
三、修改 include/inc/inc_fun_funAdmin.php 讓 DD 能夠調(diào)用到 UE
四、修改 include/ueditor/editor_config.js
五、修改圖片上傳
六、修改涂鴉
七、修改附件上傳
八、修改圖片搜索
九、修改圖片在線管理
以下是內(nèi)容正文:
一、下載UE
最新版本是 1.2.3.0 ,請(qǐng)自己下載PHP版本(本人是PHP版本 UFT-8版)。下載完成后,會(huì)得到以下這樣的目錄結(jié)構(gòu)的
UE文件說明:
_examples 是存放示例的文件夾
_src 存放是各功能未壓縮的JS源碼
dialogs 是存放各個(gè)彈出窗口應(yīng)用功能的文件,包含html,js
lang 是存放編輯器語言的文件,有中文和E文
php 是存放文件上傳、涂鴉、遠(yuǎn)程圖片、在線圖片管理,添加視頻的php源碼文件,可以按自己的需求修改
themes 當(dāng)然就是主題樣式圖片存放的地方
third-party 是第三方插件文件存放地方。
editor_ajj.js 此文件是所有_src里的js源碼的合集
editor_all_min.js 此文件是editor_all.js的壓縮版
editor_config.js 此文件是UE的配置文件
二、復(fù)制UE到DD
UE除了_example以及_src之外,其它的文件全部復(fù)制到DD的include文件夾下!完成后UE在DD里邊的結(jié)構(gòu)如下圖:
三、修改 include/inc/inc_fun_funAdmin.php 讓 DD 能夠調(diào)用到 UE
打開 include/inc/inc_fun_funAdmin.php ,大約150行,有個(gè)function SpGetEditor,這是DD調(diào)用編輯器的,我們要修改它,達(dá)到能夠調(diào)用UE,下拉到226行左右,加上以下代碼:
else if($GLOBALS['cfg_html_editor']=='ueditor')
{
$fvalue = $fvalue=='' ? '<p></p>' : $fvalue;
$code = '<script type="text/javascript" charset="utf-8" src="'.$GLOBALS['cfg_cmspath'].'/include/ueditor/editor_config.js"></script>
<script type="text/javascript" charset="utf-8" src="'.$GLOBALS['cfg_cmspath'].'/include/ueditor/editor_all_min.js"></script>
<link rel="stylesheet" type="text/css" href="'.$GLOBALS['cfg_cmspath'].'/include/ueditor/themes/default/ueditor.css"/>
<textarea name="'.$fname.'" id="'.$fname.'" style="width:100%;">'.$fvalue.'</textarea>
<script type="text/javascript">var ue = new baidu.editor.ui.Editor();ue.render("'.$fname.'");</script>';
if($gtype=="print")
{
echo $code;
}
else
{
return $code;
}
}
復(fù)制代碼
如下圖:
四、修改 include/ueditor/editor_config.js
修改了28、147行,就后臺(tái)就可以直接使用UE了!
除了28、147行,其它的地方,影響與它功能結(jié)合的php返回給編輯器的路徑。
28行:URL = ‘/include/ueditor/’ 配置UE在DD里的路徑
45行:,imagePath:"/" 圖片上傳
52行:,scrawlPath:"/" 涂鴉
56行:,filePath:"/" 附件上傳
62行:,catcherPath:"/" 遠(yuǎn)程圖片
69行:,imageManagerPath:"/" 在線圖片管理
147行:,allHtmlEnabled:false 此處去掉注釋,影響保存內(nèi)容時(shí)是否包含多余的HTML
五、結(jié)合第四步,45行,修改圖片上傳路徑
修改 include/ueditor/php/imageUp.php
首先,修改上傳路徑,路徑為DD根目錄下的upload,這個(gè)看個(gè)人需要,然后要判定目錄是否存在,不存在則自動(dòng)創(chuàng)建,最后為上傳目錄,加一級(jí)images,存放圖片就在images下!此處不用再自動(dòng)創(chuàng)建,這個(gè)工作留給公共上傳類Uploader.class.php
然后,修改 include/ueditor/php/Uploader.class.php 最后邊的那個(gè)function,讓上傳的圖片,按日期文件夾保存:
按個(gè)人需要,上圖187行,可以刪除。先判斷存放路徑最后是否有斜杠,有的話,就刪除,因?yàn)楹筮吋由狭巳掌谟眯备芊指?,如?../../../upload/images/Y/m/d,所以,不要讓多余斜杠存在!
最后,修改 include/ueditor/php/imageUp.php 最后一行,讓程序返回給編輯器的圖片路徑正確:
echo "{'url':'" . str_replace('../','',$info[ "url" ]) . "','title':'" . $title . "','original':'" . $info["originalName"] . "','state':'" . $info["state"] . "'}";//去掉路徑里的 ../
復(fù)制代碼
把 ../ 這字符串全部清除,清除后變成了: upload/images/Y/m/d/圖片.jpg,若直接給這串路徑到編輯器、頁面,肯定是錯(cuò)的,這時(shí),就是配合第四步的45行 imagePath : ‘/’來達(dá)到完整的路徑: /upload/images/Y/m/d/圖片.jpg
到些,圖片上傳修改成功,記住 Uploader.class.php 處的修改,因?yàn)楦郊蟼鞯葢?yīng)用到它的時(shí)候,就不用修改了!
六、配合第四步,52行,修改來實(shí)現(xiàn)涂鴉的圖片保存!include/ueditor/php/scrawUp.php
同樣,把涂鴉放在upload下,因?yàn)槭峭盔f,我把它分到upload/scraw文件夾,用笨方法,一個(gè)個(gè)文件夾建立。
然后修改 Uploader.class.php(此處在圖片上傳處修改過了,按 Y/m/d 存放)。同樣,最后修改 scrawUp.php 的返回路徑:
$info = $up->getFileInfo();
echo "{'url':'" . str_replace('../','',$info[ "url" ]) . "',state:'" . $info[ "state" ] . "'}";//修改這一行,去掉路徑里的 ../
復(fù)制代碼
七、配合第四步的56行,修改附件上傳路徑(同圖片上傳)include/ueditor/php/fileUp.php
然后修改 Uploader.class.php(此處已經(jīng)在圖片上傳處修改過了,按 Y/m/d 存放)。同樣,最后修改 fileUp.php 的返回路徑:
echo '{"url":"' .str_replace('../','',$info[ "url" ]) . '","fileType":"' . $info[ "type" ] . '","original":"' . $info[ "originalName" ] . '","state":"' . $info["state"] . '"}';//也就是去掉路徑里的 ../
復(fù)制代碼
八、配合第四步的62行,修改圖片搜索得到的圖片保存路徑 include/ueditor/php/getRemoteImage.php
首先,修改配置
//遠(yuǎn)程抓取圖片配置
$config = array(
"savePath" => "../../../upload/images" , //保存路徑
"allowFiles" => array( ".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp" ) , //文件允許格式
"maxSize" => 3000 //文件大小限制,單位KB
);
復(fù)制代碼
然后,修改保存路徑,這里會(huì)自動(dòng)創(chuàng)建文件夾 ../../../upload/images/Y/m/d
//創(chuàng)建保存位置
$savePath = $config[ 'savePath' ];
$dirpath = explode('/',$savePath.date('/Y/m/d'));//通過斜杠分割
$savePath = '';
for($i=0;$i<count($dirpath);$i++)
{
if($i != count($dirpath))
{
$savePath .= $dirpath[$i].'/';
}
if(!file_exists($savePath))
{
if(!mkdir($savePath,0777,true))return false;
}
}
復(fù)制代碼
最后,修改返回的圖片路徑(路徑一直配合上傳路徑(因?yàn)槭窍鄬?duì)路徑)應(yīng)用這方法,我還是說了很多次),最后一行,echo的地方,改成:
echo "{'url':'" . implode( "ue_separate_ue" , str_replace('../','',$tmpNames) ) . "','tip':'遠(yuǎn)程圖片抓取成功!','srcUrl':'" . str_replace('../','',$uri) . "'}";//此處不解析了
復(fù)制代碼
九、配合第四步的69行,修改圖片在線管理文件夾,以及返回的圖片路徑
修改文件:include/ueditor/php/imageManager.php
10行:$path = '../../../upload/images'; 改成我們上傳的圖片文件夾
45行:return str_replace('../','',$files); 修改返回的圖片路徑
到此,已經(jīng)完成了DD和UE的整合,并修了圖片附件上傳的路徑。
最后,說明一點(diǎn),在DD的欄目內(nèi)容處,把編輯器換回ckeditor,因?yàn)閁E在此處應(yīng)用時(shí),欄目內(nèi)容無法修改,甚至?xí)磺蹇?!修改方法:dede/templets/album_add.htm 和 dede/templets/album_edit.htm,兩個(gè)文件都要修改,找到載入編輯器的地方,改成類似如下圖:
即,加多一行 $GLOBALS['cfg_html_editor']='ckeditor'; 讓編輯器在欄目內(nèi)容處,換回ckeditor!