ECSHOP安裝百度編輯UEditor教程

ECSHOP系統自帶的編輯器你們用過都知道，難用不說，還不能批量上傳圖片。不少朋友都喜歡百度編輯器，由於百度編輯器功能強大，使用方便，並且不會生成太多多餘代碼。
網上有許多ECSHOP整合百度編輯器的教程，但大多都有一些問題。
ECSHOP模板屋提供一個比較完整的教程。

 

先看效果圖：

 

一、到百度編輯器ueditor官網下載最新版，將文件夾更名爲「ueditor」，上傳到 /includes/ 目錄下

（也能夠下載製做好的ueditor1_4_3_3-utf8-php版） 點擊下載

 

 

百度編輯器ueditor官方地址：http://ueditor.baidu.com/website/download.html

 

二、打開這兩個文件，一個是商品編輯，一個是文章編輯

/admin/templates/goods_info.htm
/admin/templates/article_info.htm

 

查找代碼：

{$FCKeditor}

 

替換成如下代碼

<script type="text/javascript" charset="utf-8" src="../includes/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="../includes/ueditor/ueditor.all.min.js"> </script>
<!--建議手動加在語言，避免在ie下有時由於加載語言失敗致使編輯器加載失敗-->
<!--這裏加載的語言文件會覆蓋你在配置項目裏添加的語言類型，好比你在配置項目裏配置的是英文，這裏加載的中文，那最後就是中文-->
<script type="text/javascript" charset="utf-8" src="../includes/ueditor/lang/zh-cn/zh-cn.js"></script>
<style type="text/css">
.clear {
clear: both;
}
</style>
<textarea id="goods_desc" name="goods_desc" style="width:100%;height:500px;"> {$goods.goods_desc}</textarea>
<script type="text/javascript">
delete(Object.prototype.toJSONString);
UE.getEditor('goods_desc')
</script>

 

兩個文件都這樣修改。

 

注意這行代碼：

<textarea id="goods_desc" name="goods_desc" style="width:100%;height:500px;"> {$goods.goods_desc}</textarea>

width和height分別是指編輯器的大小，可是IE內核的瀏覽器，有可能不支持寫成px，因此編輯器的大小可能有些不完美，這是跟CSS有關，這個能夠自行解決。

 

 

這個時候，其實ECSHOP後臺編輯器其實已經能夠正常使用了

 

這個時候上傳會發現，上傳到網站的圖片目錄跟原來的不同。

 

在上傳的文件夾 ueditor 下找到文件 ueditor\php\config.json 文件打開

 

打開這個文件，按裏面的說明修改你的上傳文件路徑。參考官方上傳路徑說明：http://fex-team.github.io/ueditor/#server-path

 

 

若是進入，商品列表、分類等等，出現報錯，提示缺乏Ajax，如圖這樣：

 

 

 

下面接着提供解決方法

 

第三步：解決後臺js衝突

打開 /admin/templates/pageheader.htm

在頭部找到代碼：

{insert_scripts files="../js/transport.js,common.js,../js/utils.js"}

替換成代碼：

<script type="text/javascript" src="../includes/ueditor/fix_jquery/jquery.min.js" rel="stylesheet" /></script>
<script type="text/javascript" src="../includes/ueditor/fix_jquery/jquery.json-1.3.js" rel="stylesheet" /></script>
<script type="text/javascript" src="js/common.js" rel="stylesheet" /></script>
<script type="text/javascript" src="../includes/ueditor/fix_jquery/transport_json.js" rel="stylesheet" /></script>
{insert_scripts files="../js/utils.js"}