我是如何一步步編碼完成萬倉網ERP系統的（六）產品庫設計 2.百度Ueditor編輯器

　　https://www.cnblogs.com/smh188/p/11533668.html（我是如何一步步編碼完成萬倉網ERP系統的（一）系統架構）

　　https://www.cnblogs.com/smh188/p/11534451.html（我是如何一步步編碼完成萬倉網ERP系統的（二）前端框架）

　　https://www.cnblogs.com/smh188/p/11535449.html（我是如何一步步編碼完成萬倉網ERP系統的（三）登陸）

　　https://www.cnblogs.com/smh188/p/11541033.html（我是如何一步步編碼完成萬倉網ERP系統的（四）登陸的具體實現）

　　https://www.cnblogs.com/smh188/p/11542310.html（我是如何一步步編碼完成萬倉網ERP系統的（五）產品庫設計 1.產品類別）

　　https://www.cnblogs.com/smh188/p/11546917.html（我是如何一步步編碼完成萬倉網ERP系統的（六）產品庫設計 2.百度Ueditor編輯器）

　　https://www.cnblogs.com/smh188/p/11572668.html（我是如何一步步編碼完成萬倉網ERP系統的（七）產品庫設計 3.品牌圖片跨域上傳）

　　https://www.cnblogs.com/smh188/p/11576543.html（我是如何一步步編碼完成萬倉網ERP系統的（八）產品庫設計 4.品牌類別）

　　https://www.cnblogs.com/smh188/p/11578185.html（我是如何一步步編碼完成萬倉網ERP系統的（九）產品庫設計 5.產品屬性項） 

　　https://www.cnblogs.com/smh188/p/11589264.html（我是如何一步步編碼完成萬倉網ERP系統的（十）產品庫設計 6.屬性項和類別關聯） 

　　https://www.cnblogs.com/smh188/p/11596459.html（我是如何一步步編碼完成萬倉網ERP系統的（十一）產品庫設計 7.發佈商品） 

　　https://www.cnblogs.com/smh188/p/11610960.html（我是如何一步步編碼完成萬倉網ERP系統的（十二）庫存 1.概述） 

　　https://www.cnblogs.com/smh188/p/11669871.html（我是如何一步步編碼完成萬倉網ERP系統的（十三）庫存 2.加權平均價） 

　　https://www.cnblogs.com/smh188/p/11763319.html（我是如何一步步編碼完成萬倉網ERP系統的（十四）庫存 3.庫存日誌） 

　　萬倉網ERP系統不開源，準備作一個系列，講一講主要的技術點，這些技術點會有源代碼。若是想看全部的源代碼，能夠打道回府了，不必再閱讀下去了，浪費您寶貴的時間。

　　上一篇我們講到了產品類別，通常分爲三級類別就夠了，若是分的過多，前端頁面很差展現，也會形成管理的混亂。這一節說點跟產品庫相關的技術點，Html編輯器。

　　如今有不少好用的開源編輯器，孰優孰劣不在本文的探討範圍以內，萬倉網產品庫用的編輯器就是百度的Ueditor，今天我們就說說Ueditor編輯器。

　　若是是小型網站，能夠直接把Ueditor放在後臺網站的目錄下，並將net文件夾轉換爲應用程序，加上一些簡單配置就可使用了。

　　若是是大型網站呢，須要將後臺系統和Ueditor編輯器單獨部署在不一樣的服務器上（作測試時能夠在一臺服務器上，但ueditor編輯器須要有單獨的站點域名），主要是考慮到用ueditor上傳的圖片（文件）需在圖片服務器上。

　　接下來我們就一步步修改代碼和配置，完成ueditor編輯器的跨域上傳。

　　1.修改ueditor編輯器的ueditor.all.js（ueditor.all.min.js）

　　　將 document.domain="xxx.com";(例如：document.domain = 'vancang.com') 添加在第8行。因爲ueditor和後臺系統使用的是不一樣的域名，上傳文件涉及到跨域時，先定義根域。

　　2,修改ueditor編輯器的ueditor.config.js

　　   找到 customDomain:false 改成 customDomain:true  並取消註釋。

　　3.修改ueditor編輯器下net\config.json

　　   找到含有url的字段，例如："imageUrlPrefix": "/ueditor/net/" ，能夠修改爲含域名的全路徑 "imageUrlPrefix": "https://img.xxx.com/image/"（https://img.vancang.com/image/）。

　　   找到含有Format的字段，例如："imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"，能夠修改爲存放的物理路徑 "imagePathFormat": "D:\\img.xxx.com\\image\\{yyyy}{mm}{dd}\\{time}{rand:6}"

　　4.修改ueditor編輯器下net\web.config，域名需指向後臺系統的域名

　　   web.config添加跨域配置，有必定風險。　　   

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>
        <add name="Access-Control-Allow-Origin" value="https://admin.xxx.com" />
      </customHeaders>
    </httpProtocol>
</system.webServer>

 

　　5.修改後臺系統頁面，引用ueditor域名下的js

<script src="https://ueditor.xxx.com/ueditor.config.js"></script>
<script src="https://ueditor.xxx.com/ueditor.all.min.js"></script>
<script src="https://ueditor.xxx.com/lang/zh-cn/zh-cn.js"></script>

//初始化ueditor編輯器，serverUrl也要引用ueditor編輯器的域名

var ueDescription = UE.getEditor('txtDescription_textArea', {
　　serverUrl: "https://ueditor.xxx.com/net/controller.ashx"
});

　　6.修改後臺系統的web.config跨域配置，域名須要指向ueditor編輯器的域名。

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>
        <add name="Access-Control-Allow-Origin" value="https://ueditor.xxx.com" />
      </customHeaders>
    </httpProtocol>
</system.webServer>

　　這樣，百度ueditor跨域上傳圖片基本就完成了，有興趣的能夠本身敲敲代碼，作個小測試。

 

PS：客官有時間光臨個人小站 萬倉網。