OnePartnerTypesettingPlus，无需开通VIP功能——微信公众平台直接插入OnePartner模板即可，第一步无需开通VIP：安装OnePartnerchrome插件第二步第三步：安装chromeGreaseMonkey扩展第三步：安装OnePlusplus脚本功能两个OnePan模板市场可以直接复制模板下面记录一下这次GreaseMonkey脚本开发的思路，定位是高级前端工程师，也开始发一些文章。在这个过程中，我发现我微信文章的排版不如其他的公众号。内容也是如此。除了让内容本身信息丰富、有用和有趣之外，我们还需要为用户提供高价值的布局。那么，如何排版好看的微信文章呢？工具探索，然后搜索微信排版工具。网站上有很多排版工具。1.易伴使用方法：到易伴网站下载插件，安装在您常用的浏览器中即可。在此浏览器登录公众号后台即可使用。安装完成后，打开公众号，如下图所示：2.美版编辑助手使用方法：到官网下载插件，在常用浏览器中安装即可。在此浏览器登录公众号后台即可使用。安装完成后，打开公众号，如下图所示：然后以这两个为例，研究下实现过程。微信富文本编辑器是通过微信控制台打开的，我们可以看到微信使用的富文本编辑器是ueditor，我们可以直接在控制台修改html，修改完成后可以预览。由此我们可以知道，我们可以使用html来排版文章，但是不能使用css。我们必须使用内联样式快速插入来实现它。以插件为例，研究其实现方法；当你点击它时，你可以直接将它插入到编辑器中。既然知道你用的是ueditor，那我们就去官网找api看看有没有相关的api？我们可以通过官网找到插入html的方法，在当前光标位置插入html内容ue.execCommand('inserthtml','hello!');vip当然不是免费的，很多模板都是需要激活vip的。点击这些vip模板，会弹出一个窗口让你开通vip。这么小的vip图标能不能难倒我们的前端工程师呢？获取$(function(){setTimeout(()=>{conststyle=document.createElement('style');constheads=document.querySelector('head');style.setAttribute('type','text/css');style.innerHTML=`.buy-vip-dialog-v3{display:none!important;}.mpa-dialog-parent-no-scroll{overflow:auto!important;}`;heads.append(style);},1000);})$(文档).off('click','.material-item.cover').on('click','.material-item.cover',e=>{e.stopPropagation();consthtml=$(e.target).parent().find('.html-container').html();window.UE.getEditor('js_editor').execCommand('insertHTML',html);});setTimeout是在脚本末尾插入样式，隐藏模板市场的弹窗，直接复制使用剪贴板apievent.clipboardData.setData()这是一个现代浏览器支持的api的简单示例文档.addEventListener('copy',function(e){e.clipboardData.setData('text/plain','foo');e.preventDefault();//阻止浏览器默认事件});通过以上代码，可以使用JavaScript修改剪贴板的内容，需要注意的是防止浏览器默认事件document.getElementById("copyBtn").onclick=function(){document.execCommand('copy');}然后需要触发复制最终代码$(document).off('click','.copy').on('click','.copy',function(e){e.stopImmediatePropagation()consttext=$(this).parents('.style-waterfall-inner').find('.detail').html()console.log(text);//复制触发器document.addEventListener('copy',functioncopyCall(e){e.preventDefault();e.clipboardData.setData('text/html',text);e.clipboardData.setData('text/plain',text);document.removeEventListener('copy',copyCall);});document.execCommand('copy');alert('Copysuccessful');$('.pay-tips-dialog').hide()});开发总结有同学认为这个工具的开发非常简单，只需要几行代码就可以搞定。事实上，情况并非如此。我至少花了我两天时间。技术研究，微信富文本编辑器插入API技术研究，剪贴板复制API。换个角度想，有个问题困扰了我很久。我点击防止易伴插件的弹窗问题，我是从防止浏览器事件的角度来考虑的：使用event.stopImmediatePropagation()方法，可以用来停止冒泡，防止handleron正在运行的当前元素。使用此方法后，其他处理程序将不会执行。易班插件是用react实现的，然后去看了react的合成事件，加上调试，这里耽误了很久。换个角度想，从隐藏弹窗的角度一下子解决了。发展还是要多从几个角度去思考，换个角度可能会有所不同。以上就是本文的全部内容。希望这篇文章对您有所帮助。大家也可以参考我之前的文章或者在评论区交流一下自己的想法和经验。欢迎一起探索前端。
