收录了一些个人觉得不错的网页开发插件。
由于插件更新频繁,本页如有错误请指正,也欢迎告知更多功能强大、使用方便的插件。
| 插件 | 简介 | 备注 |
| 框架 | ||
| jQuery | 最流行的 JS 框架 | 下载、中文文档、英文整合文档、中文整合文档,浏览器支持、来自 css88 的文档 官方建议 IE 6-8 使用 1.12.4 |
| Angular、中文版 AngularJS (version 1.x) | 一套框架,多种平台同时适用手机与桌面 | MVC 架构,使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易 |
| Vue.js | 是一套用于构建用户界面的渐进式框架。 | |
| Bootstrap、中文版 | 简洁、直观、强悍的前端开发框架 | 英文文档、v3中文文档、v2中文文档、视频教程,主题和模板 |
| jQuery UI | 为 jQuery 提供更丰富的功能 | 示例:Datepicker、Color Animation、Shake Effect |
| 功能 | ||
| jQuery File Upload | jQuery 文件上传 | 英文文档 |
| jQuery Cookie | 读取、写入和删除 cookie | 浏览器支持,文档 |
| json2.js | json 操作库 | 已弃用,旧 IE 用 jQuery 的 parseJSON,HTML 5 用 JSON.parse |
| Lightbox | 老牌图片浏览插件 推荐使用更强大的 Viewer.js | |
| Swiper、中文版 | 最现代的移动触摸滑块(Most Modern Mobile Touch Slider) | 英文文档,中文文档,旧浏览器支持版本:2.x.x,Swiper 2 英文文档,中文文档 |
| jquery-cropper | 图片裁剪 | |
| FastClick | 用于消除手机浏览器上触摸事件触发之间的 300 毫秒延迟 | 用法,不应用的场景 |
| PACE | 页面加载进度条 | 文档,IE8+ |
| toastr | jQuery 通知 | 文档 |
| Autosize | 一款小巧的,可自动调整 textarea 高度的独立脚本 | IE9+ |
| X-editable | 允许您在页面上创建可编辑元素 | 文档,Demo |
| select2 | 一款提供搜索过滤、自定义样式的下拉框插件 | |
| jQuery Tags Input | 标签输入框 | 用法 |
| Viewer.js | 图片浏览插件 | GitHub(viewerjs)、GitHub(jquery-viewer) jquery-viewer 是 viewerjs 的 jQuery 插件,即在 jQuery 环境中要同时引用这两个脚本。 |
| PDF.js | A general-purpose, web standards-based platform for parsing and rendering PDFs. | |
| 编辑器 | ||
| UEditor | 百度在线编辑器 | GitHub 下载、文档、ASP.NET 部署教程 |
| 日期时间 | ||
| bootstrap-datepicker | Bootstrap 日期选择器 | Online Demo |
| DateTimePicker | 日期时间选择 | |
| MultiDatesPicker | 多日期选择 | |
| FullCalendar | 日历日程事件工作表 | IE 9+, jQuery 2.0.0+ |
| TimeTo | 计时、倒计时 | |
| 图表 | ||
| D3.js | D3.js 是基于数据驱动文档工作方式的一款 JavaScript 函数库,主要用于网页作图、生成互动图形,是最流行的可视化库之一。 | |
| Highcharts、中文版 | 兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库 | 文档 |
| ECharts | 百度图表控件 | |
| AntV | 来自蚂蚁金服的专业、简单、无限可能的可视化解决方案 G2 - 专业易用的可视化类库 G2-mobile - 移动端高性能可视化类库 G6 - 关系图可视化类库 | 流程图, 关系图, 可视化规范, 地图, 河流图, 力导图, 网络图, UML图, 业务流程图, 时序图 |
| SyntaxHighlighter | 功能齐全的代码语法高亮插件(JS) | |
| 动态排名数据可视化 | 将历史数据排名转化为动态柱状图图表 开源代码,非插件,修改使用 | GitHub、视频教程、EV录屏、网页示例、视频效果 |
| 图标 | ||
| Font Awesome | 完美的图标字体 | IE 8+,v3.2.1 支持 IE 7,进阶用法(定宽/边框/动画/旋转/叠加) |
| Glyphicons | 图标字体 | 作为 Bootstrap 组件 |
| Iconfont | 阿里巴巴矢量图标库 | 用户可以自定义下载多种格式的 icon,也可将图标转换为字体,便于前端工程师自由调整与调用 |
| UI 框架 | ||
| WeUI | 同微信原生视觉体验一致的基础样式库 | Demo、Wiki |
| Apple UI Design Resources | 苹果用户界面设计资源 | |
程序设计规范:
【推荐】上传的文件直接保存到文件存储服务(如阿里云 OSS),这样即使被上传了后门 shell,对网站服务器也不会有影响。
否则必须通过文件头来确定文件类型,检查文件十六进制的文件头和文件尾是否合法,并检查文件流中是否包含 php、evel 等字符。
不可直接使用客户端文件名来保存文件,特别是后缀名/扩展名。应生成随机文件名,并通过检验文件头来确定文件类型。必须由程序指定保存目录。
使用 OSS 的应直接上传,不要在 ECS 上临时存放或备份。如必须存放的,应按上述规范操作。
服务器安全设置
CentOS + nginx + PHP:
全站文件取消属性中的“执行”权限(chmod),因为这个“执行”与运行 PHP 无关。而需要上传文件的“目录”需要“执行”权限,原因是需要往该目录创建文件。
仅需要写入的目录或文件设置“写入”权限。如上传图片目录、ThinkPHP 的 Runtime 目录。
凡可写目录或文件均不允许运行 PHP / PY 等 除需要被直接访问的 PHP / PY 文件,其它动态文件均不允许被访问到,在 nginx 的配置文件中添加项,参:https://xoyozo.net/Blog/Details/nginx-location-if,若全站使用统一的入口文件访问,那么设置仅该文件允许运行 PHP 即可。通过 IO 方式被其它文件包含的文件,无需运行 PHP 权限。(“deny all”对 include 起作用,但对 IO 不起作用,因此 Runtime 目录可以继续为 ThinkPHP 提供缓存服务。)这一步非常有用。
使用与 nginx 网站用户不同的用户来部署网站文件,如宝塔面板 PHP 使用 www 用户,那么就使用 root 或其它新用户来上传文件,否则将导致全站目录和文件可写。有条件的建议不同网站使用不同的用户,可防止一个网站被入侵后导致其它网站文件或磁盘上的其它文件被泄露的风险(2022年10月2日从宝塔官方社区获悉,宝塔面板暂不支持使用非 www 用户创建并运行网站)。
Windows Server + IIS + ASP.NET:
配置每个磁盘的安全属性,拒绝“IIS_IUSRS”这个用户组的所有权限。只要设置驱动器即可,子文件夹和文件会自动继承。若运行 .NET Framework 项目,需要设置 C:\Windows\Microsoft.NET\Framework\v*.*.*****\Temporary ASP.NET Files\ 目录可修改写入权限,.NET Core 项目不需要此设置。
为每个网站创建一个新用户,仅隶属于“IIS_IUSRS”。网站根目录安全属性添加该用户,权限选择“读取”。(已测取消“读取与执行”不影响 PHP,“列出文件夹内容”视业务需求开启,建议关闭)。仅需要上传文件的目录或文件设置“修改”、“写入”权限。(修改对应修改文件,写入对应上传文件)
IIS 网站中设置“物理路径凭据”以及应用程序池的“标识”。
IIS 中设置写入目录的“处理程序映射”无脚本。
了解使用 Visual Studio 创建的模板项目
启动 VS,从菜单项打开:文件 - 新建 - 项目,在已安装的模板中选择 .NET Core,选择 ASP.NET Core Web Application(.NET Core),给项目取个名称,确定。选择 Web 应用程序,确定。
· global.json: 你可以在这里放置解决方案的配置信息和工程之间的引用。作用类似于 *.sln 文件。
· Program.cs: 这个文件包含了 ASP.NET Core 应用的 Main 方法,负责配置和启动应用程序。
· src 文件夹: 包含组成你应用程序的全部项目代码。
· wwwroot: 你的静态文件将被放置在这个文件夹,它们都将作为资源直接提供给客户端,包含 HTML,CSS 和 JavaScript 文件。可以在 project.json 内重置。
· project.json: 包含项目设置。在 ASP.NET Core 中,你可以通过使用 NuGet 程序包管理工具(NPM)添加 NuGet 包或者编辑这个文件来管理从属。
· project.lock.json: 由 project.json 生成。
· Startup.cs 这个主要放置你 ASP.NET Core 的 stratup 和 configuration 代码。ConfigureServices 方法定义了你应用程序使用的服务,Configure 方法用来定义组成请求管道的中间件。
一些备注:
ASP.NET Core 项目中不能创建 Web 窗体页面(.aspx)
发布后的网站根目录是项目中的 /wwwroot 目录
路由在 Startup 的 Configure 方法中配置
各位站长好:
根据苹果相关通知,从2017年1月1日起,所有上架AppStore的应用必须支持https协议。
仍然采用HTTP传输的站点APP,将无法在AppStore被用户下载使用,也无法进行升级更新等工作。
官方视频
https://developer.apple.com/videos/play/wwdc2016/706/
相关新闻
http://www.chinaz.com/news/2016/1028/602635.shtml
根据AppStore审核要求,站长需要在2017年1月1日之前,在APP服务器全面部署https。
尽管不升级支持https后果严重,但诸位也不必太过担心,马甲根据要求为各位提供一份服务器升级https的技术文档,供您参考。
https的优点:
1. 相对于http,https可以确保数据在网络传输过程中不被篡改(如禁止运营商插入广告),同时可以提升网站的安全性。
2. iOS可以实现微信内部浏览器直接启动并打开App对应页面。
APP网站升级https步骤:
1. 为APP域名申请购买SSL证书(可选免费型);
2. 将SSL证书部署到APP站点。
https证书申请方法:
1. 进入阿里云(独立服务器客户可注册一个阿里云账号,无须购买阿里云主机)https证书申请页面 https://www.aliyun.com/product/security/markets/aliyun/product/cas

