我是如何一步步编码完成万仓网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:客官有时间光临我的小站 万仓网。
我是如何一步步编码完成万仓网ERP系统的(六)产品库设计 2.百度Ueditor编辑器的更多相关文章
- 我是如何一步步编码完成万仓网ERP系统的(一)系统架构
https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...
- 我是如何一步步编码完成万仓网ERP系统的(二)前端框架
https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...
- 我是如何一步步编码完成万仓网ERP系统的(三)登录
https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...
- 我是如何一步步编码完成万仓网ERP系统的(四)登录的具体实现
https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...
- 我是如何一步步编码完成万仓网ERP系统的(五)产品库设计 1.产品类别
https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...
- 我是如何一步步编码完成万仓网ERP系统的(七)产品库设计 3.品牌图片跨域上传
https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...
- 我是如何一步步编码完成万仓网ERP系统的(八)产品库设计 4.品牌类别
https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...
- 我是如何一步步编码完成万仓网ERP系统的(九)产品库设计 5.产品属性项
https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...
- 我是如何一步步编码完成万仓网ERP系统的(十)产品库设计 6.属性项和类别关联
https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...
随机推荐
- Delphi-基础(例程、例程返回值)
一.例程:Delphi中独有的称呼,例程是将具体某个功能的代码进行封装表现形式: 1.过程 2.函数 过程和函数的区别在于有没有返回值二.例程的作用 1.可以解决命名冲突问题 2.提高代码的重复使用率 ...
- c# 第16节 一维数组的声明及使用
本节内容: 1:为什么要有使用数组 2:数组的简介 3:一维数组的声明 4: 实例数组声明 5:一维数组的使用 6:一维数组使用注意地方 1:为什么要使用数组 2:数组的简介 3:一维数组的声明 4: ...
- TCP数据报结构以及三次握手(九)
TCP(Transmission Control Protocol,传输控制协议)是一种面向连接的.可靠的.基于字节流的通信协议,数据在传输前要建立连接,传输完毕后还要断开连接. 客户端在收发数据前要 ...
- echars 实现多曲线,多Y轴,曲线单选切换,并且跟随切换指定Y轴
html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 接口规范、容错处理规则、aph备份数据规则
前话:前后解耦,前端开发环节使用APH,后台开发环节postman(可考虑为后台也做一个aph后台版) 1.api标准:标识符(ret:1为正常数据,0为接口报错),数据体(data:api的数据容器 ...
- Excel-逻辑函数
1.Excel计算的两种方式 Excel计算的两种方式: 1.公式:一些运算符和数值组成的数学表达式 2.函数:是Excel内部设置好的运算模块 2.EXcel的运算符 3.运算顺序 4.excel公 ...
- ABP 下载源码报错
ASP.NET Boilerplate 下载地址应该是这个:https://github.com/aspnetboilerplate/aspnetboilerplate/tree/v1.5.2 下载的 ...
- requests获取图片的宽和高
try: if cover: resp = requests.get('%s?x-oss-process=image/info' % (url), timeout=30) if resp.status ...
- 关于gcd
内容: \(gcd(a,b)=gcd(b,a\% b)\) 用途: 这不废话嘛,当然是用来求最大公约数啊 证明:(这还是四月份的时候cdx巨佬给我讲的qwq) 设\(d=gcd(a.b)\) 则有\( ...
- js中VO解析
执行环境(环境) 执行环境的用处 执行环境定义了变量或函数有权访问的其他数据,每一个执行环境都存在一个关联的变量对象(VO),代码无法访问,内部解析器会使用它,如果环境为函数,则将函数的AO作为VO, ...