Wangeditor

背景在网上找了一些wangEditor编辑器实现格局刷的代码，然而都是基于v4版本的，齐全不适用于v5版本，所以只能依据文档和源码，本人实现了一个繁难版本的 实现第一步注册新菜单（https://www.wangeditor.com/v5...）格局刷外部次要实现，点击格局刷时保留选中文字的款式 // FormatterBtn.tsx import type { IButtonMenu, IDomEditor } from '@wangeditor/editor';import { SlateEditor } from '@wangeditor/editor';class FormatterBtn implements IButtonMenu { title = '格局刷'; tag = 'button'; // JS 语法 iconSvg = '<svg t="1665739261235" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6325" width="200" height="200"><path d="M1024 1012.48a2119.68 2119.68 0 0 1-45.312-409.6v-228.864a145.92 145.92 0 0 0-146.944-146.176h-128v-128a100.096 100.096 0 0 0-99.84-99.84h-182.016a100.608 100.608 0 0 0-100.352 99.84v128h-128a145.92 145.92 0 0 0-145.664 146.176v228.608a2139.904 2139.904 0 0 1-45.312 409.6L0 1024h1024zM421.888 99.84h182.016v128h-182.272v-128z m274.432 742.4l3.328-146.944a51.2 51.2 0 0 0-25.6-43.52 48.896 48.896 0 0 0-51.2 0 51.2 51.2 0 0 0-25.6 43.52l-2.304 121.344-4.352 69.12L588.8 921.6h-185.856a532.992 532.992 0 0 0 23.296-160.256 51.2 51.2 0 1 0-100.096 0A420.352 420.352 0 0 1 296.448 921.6H120.832l2.304-13.824a2033.92 2033.92 0 0 0 25.6-307.2v-39.168h728.576v67.072a2063.104 2063.104 0 0 0 25.6 281.6l2.304 13.824h-216.064zM877.312 460.8H148.48v-91.392a45.568 45.568 0 0 1 45.312-40.96h642.56a45.312 45.312 0 0 1 40.96 45.312z" p-id="6326"></path></svg>'; // 获取菜单执行时的 value ，用不到则返回空 字符串或 false getValue(): string | boolean { return ''; } // 菜单是否须要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false isActive(editor: IDomEditor & { copyStyleObject: any }): boolean { return !!editor?.copyStyleObject; } // 菜单是否须要禁用（如选中 H1 ，“援用”菜单被禁用），用不到则返回 false isDisabled(editor: IDomEditor): boolean { return !editor.getSelectionText(); } // 点击菜单时触发的函数 exec(editor: IDomEditor & { copyStyleObject: any }) { if (this.isDisabled(editor)) { return; } editor.copyStyleObject = SlateEditor.marks(editor); }}export default FormatterBtn;第二步格局刷插入到菜单中，文档中应用insertKeys能够插入对应地位，我在代码中尝试没失效，只能采纳笨办法，重写编辑器的菜单，你们能够再尝试下 ...

前言wangEditor v5 正式版公布在即，为了验证它的扩展性，我开发了几个罕用的第三方插件。本文介绍一下 formula 插件的设计和应用。 插入数学公式要应用 LateX 语法，渲染公式须要依赖工具 KateX。如 c = \pm\sqrt{a^2 + b^2} 将渲染为下图的公式。 PS：本插件不依赖于任何框架，JS Vue React 等任何框架都能够失常应用。 应用首先要理解 wangEditor v5 最根本的装置和应用，可参考文档。而后再查阅 wangEditor-plugin-formula 插件的文档。 装置和注册装置 katex 和 @wangeditor/plugin-formula yarn add katexyarn add @wangeditor/plugin-formula复制代码注册到 wangEditor import { Boot } from '@wangeditor/editor'import formulaModule from '@wangeditor/plugin-formula' // 注册。要在创立编辑器之前注册，且只能注册一次，不可反复注册。Boot.registerModule(formulaModule)复制代码此时 wangEditor 就曾经具备了显示公式的能力，但还须要配置菜单：插入公式，编辑公式。 配置菜单配置工具栏，把 insertFormula 和 editFormula 插入到 index 指定的地位。 import { IToolbarConfig } from '@wangeditor/editor'// 工具栏配置const toolbarConfig: Partial<IToolbarConfig> = { insertKeys: { index: 0, // 自定义 keys: [ 'insertFormula', // “插入公式”菜单 // 'editFormula' // “编辑公式”菜单 ], }, // 其余...}复制代码当然，editFormula 也能够配置到编辑器的悬浮菜单中 ...

