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编辑器的更多相关文章

  1. 我是如何一步步编码完成万仓网ERP系统的(一)系统架构

    https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...

  2. 我是如何一步步编码完成万仓网ERP系统的(二)前端框架

    https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...

  3. 我是如何一步步编码完成万仓网ERP系统的(三)登录

    https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...

  4. 我是如何一步步编码完成万仓网ERP系统的(四)登录的具体实现

    https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...

  5. 我是如何一步步编码完成万仓网ERP系统的(五)产品库设计 1.产品类别

    https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...

  6. 我是如何一步步编码完成万仓网ERP系统的(七)产品库设计 3.品牌图片跨域上传

    https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...

  7. 我是如何一步步编码完成万仓网ERP系统的(八)产品库设计 4.品牌类别

    https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...

  8. 我是如何一步步编码完成万仓网ERP系统的(九)产品库设计 5.产品属性项

    https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...

  9. 我是如何一步步编码完成万仓网ERP系统的(十)产品库设计 6.属性项和类别关联

    https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...

随机推荐

  1. [小程序]微信小程序登陆并获取用户信息

    1.小程序js端调用框架登陆API,获取到一个临时code,拿着这个code去调用自己的服务端接口 2.在自己的服务器端,使用app_id app_secrect code可以获取到用户的openid ...

  2. windows及linux环境下修改pip的默认镜像源的方法

    1. 在windows环境下 临时修改 使用清华大学的源安装numpy包. pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple ...

  3. PHP扩展使用-GD

    一.相关函数 1. 获取信息 gd_info() #查看当前系统环境gd库支持的图片格式 getimagesize(imagefile) #获取图像大小,非GD库函数 imagex(imagefile ...

  4. xshell 远程登陆CentOS7 免密登陆

    首先说一下大体的思路: 1. 以密码登陆CentOS系统 2. 配置ssh 3. xshell 生成秘钥 4. 进行免密登陆 软件.设备: xshell(下载地址(免费版),也可以自行百度下载) Ce ...

  5. C++编译错误 --- 成员函数定义在 .h 文件中出现重定义错误(Error LNK 2005)

    今天写了一个简单的类,定义在 .h 文件中, 类很简单就将其成员函数定义在了一起(class类后面).运行的时候出现了如下图所示的编译错误(error LNK2005) 查资料,大部分都是说需要加上 ...

  6. flask POOL,websocket握手

    一.POOL Pool就是为了多线程访问数据库,减少数据库压力 回顾pymysql import pymysql #建立连接 mysql_conn = pymysql.connect(host=&qu ...

  7. vs解决方案文件出错

    问题描述: 电脑死机,重启电脑后打开解决方案,提示“选择的文件不是有效的解决方案文件” 解决方案: 1. 先用记事本打开这个解决方案查看下,发现其中内容变成空白了? 2. 打开项目中的xxxx.vcx ...

  8. woocommerce如何隐藏/显示product meta

    前面我们说了woocommerce如何隐藏SKU,那如果不想显示产品分类category和标签tag呢?我们知道SKU, Category list 和 Tag list在woocommerce产品页 ...

  9. 莫烦TensorFlow_03 Variable加法

    import tensorflow as tf ## 定义变量 state = tf.Variable(0, name = 'counter') #print(state.name) one = tf ...

  10. LG3812 「模板」线性基 线性基

    问题描述 LG3812 题解 线性基是一类擅长解决异或问题的数据结构(也不算数据结构吧...就是一种玄学的东西) 对于数列 \(a\) ,它的线性基 \(d\) 为 出现 \(1\) 的最高位在第 \ ...