ecshop微信商城
  官方微博: 騰訊  
首頁 > ECSHOP教程 > ECSHOP二次開發 > ECSHOP二次開發教程 > ECSHOP安裝百度編輯UEditor教程

ECSHOP安裝百度編輯UEditor教程

ECSHOP教程 / ecshop 教程網(www.nrkidn.live) 2015-09-08

ECSHOP系統自帶的編輯器大家用過都知道,難用不說,還不能批量上傳圖片。很多朋友都喜歡百度編輯器,因為百度編輯器功能強大,使用方便,而且不會生成太多多余代碼。

網上有許多ECSHOP整合百度編輯器的教程,但大多都有一些問題。

ECSHOP模板屋提供一個比較完整的教程。


先看效果圖:


教程開始:

第一步:

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

(也可以在本教程底部下載制作好的ueditor1.4.3版)

第二步:

打開這兩個文件,一個是商品編輯,一個是文章編輯

/admin/templates/goods_info.htm

/admin/templates/article_info.htm


查找:

1
{$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后臺編輯器其實已經可以正常使用了,只是進入商品列表、分類等等,會報錯的,提示缺少Ajax:




下面接著提供解決方法

第三步:解決后臺js沖突

打開 /admin/templates/pageheader.htm

在頭部找到:

1
{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"}


這樣就可以了。

注意,不要忘記了引用的JQ文件。。


下載包中已經包含有的


插件下載:http://www.nrkidn.live/moban-571.html



轉載請注明:ECshop119模板屋-ECshop教程網(全國最專業的ECSHOP插件制作商-專業ECSHOP二次開發)

幫助目錄

在線反饋

加ECSHOP模板屋微信語音幫助。

ecshop微信群

與網友交流ECSHOP開發修改。

加入QQ群交流