DEDE更換Ueditor修正欄目內容、單頁無法保存、圖片加水印等問題

轉載 jingccj  2019-08-13 12:54:44  閱讀 807 次 評論 0 條

    dede使用Ueditor1.4.3.3 并修正單頁欄目編輯器欄目內容、單頁無法保存、圖片加水印、圖片附件保存目錄、分頁標簽改變、遠程圖片自動本地化關閉,修改默認分頁符,關閉HTML代碼自動轉義,回顯HTM標簽被過濾,開啟代碼高亮等一系列問題,經過這里整個教程的修改,ueditor就能完美的兼容dedecms織夢系統。
使用過DedeCMS的人應該都能感覺到自帶的可視化編輯器不好用。Dede在5.6版之前用的編輯器是FCKEditor,5.7之后改成了ckeditor,這兩個編輯器其實是差不多的。存在很多問題,比如用這個編輯器粘貼從Word復制過來的文字時,會產生大量的垃圾代碼,不利于排版也不美觀。

今天介紹一下如何將Dede默認的編輯器換成百度的Ueditor編輯器。

Ueditor是由百度web前端研發部開發的所見即所得富文本Web編輯器,具有輕量,可定制,注重用戶體驗等特點,開源基于BSD協議,允許自由使用。目前已經成功部署在百度百科,百度新知,百度空間等產品上。其他非百度產品也有使用,如金山聯盟,巨人網絡,博客中國等。

在DedeCMS中使用UEditor的方法如下:
首先第一步:安裝

    到百度的官網下載http://ueditor.baidu.com/website/download.html#ueditor 目前最新版是1.4.3.3 PHP版,然后根據你DEDE的語言版本選擇UTF-8還是GB2312
下載下來,然后修改文件夾名稱為“ueditor”,刪除掉里面沒用的index.html后上傳到include目錄下。

溫馨提示:在安裝前,最好備份下所要修改的文件。

打開include下的inc文件夾內的inc_func_funcAdmin.PHP找到112行,

    if($GLOBALS['cfg_html_editor']=='fck')

替換為以下代碼。


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/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="'.$GLOBALS['cfg_cmspath'].'/include/ueditor/ueditor.all.js"></script>
<link rel="stylesheet" type="text/css" href="'.$GLOBALS['cfg_cmspath'].'/include/ueditor/themes/default/css/ueditor.css"/>
<textarea name="'.$fname.'" id="'.$fname.'" style="width:100%;">'.$fvalue.'</textarea>
<script type="text/javascript"> var ue = UE.getEditor("'.$fname.'");</script>';
if($gtype=="print")
{
echo $code;
}
else
{
return $code;
}
}elseif
($GLOBALS['cfg_html_editor']=='fck')


修改配置

    進入網站后臺-->系統-->系統基本參數-->核心設置-->將Html編輯器的值改為 ueditor ,然后保存。到了這一步,網上會說恭喜你,文本編輯器已經替換成功。其實還有很多兼容性要修改,看如下:


第二步:修改必要設置


1、修改ueditor上傳文件的路徑,存放目錄

    include\ueditor\php\config.json

    里面的

    /ueditor/php/upload/image/

    /ueditor/php/upload/video/

    /ueditor/php/upload/file/

    修改成自己的,如:

    /uploads/allimg/

    /uploads/media/

    /uploads/soft/

    另外如果要將圖片默認保存路徑改成和DEDE一致也就是yymmdd格式170721這樣的,那還是得修改這個文件將里面的{yyyy}改成{yy}


另外如果需要將UEDITOR上傳的文件路徑變成絕對路徑,也就是帶你完整域名信息的鏈接(方便在子目錄綁定二級域名情況下使用),還得修改config.json這個文件,所在目錄為ueditor/php/config.json,用DW或者其他編輯器打開修改。

    在第11行:

"imageUrlPrefix": " ", /* 圖片訪問路徑前綴 */

這段代碼就是設置上傳圖片路徑前綴,默認為空則生成的圖片就是相對路徑,我們改為:

"imageUrlPrefix": "http://www.joutvc.tw", /* 圖片訪問路徑前綴 */

