这个油猴脚本也许对你微信排版有帮助

壹伴排版 Plus，免开 vip

功能一

在微信公众平台可直接插入壹伴的模板，免开 vip

功能二

下文是记录这个油猴脚本开发的思考

前言

之前我注册了一个微信公众号“JS酷”，定位是前端工程师进阶，也开始发了一些文章，在这个过程中我发现我的微信文章排版没有其他公众号好看，这是一个看脸的时代，颜值很重要，运营公众号做内容也是如此。除了要让内容本身有料、有用、有趣之外，我们还要给用户提供一个高颜值的排版。那么，如何排版出一个好看微信文章呢？

工具探索

然后搜索了下微信排版工具，网站有一大堆排版工具

1.壹伴

使用方法： 直接上网站下载插件并安装在自己平时用的浏览器即可。平时在该浏览器上登录公众号后台即可使用。装完以后打开公众号如下图：

这个油猴脚本也许对你微信排版有帮助

2. 美编助手

使用方法： 直接上网站下载插件并安装在自己平时用的浏览器即可。平时在该浏览器上登录公众号后台即可使用。装完以后打开公众号如下图：

这个油猴脚本也许对你微信排版有帮助

那么就以这 2 个为例，研究其实现过程

微信富文本编辑器

这个油猴脚本也许对你微信排版有帮助

通过微信控制台打开，我们可以看到微信使用的富文本编辑器是ueditor，我们可以直接在控制台修改 html ，修改完成后就可以预览了，由此可以得知我们可以用 html 来排版文章，但是我们不能使用 css，必须使用内联 style

快捷插入实现

接下来以壹伴微信编辑器插件为例，研究下其实现方式；
点击的时候就可以直接插入编辑器中，既然知道了使用的是 ueditor ，我们可以去官网找 api，看看是否有相关 api？

这个油猴脚本也许对你微信排版有帮助

我们可以通过官网找到插入 html 的方法

在当前光标位置插入 html 内容

ue.execCommand('inserthtml', '<span>hello!</span>');

免开 VIP

当然也不是都免费的，很多模板都需要开通 vip

这个油猴脚本也许对你微信排版有帮助

点击这些 vip 模板就会有个让你开 VIP 的弹窗。

这个油猴脚本也许对你微信排版有帮助

那这个小的 vip 图标就可以难到我们前端工程师吗？一个 JS 脚本搞定

$(function() {
        setTimeout(() => {
            const style = document.createElement('style');
            const heads = 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);
    })

    $(document)
        .off('click', '.material-item .cover')
        .on('click', '.material-item .cover', e => {
            e.stopPropagation();
            const html = $(e.target)
                .parent()
                .find('.html-container')
                .html();
            window.UE.getEditor('js_editor').execCommand('insertHTML', html);
        });

setTimeout 是为了在脚本最后插入样式，将弹窗隐藏掉

模板市场直接复制

使用剪切板 api event.clipboardData.setData() 这个是现代浏览器都支持的 api

简单示例

document.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()
        const text = $(this).parents('.style-waterfall-inner').find('.detail').html()
        console.log(text);
        // 复制触发
        document.addEventListener('copy', function copyCall(e) {
            e.preventDefault();
            e.clipboardData.setData('text/html', text);
            e.clipboardData.setData('text/plain', text);
            document.removeEventListener('copy', copyCall);
        });
        document.execCommand('copy');
        alert('复制成功');
        $('.pay-tips-dialog').hide()
    });