给微信公众号新建图文消息时可添加查看/编辑源代码的功能

原创 野人  2020-03-01 09:01  阅读 35 次

小编记得,在很早之前编辑微信公众号的图文消息可以直接编辑/查看源代码,不过后来不知道什么原因,微信公众号就取消了这个功能,所以现在小编只能通过其他浏览器插件来实现编辑源代码,由于小编使用的是一款叫新媒体管家的一款浏览器插件,尽管插件提供了很多功能,但是小编仅仅就需要编辑源代码这个功能,而且每次开启新媒体管家浏览器插件进入微信公众号编辑图文消息的时候特别的慢/卡(这也能理解,毕竟提供了非常多的功能/电脑卡),所以蹭着空闲时间,就琢磨了下这个编辑源代码的功能是怎么实现的,真的,没去研究真的不敢相信,code原来竟然这么简单,不敢相信啊!

现在给大家分享下,给微信公众号图文消息,添加编辑源代码功能的code:


javascript:(function(){let editorIframe=document.getElementById('ueditor_0').contentDocument||document.getElementById('ueditor_0').document;let editorBody=editorIframe.querySelector('.view');let js_editor_area=document.querySelector('.js_editor_area');let split_line=document.querySelector('.split_line');let textarea=document.createElement('textarea');textarea.setAttribute("id","newTextarea");textarea.placeholder="请输入你的html代码";textarea.style="width:100%;height:420px;display:none";js_editor_area.insertBefore(textarea,split_line);let js_toolbar_0=document.querySelector('#js_toolbar_0');let div=document.createElement('div');div.setAttribute("class","edui-box edui-button");div.setAttribute("id","J_source");div.style.width="22px";div.style.height="22px";div.style.background="url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAJCAYAAADZ9rdLAAAARElEQVR42mNgGPIgtHX9f3Q2iIZhdD66OMmG47MUG40TGBWu+o+MkcXR2bhovIYTyybZcNXwmf+JZWOjnUKa/jMMGwAA1lli9Jai7PsAAAAASUVORK5CYII=) no-repeat 50% 50%";div.style.cursor="pointer";js_toolbar_0.appendChild(div);editorBody.innerHTML="";let viewSoureCode=false;div.addEventListener('click',()=>{viewSoureCode=!viewSoureCode;document.querySelector('#newTextarea').style.display=viewSoureCode?'block':'none';document.querySelector('#edui1_iframeholder').style.display=viewSoureCode?'none':'block';if(!viewSoureCode)editorBody.innerHTML=document.querySelector('#newTextarea').value;else document.querySelector('#newTextarea').value=editorBody.innerHTML})}())

将上面的代码保存为到浏览器书签,然后打开微信公众号新建图文消息页面,再去点击刚才保存的浏览器书签,就可以出现编辑源代码的功能了,效果如下:

PS:因为小编就自己使用,像没有添加代码高亮功能,css样式也没有做,所以想要更好的体验可以去下载新媒体管家这个插件,毕竟人家是专业做微信公众号这方面,里面还有很多实用的小功能,有兴趣的自己去了解哈。

本文地址:http://www.yerenwz.com/1476.html
版权声明:本文为原创文章,版权归 野人 所有,欢迎分享本文,转载请保留出处!

发表评论