我是如何一步步编码完成万仓网ERP系统的（六）产品库设计 2.百度Ueditor编辑器

　　万仓网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：客官有时间光临我的小站 万仓网。

来源：https://www.cnblogs.com/smh188/p/11546917.html

标签

Ueditor