2. 购买https证书,选择免费类型,点击购买(无需实际付款)

3. 购买完成后,进入控制台-CA证书服务页面,找到证书订单,点击“补全”

4. 填写证书对应的域名信息,免费证书只能用于一个域名(请填写完整域名例如:test.magapp.cc 而不是 magapp.cc)

5. 继续补全证书信息,注意域名验证类型选择DNS,邮箱填写自己常用邮箱即可,稍后系统会往邮箱发送域名解析信息。

6. 下一步生成证书请求文件(CSR),这里建议选择“系统生成CSR”,点击右侧创建,创建完成后,点击提交审核,开始申请https证书。

7. 稍后系统会向邮箱发送一份该邮件,邮件包含需要在域名管理后台解析的信息。

8. 到域名管理后台添加新的域名解析,注意解析类型为CNAME

9. 添加新域名解析完成后,系统会对您的申请进行审核(审核时间在几分钟到几个小时不确定),如果审核成功系统会为你签发https证书,失败也会有相关原因说明,如果失败可根据提示重新申请。

10. https证书申请成功后,下一步就可以下载并部署到APP服务器。

11. 点击下载后,可以根据阿里云提供的部署文档,进行相关的服务器部署工作。

12. 部署完成后,验证是否部署成功
第一步:使用https协议访问域名是否能正常访问,例如 https://test.magapp.cc
第二步:在线检测域名是否满足苹果审核要求,网址为:https://www.qcloud.com/product/ssl.html#userDefined10
填写自己申请https的域名

