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. 基于Docker实现MySQL主从复制

    前言 MySQL的主从复制是实现应用的高性能,高可用的基础.对于数据库读操作较密集的应用,通过使数据库请求负载均衡分配到不同MySQL服务器,可有效减轻数据库压力.当遇到MySQL单点故障中,也能在短 ...

  2. va_list 、va_start、 va_arg、 va_end 使用说明【转】

    转自:https://blog.csdn.net/f110300641/article/details/83822290 在ANSI C中,这些宏的定义位于stdarg.h中: typedef cha ...

  3. Windows Server2008 R2 服务器域名设置Https安全证书访问

    域名支持Https访问设置 1.首先登陆域名申办公司的域名管理账号添加TXT域名解析信息 以新网域名公司为例:http://dcp.xinnet.com,输入域名:www.xxx.com和密码登录即可 ...

  4. 动态规划算法模板和demo

    366. 斐波纳契数列 中文 English 查找斐波纳契数列中第 N 个数. 所谓的斐波纳契数列是指: 前2个数是 0 和 1 . 第 i 个数是第 i-1 个数和第i-2 个数的和. 斐波纳契数列 ...

  5. clientHeight获取屏幕可视化高度

    此时你设置后会发现屏幕的高度出现滚动条 那是因为body有8个外边距 设置margin:0就可以解决 watch可以区监听data中的数据,只要data中的数据发生变化 就可以执行watch中的函数了 ...

  6. Git的一些概念(二)

    一.Git的结构 二.Git和代码托管中心 代码托管中心的任务:维护远程库 1. 局域网内 GitLab 服务器 -- 可以自己搭建 2. 外部环境 GitHub 码云 三.本地库和远程库 1. 团队 ...

  7. JDOJ 1139 水仙花数

    JDOJ 1139: 水仙花数 https://neooj.com/oldoj/problem.php?id=1139 Description 打印出所有"水仙花数",所谓&quo ...

  8. nginx配置文件结构及location块语法规则

    一. nginx配置文件结构介绍 二. location语法规则: 用法示例: location [=|~|~*|^~] /uri/ { … } # 讲解如下: 1.  = 开头表示精确匹配 2.  ...

  9. SpringBoot中的日志

    默认情况下,Spring Boot会用SLF4J + Logback来记录日志,并用INFO级别输出到控制台. SLF4J,即简单日志门面(Simple Logging Facade for Java ...

  10. 【day06】css

    一.背景(Background) 1. background-color 背景颜色 2. background-image:url(图像URL);背景图片 3. background-repeat: ...