【Typecho】joe主题编辑器增加wxfans插件快捷加密文章内容按钮

宗同学

2024-11-29 / 0 评论 / 164 阅读 / 正在检测是否收录... / 搜一下

11/29

温馨提示：

本文最后更新于2025年02月25日，已超过64天没有更新，若内容或图片失效，请留言反馈。

各位老宝贝，我又来了，我还是你们的宗同学，今天给大家带来的教程是给编辑器增加个快捷按钮。
　我们都知道啊，wxfans插件使用之后要输入代码才能够使用加密，但是又懒得手动输入，我想直接给它增加到编辑器里面，就像下面这个图片显示的一样：

好了，废话不多说，直接进入正题：

新增文件

在joe主题目录下的 assets/js/ 下增加一个js文件夹： joe-edit-button.js 当然也可以是其他的名字，但是要.js后缀结尾哈，就像下图这样，当然放的位置也可以是网站的根目录，但是站长不建议这样搞，不然到时候你看见根目录文件多了，你又忘记这个文件是干啥用的，你就删掉了，所以还是要统一点，js文件就放在Js文件里面吧！

添加代码

创建好文件之后我双击打开它，在 joe-edit-button.js 添加下面的代码：

document.addEventListener('DOMContentLoaded', () => {
    var wechat_btn = '<div class="cm-tools-item" title="公众号圈粉"><svg t="1705652256817" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1495" width="20" height="20"><path d="M670.023548 368.251062c10.259668 0 20.38119 0.787946 30.53648 1.902326-27.361161-127.435391-163.538657-222.082004-319.066873-222.082004-173.813674 0-316.202639 118.450762-316.202639 268.934079 0 86.831624 47.341215 158.128437 126.509299 213.512838l-31.583323 95.101985 110.560048-55.386448c39.524179 7.748475 71.228251 15.809057 110.716614 15.809057 9.930163 0 19.771299-0.451278 29.473265-1.187035-6.123464-21.147646-9.771551-43.274596-9.771551-66.340941C401.265478 480.380862 519.85234 368.251062 670.023548 368.251062L670.023548 368.251062zM500.047272 282.537911c23.887037 0 39.591717 15.70468 39.591717 39.470967 0 23.679305-15.705704 39.542598-39.591717 39.542598-23.627117 0-47.410799-15.863293-47.410799-39.542598C452.636472 298.17403 476.366943 282.537911 500.047272 282.537911L500.047272 282.537911zM278.751167 361.551476c-23.731494 0-47.619554-15.863293-47.619554-39.542598 0-23.76731 23.88806-39.470967 47.619554-39.470967s39.488363 15.636119 39.488363 39.470967C318.23953 345.688183 302.482661 361.551476 278.751167 361.551476L278.751167 361.551476zM278.751167 361.551476" fill="#bfbfbf" p-id="1496"></path><path d="M958.709483 614.70822c0-126.403898-126.543068-229.42832-268.652669-229.42832-150.485363 0-268.915659 103.09503-268.915659 229.42832 0 126.753869 118.498858 229.462089 268.915659 229.462089 31.514761 0 63.272046-7.886621 94.89016-15.809057l86.690408 47.567365-23.76731-79.048357C911.351895 749.174748 958.709483 686.041872 958.709483 614.70822L958.709483 614.70822zM602.842473 575.132876c-15.70468 0-31.618115-15.633049-31.618115-31.618115 0-15.739473 15.914458-31.583323 31.618115-31.583323 24.010857 0 39.576367 15.84385 39.576367 31.583323C642.41884 559.499827 626.853329 575.132876 602.842473 575.132876L602.842473 575.132876zM776.78099 575.132876c-15.565511 0-31.445176-15.633049-31.445176-31.618115 0-15.739473 15.809057-31.583323 31.445176-31.583323 23.801079 0 39.576367 15.84385 39.576367 31.583323C816.356334 559.499827 800.581046 575.132876 776.78099 575.132876L776.78099 575.132876zM776.78099 575.132876" fill="#bfbfbf" p-id="1497"></path></svg></div>';
    $(".cm-tools").append(wechat_btn);
    
    $(".cm-tools .cm-tools-item").click(function(){
        if($(this).attr("title") == '公众号圈粉') {
            // 该行在编辑器内插入内容
            $(".cm-mainer .cm-scroller .cm-content .cm-activeLine").append('<@!--wxfans start-->请输入加密内容<@!--wxfans end-->');
            $('.cm-modal').removeClass('active');
        }
        else {
            $(".cm-modal__wrapper-footer--confirm").removeAttr('style');
            $('.custom_button').remove();
        }
    });
});

注意：我在<@!--wxfans start-->请输入加密内容<@!--wxfans end-->这个代码前面加了@符号，因为这个是一个注释，不加的话你在写文章的时候，按了按钮之后只会出现文字（因为注释被解析了）要让插件加密生效的话就按了按钮之后出现代码之后去掉@符号即可！插件代码使用的方法的话请参照：传送门

修改后的代码（可以直接输出文本）

隐藏内容，扫码公众号查看，发【验证码】获验证码

代码引入

js文件引入方法1： <script src="<?php _getAssets('assets/js/joe-edit-button.js'); ?>"></script>

方法2： <script src="https://xxx.xxxxxx.com/assets/js/joe-edit-button.js"></script>

本地资源建议用方法1，自定义cdn地址的用方法2，用自定义cdn地址又想用方法1的话，上传文件到cdn托管文件，目录要和方法1目录一致。

1.1 在 functions.php 里引入新增的js代码（joe-edit-button.js），具体看图：文件目录；usr/themes/Joe/functions.php

1.2 在core/factory.php里面引入新增的js代码，具体看图：

1.3 在public/include里引入新增的js代码，具体看图：

总结

引入完成后打开你的后台进行文章撰写的时候就可以看到新增的图标了，还有一个细节，如果你按照我这个引入代码的话，那你不要使用后台的自定义cdn静态地址。
yanshi
　要的话请上传新增的文件到cdn托管的文件里面，如果你使用本站的cdn静态加速地址的话，直接引入就行了，因为本站已经上传新增Js文件到cdn加速地址文件夹了。