自行把域名換為自己的即可。
這樣就能實現用Ueditor編輯器上傳圖片路徑為絕對路徑,細心的朋友可能還會發現此處還有一個bug,生成的絕對路徑中,域名后面有兩個"/",變成http://www.joutvc.tw//upload/allimg/..這種樣式,雖然也能正確獲取到圖片,但是不規范,我們繼續做以下修改:
把第12行中的上傳保存路徑前面的第一個“/”去掉,像下面這樣:

"imagePathFormat": "ueditor/image/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */

這樣一來就完美實現了Ueditor編輯器上傳圖片路徑為絕對路徑。


2、dedecms織夢更換ueditor后欄目內容、單頁無法保存問題的解決方法

    打開(下面的dede是你的后臺目錄)


dedeCMS欄目(欄目內容)

    dede/templets/catalog_add.htm

    dede/templets/catalog_edit.htm

把里面的 form 放置到
<td height="95" align="center" bgcolor="#FFFFFF">
內,就可以了。

用fireforx看源碼可以發現有紅色<form>標簽錯誤,原來是這里導致ueditor 無法提交表單的值所致!!如圖:

    .

    所以只要把form標記移動到td內部,firefox看源碼就正常了。

    .


dedeCMS單頁(單頁文檔

    dede/templets/templets_one_add.htm

    dede/templets/templets_one_edit.htm


templets_one_add.htm修改前:



這里我們需要把form開頭部分放在上面的td下面,修改后為:




    結果測試欄目內容和單頁欄目已可提交數據。其他頁面也無法提交數據也做同樣處理即可!!

    另外針對這個問題還有種修改方法,就是將欄目內容頁和單頁的默認編輯器設置回使用原來的CKEDITOR

    dedeCMS單頁(單頁文檔)


      dede/templets/templets_one_add.htm

      dede/templets/templets_one_edit.htm


      在GetEditor上面加一行代碼,如下:


      $GLOBALS['cfg_html_editor']='ckeditor';


      即還原默認編輯器:ckeditor


      dedeCMS欄目(欄目內容),修改:


      dede/templets/catalog_add.htm

      dede/templets/catalog_edit.htm


      跟欄目文檔修改方法相同。

    3、本地上傳圖片添加水印的解決方法

    打開 \include\ueditor\php\action_upload.php 找到

    include "Uploader.class.php";

    在它下面加入

    require_once("../../common.inc.php");
require_once("../../image.func.php");

    再打開 \include\ueditor\php\Uploader.class.php 找到

    $this->stateInfo = $this->stateMap[0]; 大概在124行左右

    在它下面加入

    @WaterImg($this->filePath, 'down');

    完成,這樣上傳本地圖片和批量上傳圖片就自動加水印了。


4、百度編輯器默認分頁符ueditor_page_break_tag替換成

百度默認點擊分頁功能按鈕插入的分頁符是ueditor_page_break_tag,DEDE是不認這個分頁符的,DEDE的分頁符是,因此需要修改
修改涉及到兩個文件ueditor.all.js和ueditor.all.min.js,如果沒有調用min文件,可以不修改。

打開/include/ueditor/ueditor.all.js,找到
me.setOpt('pageBreakTag','_ueditor_page_break_tag_');
把_ueditor_page_break_tag_替換成,經過測試過沒有問題.

另外還有一個辦法,修改ueditor根木下的ueditor.config.js
查找
//,pageBreakTag:'_ueditor_page_break_tag_'
改成
,pageBreakTag:''




5、關閉ueditor的圖片本地化功能
ueditor的圖片本地化功能與DEDE自帶的重復,會造成重復下載,因此只能選擇其一,這里選擇將ueditor自帶的圖片本地化功能關閉
需要修改ueditor.config.js,這個文件在ueditor的根目錄下,
查找
//,catchRemoteImageEnable: true //設置是否抓取遠程圖片

改成

,catchRemoteImageEnable: false //設置是否抓取遠程圖片

    極個別情況下,這個參數可能不起作用,那就需要修改\include\ueditor\php\config.json

    將里面的"catcherMaxSize":值改成非常小的數

    比如我們是這樣設置"catcherMaxSize": 2, /* 上傳大小限制,單位B */


6、關閉HTML代碼自動替換功能,HTML自動轉義功能關閉方法,

    如果你的網站不是類似我們這樣需要分享源代碼的站長類的網站,這個功能無須關閉,關閉可能有安全隱患,不建議關閉。我們下面提供的下載未關閉這個功能

    首先是ueditor.config.js配置文件中

    //,allowDivTransToP:true //允許進入編輯器的div標簽自動變成p標簽

    這里改成

    allowDivTransToP:false //允許進入編輯器的div標簽自動變成p標簽


    然后打開ueditor.all.js

    搜索allowDivTransToP,找到如下的代碼,將true設置為false
me.setOpt('allowDivTransToP',false);

    查找

    case 'style':
case 'script':
node.setAttr({
cdata_tag: node.tagName,
cdata_data: (node.innerHTML() || ''),
'_ue_custom_node_':'true'
});
node.tagName = 'div';
node.innerHTML('');
break;

    全部刪除


    還有一個一勞永逸的辦法ueditor.all.js定位代碼大概9948行可搜索UE.plugins['defaultfilter'] 直接添加return

    UE.plugins['defaultfilter'] = function () {
return; //在這里添加return,不執行下面的格式化
var me = this;
me.setOpt({
'allowDivTransToP':false,
'disabledTableInTable':true

    ueditor.all.min.js定位代碼(可搜索【defaultfilter】定位,大概157行)

    直接返回return

    UE.plugins.defaultfilter=
function(){return;var d=this;d.setOpt({allowDivTransToP:!0,d


7、回顯HTML標簽過濾問題

    跟上面第6條一樣,這個不是必須的,只有源碼類網站才需要,可能會遇到保存好的帶html代碼的文章再次編輯時,出現html標簽被過濾的情況

    根據ueditor官方描述:http://ueditor.baidu.com/website/helper.html 第10條,引用編輯器的內容框是采用的textare標簽,解決辦法就是替換為script標簽。

    在開篇第一步,修改inc_fun_funAdmin.php 文件,所添加的代碼第16行:

    <textareaname="'.$fname.'"id="'.$fname.'"style="width:100%;">'.$fvalue.'</textarea>

    將textarea標簽替換為script標簽即可,即:

    <scriptname="'.$fname.'"id="'.$fname.'"style="width:100%;">'.$fvalue.'</script>

    這樣,就可以完美解決標簽過濾問題。同樣這一步,我們沒更新到下載文件中


8、代碼高亮功能

    對于在網站中出現代碼的情況,希望前臺頁面代碼顯示高亮,只需要在內容頁模板頁頭添加JS代碼:

    <linkhref="/織夢CMS目錄/include/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css"rel="stylesheet"type="text/css"/>

    <scripttype="text/javascript"src="/織夢CMS目錄/include/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>



    頁尾引用語句:

    <scripttype="text/javascript">SyntaxHighlighter.all();</script>



代碼高亮換行問題

    代碼高亮之后,在前臺并沒有出現自動換行的功能,可以使用強制換行代碼。在shCoreDefault.css文件搜索如下代碼,紅色文字為需要添加的內容。


    .syntaxhighlighter{width:100%!important;margin:.3em0.3em0!important;position:relative!important;overflow:auto!important;background-color:#f5f5f5!important;border:1pxsolid#ccc!important;border-radius:4px!important;border-collapse:separate!important;

    word-wrap:break-word;

    }



    而shCoreDefault.css文件在目錄/織夢CMS目錄/include/ueditor/third-party/SyntaxHighlighter/ 下。

    至此,前臺就可以顯示如本文效果的 代碼高亮。這一步同樣跟前面一樣只適合源碼站


    注意:如果你修改過這些配置的JS,卻發現在瀏覽器中操作,沒有任何變化,甚至整個UEDITOR的編輯框都消失,或者報錯類似undefinedlang/zh-cn/zh-cn.js Failed to load resource: the server responded with a status of 404 (Not Found) 主要是CHROME類的核心瀏覽器緩存了ueditor的JS文件了,只需要在瀏覽器中輸入https://你的域名/include/ueditor/ueditor.config.js 刷新幾次直到看到你的修改變化出現,就行了



    提供一份我們修改后的1.4.3.3版本DEDE能用的,直接上傳覆蓋就行

    下載文件包

本文地址:http://www.joutvc.tw/post/2009.html
溫馨提示:文章內容系作者個人觀點,不代表電腦樂園對觀點贊同或支持。
版權聲明:本文為轉載文章,來源于 jingccj ,版權歸原作者所有,歡迎分享本文,轉載請保留出處!

發表評論


表情

還沒有留言,還不快點搶沙發?