如果域名检测各项满足会显示如下图所示

部署注意事项:
1. https使用的是443端口而不是默认的80端口,需要在wdcp安全管理-iptables开启443端口。
2. https免费证书有效期为一年,请各位站长作好记录,提前重新申请。
3. 站点从http转到https完全过渡需要一段时间,建议在部署时站点同时支持http和https。
4. 部署过程遇到任何问题,可联系您的专属运维人员。
MAGAPP技术部
苹果宣布 2017 年 1 月 1 日开始所有上架的应用必须启用 ATS 安全传输功能。ATS 要求服务器必须支持传输层安全(TLS)协议 1.2 以上版本;证书必须使用 SHA256 或更高的哈希算法签名;必须使用 2048 位以上 RSA 密钥或 256 位以上 ECC 算法等等,不满足条件的证书,ATS 都会拒绝连接。查看具体要求
微信小程序进入开发公测阶段,同样要求提供 HTTPS 方式安全连接。
证书类型对比
| DV SSL 域名验证型 | OV SSL 组织验证型 | EV SSL 扩展验证型 | ||
| 申请条件 | 申请对象 | 个人 / 企业 | 企业 | 企业 |
| 证明域名所有权 | √ | √ | √ | |
| 价格 | 免费 / 低 | 中 | 高 | |
| 提交审核 | 提交资料 | 邮箱、姓名、手机等 | DV 所需资料以及: 组织机构资料(企业执照)等 | OV 所需资料以及: 法律相关文件 |
| 审核时间 | 自动审核 1小时内 | 人工审核 3~5工作日 | 人工审核 3~5工作日 | |
| 可信标识 | 地址栏挂锁 | √ | √ | √ |
| 地址栏公司名称 | × | × | √ | |
| 绿色地址栏(IE) | × | × | √ | |
| 保护范围 | 单域名 | √ | √ | √ |
| 多域名 | √ | √ | √ | |
| 通配符/泛域名 | √ | √ | × | |
| 推荐用途 | 个人及小型网站 | 一般组织或中小型企业 | 金融、电商、大型企业或受信组织 | |
* 表格中,单域名指单个子域名(如:123.abc.com),多域名指多个子域名(可以不属于同一个顶级域名,如:123.abc.com / 456.abc.com / 456.def.com),通配符指单个顶级域名的所有子域名(如:*.abc.com)。
* 若 https 的网页中包含 http 资源,则地址栏的锁可能会消失。
* 浏览器上点击地址栏的锁可以查看具体的证书详情。
证书颁发机构(CA)
| 机构 | 简介 | 谁在用 |
| Let's Encrypt | 公益组织,免费,每 90 天续约 | 越来越多的中小网站 |
| Symantec | 赛门铁克 | 百度、支付宝、阿里云、Apple(EV)、微软 |
| GlobalSign | 公众信任服务行业的领头羊 | 淘宝、天猫(OV)、阿里云、京东(OV) |
| GeoTrust | 全球第二大? | 微信 |
| Comodo | 价格实惠 | |
| GoDaddy | 全球互联网域名注册商 | |
| DigiCert | 不颁发 DV,在非 DV 市场份额中是老大 | Facebook、Twitter(EV)、Mozilla(EV)、GitHub(EV)等 |
| 沃通 WoSign | 国产 | 360搜索(EV) |
| Other |
* 赛门铁克收购了 VeriSign,VeriSign 又收购了 GeoTrust,所以 Symantec 和 GeoTrust 在 SSL 认证服务上就不知道是什么关系了,请自行百度。
* 代理商也可以购买,或许价格优惠,或许申请方便,如:阿里云、腾讯云等,甚至上淘宝购买。
* 查看:Netcraft 统计的市场份额
* 网上说使用 Let's Encrypt 的 SSL 在遇到国内第三方 DNS 解析服务时会超时,我认为只是在申请证书时偶尔超时(DNS query timed out),重试即可,证书部署后访问网站时应该没有问题,请知情者告知实情。
下一步
上一篇介绍了如何创建用于 https 的 SSL 证书,本文讲述如何将创建好的 SSL 证书导入到 Windows,并在 IIS 中部署 HPPTS 的访问。
导入证书
GetSSL 整理的安装方法合集:https://www.getssl.cn/support/ssl安装教程/
下面介绍另一种方法:
准备好 pfx 格式的证书和密码。
开始 -> 运行 -> MMC
点击菜单栏的“添加/删除管理单元”,选择证书,添加,“本地计算机”或“计算机帐户”
左侧展开证书,个人,右键,所有任务,导入,键入密码,选择“根据证书类型,自动选择证书存储”
绑定网站域名
打开 IIS 管理器,选择相应的网站,“绑定”,添加,类型为“https”,选择证书
这样网站就能以 https:// 方式访问了
实现 http 自动跳转 https
方案一:推荐
打开 ASP.NET 网站,如果没有 Global.asax 则添加全局应用程序类
在 Application_BeginRequest() 方法中添加以下代码:
if (!Request.IsLocal && !Request.IsSecureConnection)
{
if (Request.HttpMethod == System.Net.WebRequestMethods.Http.Get || Request.HttpMethod == System.Net.WebRequestMethods.Http.Head)
{
Uri uri = Request.Url;
Response.Redirect("https://" + uri.Authority + uri.PathAndQuery + uri.Fragment);
HttpContext.Current.ApplicationInstance.CompleteRequest();
}
}Response.RedirectPermanent 是 301 永久
Response.Redirect 是 302 临时
Webform 貌似没有 303、307 的 Redirect,可以判断 Method 来分别处理。
MVC 中可以直接指定状态码,例:
public ActionResult About()
{
HttpContext.Response.AddHeader("Location", "/Home/Contact");
return new HttpStatusCodeResult(307);
}方案二:
需要“URL 重写”支持,以 IIS 7 为例,模块下载地址:x86 / x64,IIS 8 及以上版本自带该模块
打开“URL 重写”,添加规则,选择空白规则
填写名称,如“Redirect to HTTPS”
与模式匹配,正则表达式
模式:(.*)
添加两个条件:
条件输入“{HTTPS}”,“与模式匹配”,模式“^OFF$”,确定
条件输入“{HTTPS_HOST}”,“与模式不匹配”,模式“^(localhost)”,确定
操作类型“重定向”,
重定向 URL“https://{HTTP_HOST}/{R:1}”
重定向类型:请参考此文,所有请求跳转可选 303,仅 GET/HEAD 请求跳转可选 307(推荐,可防止 POST 请求跳转丢失数据)
这么多步骤,其实最终会在网站 web.config 的 <system.webServer /> 节点下插入以下配置:
<rewrite>
<rules>
<rule name="Redirect to HTTPS" enabled="true" stopProcessing="true">
<match url="(.*)"/>
<conditions>
<add input="{HTTPS}" pattern="^OFF$"/>
<add input="{HTTPS_HOST}" pattern="^(localhost)" negate="true"/>
</conditions>
<action type="Redirect" url="https://{HTTP_HOST}/{R:1}" redirectType="Temporary"/>
</rule>
</rules>
</rewrite>
配置 Web.Release.config 转换语法
作为 ASP.NET 开发者,我们发现,当我们把这段 URL 重写规则复制到项目中的 web.config 后,在 VS 的本地调试中同样会自动跳转到 https://localhost/xxx,这可没法调试了呀。所以只能用 Web.Release.config 来实现本地调试用 http,发布用 https。
<system.webServer /> 节点是针对 IIS 7 的配置,干脆我把整个 <system.webServer /> 从 web.config 剪切到 web.release.config 中,然后给 <system.webServer> 加上属性和值:xdt:Transform="Insert",这样就能实现我们的目的了
详细的用于 Web 应用程序项目部署的 Web.config 转换语法参见此文
验证
最后我们来检查一下配置的对不对:https://www.geocerts.com/ssl_checker
参考资料
扩展阅读
最理想的部署方式是 ClickOnce,但是证书问题会导致安装时提示:
Windows 已保护你的电脑
Windows SmartScreen 筛选器已阻止启动一个未识别的应用。运行此应用可能会导致你的电脑存在安全风险。
这需要一个从 CA 获取的数字证书(http://www.doc88.com/p-785388554071.html)
百科: http://baike.baidu.com/view/1390498.htm
ClickOnce 部署教程: http://www.cnblogs.com/weixing/p/3358740.html
Makecert.exe(证书创建工具): https://msdn.microsoft.com/zh-cn/library/bfsktky3.aspx
如何:为 ClickOnce 应用程序向客户端计算机添加一个受信任的发行者:https://msdn.microsoft.com/zh-cn/library/ms172241.aspx
执行命令:makecert -r -n "CN=嗨秒网" -sv himiao.pvk himiao.cer
Password: LRQelk0l****************FTtJvufI
-r 创建自我签名证书。
-n name 指定主题的证书名称。 此名称必须符合 X.500 标准。 最简单的方法是在双引号中指定此名称,并加上前缀 CN=;例如,-n "CN=myName"。
-sv pvkFile 指定主题的 .pvk 私钥文件。 如果该文件不存在,系统将创建一个。
执行命令:Cert2spc himiao.cer himiao.spc
执行命令:pvk2pfx -pvk himiao.pvk -spc himiao.spc -pfx himiao.pfx -pi LRQelk0l****************FTtJvufI –po LRQelk0l****************FTtJvufI –f
在开发微信中的网页时,会遇到一些域名相关的配置:
① 公众号设置 - 功能设置 - 业务域名
② 公众号设置 - 功能设置 - JS接口安全域名
③ 接口权限 - 网页授权获取用户基本信息
④ 商户平台 - 产品中心 - 开发配置 - JSAPI支付授权目录
⑤ 小程序 - 开发 - 开发设置 - 业务域名
⑥ 公众号开发 - 基本设置 - IP白名单
第①种 业务域名:相对不重要,只是用来禁止显示“防欺诈盗号,请勿支付或输入qq密码”提示框,可配置 3 个二级或二级以上域名(个人理解是“非顶级域名”,即填写了 b.a.com 的话,对 c.b.a.com 不起作用,待测)。
我们网站的域名和公众号是没有绑定关系的,那么你在打开一个(可能是朋友分享的)网页时,跟哪个公众号的配置去关联呢,答案是 JS-SDK。
测试结果:由于一个月只有3次修改机会,这次先测二级域名,有效;再测顶级域名,有效;删除所有,仍有效。所以应该是缓存作用。过几天再试,然后下个月先测顶级域名,来确定直接填写顶级域名是否对所有二级域名有效。
第②种 JS接口安全域名:是配置所配置的域名下的网页可调用 JS-SDK。可配置 5 个一级或一级以上域名(个人理解是“任何级域名”,即填写了 b.a.com 对 c.b.a.com 也有效,但对 c.z.a.com 无效,待测。如果我们拥有顶级域名对应网站的控制权(上传验证文件到网站根目录),直接填写顶级域名即可)。
使用 JS-SDK 的每个网页都必须注入配置信息(wx.config),而之前必须获取 jsapi_ticket,jsapi_ticket api 的调用次数非常有限,必须全局缓存。而获取 jsapi_ticket 之前必须先获取 access_token,同样需要全局缓存。所以,我们专门做个接口,功能是传入需要使用 JS-SDK 的网页的 url,输出 wx.config 需要用到的配置信息,来实现在不同网页(网站)使用 JS-SDK。
第③种 网页授权域名:这是已认证的服务号才能享有的特权,主要作用是获取用户在该服务号中的 openid 和 unionid。可配置 1 个 2 个回调域名(可填写任意级别的域名,但仅对该域名的网页(网站)有效,若填写了 a.com 对 b.a.com 是无效的)。
因此,如果我们需要在不同二级域名甚至不同顶级域名下的网页(以下称之为活动页面)实现用户授权,需要做一个统一的代理授权页面(回调域名当然是填写这个页面所在的域名),引导用户依次打开:微信授权页面 - 代理授权页面 - 活动页面,根据开发说明文档,具体实现如下:
当用户第一次打开活动页面时,引导打开微信授权页面(https://open.weixin.qq.com/connect/oauth2/authorize),其中参数 redirect_uri 指定回调地址,即代理授权页面地址,参数 state 指定活动页面地址。微信授权页面返回 code 和 state,code 作为换取网页授权 access_token 的票据。到这一步,本来可以由代理授权页面直接拿这个 code 去换取 access_token、openid 和 unionid 了,但是由于当前用户还在 302 重定向过程中,将这些信息带入到活动页面时势必导致信息泄露,所以这里将 code 追加到 state 指定的网址上后重定向到活动页面,活动页面拿到 code 再通过服务器端向代理授权页面所在服务器请求 openid 和 unionid,并将它们保存于 Session 中视为用户登录。这样,服务号的 appid 和 secret 也能得到保护。代理授权页面请求的微信服务器接口地址是 https://api.weixin.qq.com/sns/oauth2/access_token。
注:网页授权 access_token 不同于 JS-SDK 中使用的全局唯一接口调用凭据 access_token,没有请求次数限制。
流程既然通了,实现逻辑可以这样设定:
活动页面首先判断 Session 中是否有 openid 或 unionid,若有表示已授权登录;没有再判断地址栏是否有 code 参数,若有则调用代理授权页面所在服务器的接口,用 code 换 openid 和 unionid;没有则直接重定向到代理授权页面,带上 state。用 code 换 openid 和 unionid 时若成功则保存至 Session,若失败则仍然重定向到代理授权页面,带上 state,特别注意 state 中的活动页面地址确保没有 code 参数。
第④种 JSAPI支付授权目录:涉及到微信支付时用到,顾名思义是固定某一个网站内的某个目录,以“/”结尾。最多可添加 5 个。如果支付页面在目录 https://www.a.com/b/ 下,那么可以填写 https://www.a.com/b/ 或 https://www.a.com/(建议后者),暂未测试填写 https://a.com/ 会不会起作用。涉及支付安全,建议设置支付页面的最深一层不可写的目录,以防目录内被上传后门文件带来的安全隐患。
第⑤种 小程序业务域名:任何需要在小程序的 web-view 组件中打开的网页,都必须配置小程序业务域名,限制 20 个。该域名要求必须 https,可填入“任何级域名”(建议填顶级域名,即填写了 a.com 对 b.a.com 也有效。如果我们拥有顶级域名对应网站的控制权(上传验证文件到网站根目录),直接填写顶级域名即可)。
第⑥种 IP白名单:仅填写管理全局 access_token 的中控服务器的 IP。
总结:在上述自定义接口部署完成后,如果微信中的网页想获取用户的 unionid,则不需要配置域名,直接使用统一的代理授权即可;如果需要使用 JS-SDK 功能,如分享、上传等等,则需要配置 JS 接口安全域名;如果有表单,最好配置一下业务域名。
本文系个人经验总结,部分结果未经证实,欢迎指正!QQ:940534113
在 ASP.NET Core 或 ASP.NET 5 中部署百度编辑器请跳转此文。
本文记录百度编辑器 ASP.NET 版的部署过程,对其它语言版本也有一定的参考价值。
【2020.02.21 重新整理】
下载
从 GitHub 下载最新发布版本:https://github.com/fex-team/ueditor/releases
按编码分有 gbk 和 utf8 两种版本,按服务端编程语言分有 asp、jsp、net、php 四种版本,按需下载。
目录介绍
以 v1.4.3.3 utf8-net 为例,

客户端部署
本例将上述所有目录和文件拷贝到网站目录 /libs/ueditor/ 下。
当然也可以引用 CDN 静态资源,但会遇到诸多跨域问题,不建议。
在内容编辑页面引入:
<script src="/libs/ueditor/ueditor.config.js"></script>
<script src="/libs/ueditor/ueditor.all.min.js"></script>在内容显示页面引入:
<script src="/libs/ueditor/ueditor.parse.min.js"></script>如需修改编辑器资源文件根路径,参 ueditor.config.js 文件内顶部文件。(一般不需要单独设置)
如果使用 CDN,那么在初始化 UE 实例的时候应配置 serverUrl 值(即 controller.ashx 所在路径)。
客户端配置
初始化 UE 实例:
var ue = UE.getEditor('tb_content', {
// serverUrl: '/libs/ueditor/net/controller.ashx', // 指定服务端接收文件路径
initialFrameWidth: '100%'
});其它参数见官方文档,或 ueditor.config.js 文件。
服务端部署
net 目录是 ASP.NET 版的服务端程序,用来实现接收上传的文件等功能。
本例中在网站中的位置是 /libs/ueditor/net/。如果改动了位置,那么在初始化 UE 的时候也应该配置 serverUrl 值。
这是一个完整的 VS 项目,可以单独部署为一个网站。其中:
net/config.json 服务端配置文件
net/controller.ashx 文件上传入口
net/App_Code/CrawlerHandler.cs 远程抓图动作
net/App_Code/ListFileManager.cs 文件管理动作
net/App_Code/UploadHandler.cs 上传动作
该目录不需要转换为应用程序。
服务端配置
根据 config.json 中 *PathFormat 的默认配置,一般地,上传的图片会保存在 controller.ashx 文件所在目录(即本例中的 /libs/ueditor/)的 upload 目录中:
/libs/ueditor/upload/image/
原因是 UploadHandler.cs 中 Server.MapPath 的参数是由 *PathFormat 决定的。
以修改 config.json 中的 imagePathFormat 为例:
原值:"imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"
改为:"imagePathFormat": "/upload/ueditor/{yyyy}{mm}{dd}/{time}{rand:6}"
以“/”开始的路径在 Server.MapPath 时会定位到网站根目录。
此处不能以“~/”开始,因为最终在客户端显示的图片路径是 imageUrlPrefix + imagePathFormat,若其中包含符号“~”就无法正确显示。
在该配置文件中查找所有 PathFormat,按相同的规则修改。
说到客户端的图片路径,我们只要将
原值:"imageUrlPrefix": "/ueditor/net/"
改为:"imageUrlPrefix": ""
即可返回客户端正确的 URL。
当然也要同步修改 scrawlUrlPrefix、snapscreenUrlPrefix、catcherUrlPrefix、videoUrlPrefix、fileUrlPrefix。
特殊情况,在复制包含图片的网页内容的操作中,若图片地址带“?”等符号,会出现无法保存到磁盘的情况,需要修改以下代码:
打开 CrawlerHandler.cs 文件,找到
ServerUrl = PathFormatter.Format(Path.GetFileName(this.SourceUrl), Config.GetString("catcherPathFormat"));替换成:
ServerUrl = PathFormatter.Format(Path.GetFileName(SourceUrl.Contains("?") ? SourceUrl.Substring(0, SourceUrl.IndexOf("?")) : SourceUrl), Config.GetString("catcherPathFormat"));如果你将图片保存到第三方图库,那么 imageUrlPrefix 值设为相应的域名即可,如:
改为:"imageUrlPrefix": "//cdn.***.com"
然后在 UploadHandler.cs 文件(用于文件上传)中找到
File.WriteAllBytes(localPath, uploadFileBytes);在其下方插入上传到第三方图库的代码,以阿里云 OSS 为例:
// 上传到 OSS
client.PutObject(bucketName, savePath.Substring(1), localPath);在 CrawlerHandler.cs 文件(无程抓图上传)中找到
File.WriteAllBytes(savePath, bytes);在其下方插入上传到第三方图库的代码,以阿里云 OSS 为例:
// 上传到 OSS
client.PutObject(bucketName, ServerUrl.Substring(1), savePath);最后有还有两个以 UrlPrefix 结尾的参数名 imageManagerUrlPrefix 和 fileManagerUrlPrefix 分别是用来列出上传目录中的图片和文件的,
对应的操作是在编辑器上的“多图上传”功能的“在线管理”,和“附件”功能的“在线附件”。
最终列出的图片路径是由 imageManagerUrlPrefix + imageManagerListPath + 图片 URL 组成的,那么:
"imageManagerListPath": "/upload/ueditor/image",
"imageManagerUrlPrefix": "",
以及:
"fileManagerListPath": "/upload/ueditor/file",
"fileManagerUrlPrefix": "",
即可。
如果是上传到第三方图库的,且图库上的文件与本地副本是一致的,那么将 imageManagerUrlPrefix 和 fileManagerUrlPrefix 设置为图库域名,
服务端仍然以 imageManagerListPath 指定的路径来查找本地文件(非图库),但客户端显示图库的文件 URL。
因此,如果文件仅存放在图库上,本地没有副本的情况就无法使用该功能了。
综上,所有的 *UrlPrefix 应该设为一致。
另外记得配置不希望被远程抓图的域名,参数 catcherLocalDomain。
服务端授权
现在来判断一下只有登录用户才允许上传。
首先打开服务端的统一入口文件 controller.ashx,
继承类“IHttpHandler”改为“IHttpHandler, System.Web.SessionState.IRequiresSessionState”,即同时继承两个类,以便可使用 Session,
找到“switch”,其上插入:
if (用户未登录) { throw new System.Exception("请登录后再试"); }即用户已登录或 action 为获取 config 才进入 switch。然后,
else
{
action = new NotAllowedHandler(context);
}这里的 NotAllowedHandler 是参照 NotSupportedHandler 创建的,提示语 state 可以是“登录后才能进行此操作。”
上传目录权限设置
上传目录(即本例中的 /upload/ueditor/ 目录)应设置允许写入和禁止执行。
基本用法
设置内容:
ue.setContent("Hello world.");获取内容:
var a = ue.getContent();更多用法见官方文档:http://fex.baidu.com/ueditor/#api-common
其它事宜
配置上传附件的文件格式
找到文件:config.json,更改“上传文件配置”的 fileAllowFiles 项,
同时在 Web 服务器上允许这些格式的文件可访问权限。以 IIS 为例,在“MIME 类型”模块中添加扩展名。
遇到从客户端(......)中检测到有潜在危险的 Request.Form 值。请参考此文
另外,对于不支持上传 .webp 类型的图片的问题,可以作以下修改:
config.json 中搜索“".bmp"”,替换为“".bmp", ".webp"”
IIS 中选中对应网站或直接选中服务器名,打开“MIME 类型”,添加,文件扩展名为“.webp”,MIME 类型为“image/webp”
最后,为了在内容展示页面看到跟编辑器中相同的效果,请参照官方文档引用 uParse
若有插入代码,再引用:
<link href="/lib/ueditor/utf8-net/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" />
<script src="/lib/ueditor/utf8-net/third-party/SyntaxHighlighter/shCore.js"></script>
其它插件雷同。
若对编辑器的尺寸有要求,在初始化时设置即可:
var ue = UE.getEditor('tb_content', {
initialFrameWidth: '100%',
initialFrameHeight: 320
});
版本区别
| 功能特性 | Windows RT | Windows 8 (标准版) |
Windows8 Pro (专业版) |
Windows 8 Enterprise (企业版) |
| 与现有Windows 兼容 | 无 | 有 | 有 | 有 |
| 购买渠道 | 在设备上预装 | 大多数渠道 | 大多数渠道 | 经过认证的客户 |
| 架构 | ARM (32-bit) | IA-32 (32-bit) or x86-64 (64-bit) | IA-32 (32-bit) or x86-64 (64-bit) | IA-32 (32-bit) or x86-64 (64-bit) |
| 安全启动 | 有 | 有 | 有 | 有 |
| 图片密码 | 有 | 有 | 有 | 有 |
| 开始界面、动态磁帖以及相关效果 | 有 | 有 | 有 | 有 |
| 触摸键盘、拇指键盘 | 有 | 有 | 有 | 有 |
| 语言包 | 有 | 有 | 有 | 有 |
| 更新的资源管理器 | 有 | 有 | 有 | 有 |
| 标准程序 | 有 | 有 | 有 | 有 |
| 文件历史 | 有 | 有 | 有 | 有 |
| 系统的重置功能 | 有 | 有 | 有 | 有 |
| Play To “播放至”功能 | 有 | 有 | 有 | 有 |
| Connected standby保持网络连接的待机 | 有 | 有 | 有 | 有 |
| Windows Update | 有 | 有 | 有 | 有 |
| Windows Defender | 有 | 有 | 有 | 有 |
| 增强的多显示屏支持 | 有 | 有 | 有 | 有 |
| 新的任务管理器 | 有 | 有 | 有 | 有 |
| ISO 镜像 and VHD 挂载 | 有 | 有 | 有 | 有 |
| 移动通信功能 | 有 | 有 | 有 | 有 |
| Microsoft 账户 | 有 | 有 | 有 | 有 |
| Internet Explorer 10 | 有 | 有 | 有 | 有 |
| SmartScreen | 有 | 有 | 有 | 有 |
| Windows 商店 | 有 | 有 | 有 | 有 |
| Xbox Live 程序 (包括 Xbox Live Arcade) | 有 | 有 | 有 | 有 |
| Exchange ActiveSync | 有 | 有 | 有 | 有 |
| 快速睡眠(snap) | 有 | 有 | 有 | 有 |
| VPN连接 | 有 | 有 | 有 | 有 |
| Device encryption | 有 | 无 | 无 | 无 |
| 随系统预装的Microsoft Office | 有 | 无 | 无 | 无 |
| 桌面 | 部分 | 有 | 有 | 有 |
| 储存空间管理(storage space) | 无 | 有 | 有 | 有 |
| Windows Media Player | 无 | 有 | 有 | 有 |
| Windows Media Center | 无 | 无 | 需另行添加 | 无 |
| 远程桌面 | 只作客户端 | 只作客户端 | 客户端和服务端 | 客户端和服务端 |
| 从VHD启动 | 无 | 无 | 有 | 有 |
| BitLocker and BitLocker To Go | 无 | 无 | 有 | 有 |
| 文件系统加密 | 无 | 无 | 有 | 有 |
| 加入Windows 域 | 无 | 无 | 有 | 有 |
| 组策略 | 无 | 无 | 有 | 有 |
| AppLocker | 无 | 无 | 有 | 有 |
| Hyper-V | 无 | 无 | 仅64bit支持 | |
| Windows To Go | 无 | 无 | 无 | 有 |
| DirectAccess | 无 | 无 | 无 | 有 |
| 分支缓存(BranchCache) | 无 | 无 | 无 | 有 |
| 以RemoteFX提供视觉特效 | 无 | 无 | 无 | 有 |
| Metro风格程序的部署 | 无 | 无 | 无 | 有 |
下载地址
根据下面的 SHA1 或文件名在网上搜索下载地址,下载完成后验证其 SHA1 即可。
Windows 8 (x86) - DVD (Chinese-Simplified)
文件名: cn_windows_8_x86_dvd_915414.iso
SHA1: 0C4A168E37E38EFB59E8844353B2535017CBC587
Windows 8 (x64) - DVD (Chinese-Simplified)
文件名: cn_windows_8_x64_dvd_915407.iso
SHA1: A87C4AA85D55CD83BAE9160560D1CB3319DD675C
Windows 8 Pro VL (x86) - DVD (Chinese-Simplified)
文件名: cn_windows_8_pro_vl_x86_dvd_917720.iso
SHA1: EEEF3C3F6F05115C7F7C9C1D19D6A6A6418B5059
Windows 8 Pro VL (x64) - DVD (Chinese-Simplified) 推荐
文件名: cn_windows_8_pro_vl_x64_dvd_917773.iso
SHA1: 9C4EC9FC4FB561F841E22256BC9DEA6D9D6611FF
Windows 8 Enterprise (x86) - DVD (Chinese-Simplified)
文件名: cn_windows_8_enterprise_x86_dvd_917682.iso
SHA1: 951565D8579C5912FB4A407B3B9F715FBDB77EFE
Windows 8 Enterprise (x64) - DVD (Chinese-Simplified)
文件名: cn_windows_8_enterprise_x64_dvd_917570.iso
SHA1: 1280BC3A38A7001FDE981FA2E465DEB341478667
激活方式
目前流行 KMSmicro 激活,写此文时的最新版本是 4.0,下载地址网上搜之(或联系我)。