ECSHOP安裝百度編輯UEditor教程

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

 

先看效果圖：

 

1、到百度編輯器ueditor官網下載最新版，將文件夾改名為“ueditor”，上傳到 /includes/ 目錄下

（也可以下載制作好的ueditor1_4_3_3-utf8-php版） 點擊下載

 

 

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

 

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

/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"}