作为《DNS攻击防范科普系列》的最后一篇，今天我们来好好聊聊DNS劫持。先回顾一下DNS劫持的概念？DNS劫持即通过某种技术手段，篡改正确域名和IP地址的映射关系，使得域名映射到了错误的IP地址，因此可以认为DNS劫持是一种DNS重定向攻击。DNS劫持通常可被用作域名欺诈，如在用户访问网页时显示额外的信息来赚取收入等；也可被用作网络钓鱼，如显示用户访问的虚假网站版本并非法窃取用户的个人信息。那DNS劫持到底有多大的危害呢？我们来看两个真实的大事件： DNS劫持大事记事件1、《AWS route53 BGP路由泄漏事件》事件危害：据不完全统计，DNS劫持导致两个小时内有多个用户的以太坊钱包被转账清空，共计至少13000美元的资产被黑客盗取。事件还原： 事件发生在2018年4月24日。黑客针对四段分配给AWS，本应作为AWS route53 DNS服务器服务地址的IP空间(205.251.192.0/23, 205.251.194.0/23, 205.251.196.0/23, 205.251.198.0/23)发布了虚假的BGP路由，导致在BGP泄漏的两个小时期间，本应该AWS route53 DNS服务器的DNS查询都被重定向到了黑客的恶意DNS服务器。且黑客DNS劫持的目标十分明确，恶意DNS服务器只响应对myetherwallet.com的查询，其他域名的查询均返回SERVFAIL。一旦用户没有注意“网站不安全”的提示而访问myetherwallet.com登录自己的以太坊钱包，黑客就可以轻易获取用户的私钥进而窃取用户的数字货币资产。正常情况的DNS，和劫持后的DNS的情况，请参考如下攻击示意图（来自cloudflare博客）：正常情况： BGP泄漏后： 事件2、《巴西银行钓鱼事件》事件危害：黑客诱导原本想访问正常银行网站的受害者访问到钓鱼网站，并恶意窃取受害者的银行账目密码信息。事件还原：事件发生在2018年。黑客利用D-Link路由器的漏洞，入侵了至少500个家用路由器。黑客入侵后更改受害者路由器上的DNS配置，将受害者的DNS请求重定向到黑客自己搭建的恶意DNS服务器上。黑客入侵后更改受害者路由器上的DNS配置，将受害者的DNS请求重定向到黑客自己搭建的恶意DNS服务器上，最终诱导原本想访问正常银行网站的受害者访问到钓鱼网站，并恶意窃取受害者的银行账目密码信息。 图片参考：bankinfosecurity 上面两个案例都是触目惊心啊。接下来我们来介绍一下黑客们是怎么做到DNS劫持的？ DNS解析原理介绍劫持原理前，你需要先了解典型的DNS解析流程。 客户端发起递归DNS请求，本地递归DNS(大多数情况下为运营商DNS)或者公共DNS通过迭代查询请求多级的DNS权威服务器，并最终将查询结果返回给客户端。可以看到，一次完整的DNS查询：• 链路长。查询过程包含多次，多级的网络通信。• 参与角色多。查询过程涉及客户端，DNS递归服务器，权威服务器等角色。 在一次完整DNS查询链路的各个环节，其实都有可能被DNS劫持，下面的章节会逐一分析各种类型的DNS劫持。 DNS劫持分类我们按照客户端侧--递归DNS服务器--权威DNS服务器的路径，将DNS劫持做如下分类： 【一、本地DNS劫持】客户端侧发生的DNS劫持统称为本地DNS劫持。本地DNS劫持可能是： 黑客通过木马病毒或者恶意程序入侵PC，篡改DNS配置(hosts文件，DNS服务器地址，DNS缓存等)。黑客利用路由器漏洞或者破击路由器管理账号入侵路由器并且篡改DNS配置。一些企业代理设备（如Cisco Umbrella intelligent proxy）针对企业内部场景对一些特定的域名做DNS劫持解析为指定的结果。【二、DNS解析路径劫持】DNS解析过程中发生在客户端和DNS服务器网络通信时的DNS劫持统一归类为DNS解析路径劫持。通过对DNS解析报文在查询阶段的劫持路径进行划分，又可以将DNS解析路径劫持划分为如下三类： • DNS请求转发通过技术手段(中间盒子，软件等)将DNS流量重定向到其他DNS服务器。案例： ![图片来自《巫俊峰, 沈瀚. 基于旁路抢答机制的异网DNS管控实践. 电信技术[J]》](https://upload-images.jianshu... • DNS请求复制利用分光等设备将DNS查询复制到网络设备，并先于正常应答返回DNS劫持的结果。 案例：一个DNS查询抓包返回两个不同的应答。 • DNS请求代答网络设备或者软件直接代替DNS服务器对DNS查询进行应答。 案例：一些DNS服务器实现了SERVFAIL重写和NXDOMAIN重写的功能。 【三、篡改DNS权威记录】篡改DNS权威记录 我们这里指的黑客非法入侵DNS权威记录管理账号，直接修改DNS记录的行为。 案例：黑客黑入域名的管理账户，篡改DNS权威记录指向自己的恶意服务器以实现DNS劫持。 黑客黑入域名的上级注册局管理账户，篡改域名的NS授权记录，将域名授权给黑客自己搭建的恶意DNS服务器以实现DNS劫持。 黑客黑入域名的上级注册局管理账户，篡改域名的NS授权记录，将域名授权给黑客自己搭建的恶意DNS服务器以实现DNS劫持。（以上参考fireeye博客） DNS劫持应对策略DNS劫持在互联网中似乎已经变成了家常便饭，那么该如何应对各种层出不穷的DNS劫持呢？如果怀疑自己遇到了DNS劫持，首先要做的事情就是要确认问题。 如何确认DNS劫持查看路由器DNS配置是否被篡改。可以使用一些全网拨测的工具确认DNS劫持和其影响范围。在此隆重介绍一下，阿里的DNS域名检测工具于国庆后已经正式上线，地址是：https://zijian.aliyun.com/#/domainDetect  通过工具查看回复DNS应答的DNS服务器，确认DNS解析是否被重定向。• whatismydnsresolver http://whatismydnsresolver.com/移动端可以安装一些DNS相关的测试工具进行排查：• 安卓 ping & dns• IOS IOS iNetTools DNS劫持防范• 安装杀毒软件，防御木马病毒和恶意软件；定期修改路由器管理账号密码和更新固件。• 选择安全技术实力过硬的域名注册商，并且给自己的域名权威数据上锁，防止域名权威数据被篡改。• 选择支持DNSSEC的域名解析服务商，并且给自己的域名实施DNSSEC。DNSSEC能够保证递归DNS服务器和权威DNS服务器之间的通信不被篡改。阿里云DNS作为一家专业的DNS解析服务厂商，一直在不断完善打磨产品功能，DNSSEC功能已经在开发中，不日就会上线发布。• 在客户端和递归DNS服务器通信的最后一英里使用DNS加密技术，如DNS-over-TLS，DNS-over-HTTPS等。 ...

网上已经有一篇类似的文章wangEditor富文本编辑器+react+antd的使用, 当然我也参考了他的写法, 然后实现了我到需求, 现在拿出来分享分享版本antd: v3.12.1wangEditor: v3.1.1我们用编辑器, 大部分情况是在表单中使用, 而antd的表单系统, 一般也离不了 form.getFieldDecorator(id, options),1 安装很简单 npm install wangeditor (注意,全是小写)2 和getFieldDecorator绑定<Form.Item> {form.getFieldDecorator(‘YourInputName’, { // …一些属性设置 })(<div ref={node => this.node = node} />)}</Form.Item>ref={node => this.node = node}这段代码,eslint会划红线,理由是没有返回值,本人能力有限,不知道怎么解, 还请大神指点指点,如果你没有eslint,那就不用管它3 组件部分// 引入wangeditorimport WangEditor from ‘wangeditor’;// …componentDidMount() { // 这个onChange事件, 是getFieldDecorator绑定的时候带入的, 他会取代被绑定的组件的onChange事件 // 一般和getFieldDecorator绑定过的,都用onChange来传值 // value也是getFieldDecorator绑定过来的, const { onChange, value } = this.props; const editor = new WangEditor(this.node); editor.customConfig.onchange = html => { // 传递html onChange(html); } editor.create(); // 设置初始内容 editor.txt.html(value);}好了,已经绑定好了,很简单吧,getFieldDecorator在使用的时候, 有许多注意的地方, 初学者可能会犯错,多看看官方的文档, 多然后自己摸索吧! ...