最近接点外快常用到135公众编辑器,由于实在不想各种功能付费,尝试捣鼓一下,这里分享下一些流程作为学习用途。
文章上限
要知道135编辑器它提供的上限非会员2篇,即使是会员也是5篇,为什么呢?这时候打开devTool在newwork中监听网络请求,操作添加文章按钮,这时与我想象的方案不一致,看起来它并没有同步数据,也就是说数据是缓存在本地;这就好办了。
对滴,使用了LocalStorage持久储存,这就为什么可保存的篇数最大上限5篇,要知道MDN中LoaclSorage描述实际是有储存5m上限(如果你想测试你当前游览器上限可以前往:http://dev-test.nemikor.com/web-storage/support-test), 回过头来微信文章上限是600字数,假设满中文600字需1200k,5000 / 1200后也就在满600字下最多储存4篇,当然编辑未满情况下,理论满勉勉强强可以达到:d ?
实际上不知为何不选择使用indexedDb呢?都已经下面注释让用户使用谷歌游览器。
现在唯一线索是”__cache_articles__“字段,这时候还是得依靠devTool爸爸。
打开newwork标签,通过全局资源代码检索”__cache_articles__“,看到来自app.js文件。
当然直接查看dom绑定事件也是可以找到,但是作者使用工具包webpack之类的东西,对代码一定混淆,如图:
从指向来看,你只会得到下面没有任何用处代码片段,但是!你别忘了这是由工具包生成的代码包,也就说包含业务逻辑以及util之类的东西。
function Jr(e, t, n, c) { if (Qr) { var r = Kn , i = t; t = i._wrapper = function(e) { if (e.target === e.currentTarget || e.timeStamp >= r || e.timeStamp <= 0 || e.target.ownerDocument !== document) return i.apply(this, arguments) } } Ur.addEventListener(e, t, oe ? { capture: n, passive: c } : n) }
在devtool编辑器内搜索字段,会很快找到
saveArticles与setStore,其中setStore函数就是线索,在函数下有一个命名为addArticle名字特别显眼,这不就是与我们添加文章标签功能相对?
attrs: { type: "file-add", title: "新建", shrink: t.shrink }, on: { click: t.addArticle }
就是它,在on内addArticle事件
注意红圈则是数量的业务判断
state: { articles: [], currentIndex: -1, maxCount: 2, vip: !1, shrink: !1 },
现在你只需要在Sources中修改maxCount值来更改无限上限,当然因为持久储存缺陷即使上限解除,容纳也无法超出5M。
现在距离解除还差一点点,因为函数还未触发更新,在一堆混淆.js中找到setUserVip函数,通过console中执行:
setUserVip(1000)
解除:D 恭喜💐 ,另外忘记说了,会话结束就需要重新设置。
解决长图生成
一篇文章已经写好了,但是多张生成出现”频繁生成“限制,先监听网络,操作导出按钮会触发downloads/htmlToImage请求,该html转换是后台来完成,再多次触发后立即出现频繁提示,先从body字段下手,基本字段无关。
继续观察,headers协议头携带了cookie,唯一的客户端身份,从set-cookie取出在游览器客户端中对比cookie-key,修改”SERVERID“内的值即可。
此时服务端认为你是另一名用户。
水印选项限制
在network中搜索’超清‘,会找到业务逻辑代码在Vue_pdf.js文件下。
注意其中的vip_user和vip_roles, 条件是vip_uset=true,vip_roles=[12].由于挂载在window, 也是在控制台中直接执行即可。