【小记录】更新编辑器按钮js代码

宗同学
2025-03-17 / 0 评论 / 89 阅读 / 正在检测是否收录... / 搜一下
温馨提示:
本文最后更新于2025年04月03日,已超过28天没有更新,若内容或图片失效,请留言反馈。

js代码更新

之前给大家说的在joe主题编辑器添加按钮,传送门:【Typecho】joe主题编辑器增加wxfans插件快捷加密文章内容按钮 这次添加了两个按钮,网某云新版歌单和单首歌曲,主要是引入了meting.js文件,配合Aplayer.js就可以解决原joe主题获取不了音乐的Bug。


m8d08cef.png


joe-edit-button.js更新
// 优化后的代码:
document.addEventListener('DOMContentLoaded', () => {
    // 统一按钮配置
    const buttons = [
        {
            title: '公众号圈粉',
            icon: `<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>`, // 保持原有SVG代码
            content: '&lt;!--wxfans start--&gt;请输入加密内容&lt;!--wxfans end--&gt;'
        },
        {
            title: '新版单首网易云',
            icon: `<svg t="1742209614129" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6440" width="30" height="30"><path d="M 837.766 364.816 c -50.8284 -54.1074 -111.313 -91.1997 -187.245 -98.7056 c -7.3237 -0.728725 -18.9833 -5.02822 -20.4042 -9.98353 c -6.59494 -23.064 -12.8255 -46.7841 -14.2831 -70.5404 c -1.63964 -26.5986 20.3678 -44.7435 46.7478 -39.4241 c 16.7243 3.38857 32.392 12.3883 48.2779 19.457 c 10.9673 4.88245 20.9872 12.3883 32.3188 15.9225 c 27.4727 8.48961 53.3788 -7.7245 58.5894 -35.7804 c 4.40882 -23.6837 -4.40882 -42.9219 -22.1535 -58.1522 c -28.8575 -24.7762 -62.998 -37.7482 -100.054 -44.7435 c -70.9775 -13.4083 -152.74 38.7681 -169.648 108.908 c -8.45318 35.0885 -1.7125 68.7549 10.4572 101.511 c 6.48563 17.5259 1.96755 24.5946 -16.0319 30.8615 c -118.308 41.3188 -182.508 155.436 -154.49 276.075 c 16.5056 71.1232 59.4641 121.733 131.862 138.604 c 74.4393 17.3438 136.818 -7.94311 182.62 -69.1919 c 37.0555 -49.5168 39.1322 -105.519 23.9754 -163.197 c -7.94311 -30.2422 -17.198 -60.1564 -26.6714 -92.9479 c 5.57476 1.09309 7.39653 1.20239 9.03612 1.78537 c 125.486 45.4361 188.959 183.858 125.232 318.813 c -63.9091 135.325 -211.911 183.348 -344.362 155.072 c -166.259 -35.5254 -278.955 -210.93 -245.286 -377.62 c 23.6108 -116.924 91.5644 -198.319 200.253 -246.342 c 8.27102 -3.68006 16.7971 -7.25083 24.2667 -12.2789 c 15.5945 -10.5301 24.8857 -25.6876 23.064 -44.6341 c -1.9311 -19.9306 -11.8782 -37.9297 -32.1367 -42.0112 c -16.2141 -3.27924 -36.0353 -3.68006 -50.7191 2.69627 c -166.223 72.1072 -260.848 197.994 -272.869 379.884 c -18.6555 282.566 246.128 504.023 521.296 440.882 c 171.833 -39.4241 293.167 -182.179 303.986 -330.804 c 7.10506 -97.2478 -18.619 -182.763 -85.6253 -254.109 Z m -309.05 234.651 c -39.0595 3.35212 -71.2327 -23.8295 -77.6089 -65.5484 c -11.1131 -72.5441 19.8943 -127.162 85.4791 -151.94 c 12.6069 -4.77315 18.1815 -2.91492 21.9347 10.858 c 8.74466 32.1003 19.4934 63.6176 28.6751 95.6091 c 3.13347 10.9309 3.97156 22.5539 5.8298 33.8857 c -0.218618 42.9219 -25.5779 73.8196 -64.3095 77.1353 Z" fill="#d81e06" p-id="6441"></path></svg>`, // 保持原有SVG代码
            content: '&lt;meting-js server="netease" type="song" id="这里填音乐id"&gt;&lt;/meting-js&gt;'
        },
         {
            title: '新版歌单网易云',
            icon: `<svg t="1742211828254" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7669" width="30" height="30"><path d="M106.666667 213.333333A64 64 0 0 1 170.666667 149.333333h682.666666a64 64 0 0 1 0 128H170.666667A64 64 0 0 1 106.666667 213.333333z m724.992 131.157334c-22.869333-5.674667-45.994667-3.626667-62.890667 5.461333-17.152 9.130667-26.88 24.448-26.88 42.112v286.293333c-13.013333-13.056-39.082667-30.72-78.165333-30.72-71.936 0-130.389333 55.722667-130.389334 124.16 0 68.522667 58.453333 124.202667 130.389334 124.202667 71.893333 0 130.346667-55.68 130.346666-124.16v-298.282667l118.869334 29.013334c8.448 2.218667 22.272 3.114667 30.464 3.114666 48.426667 0 59.264-32.341333 59.264-72.234666 0-26.026667-25.472-48.682667-59.264-56.917334l-111.786667-32.042666zM170.666667 448a64 64 0 0 0 0 128h405.333333a64 64 0 0 0 0-128H170.666667z m0 298.666667a64 64 0 0 0 0 128h234.666666a64 64 0 0 0 0-128H170.666667z" p-id="7670"></path></svg>`, // 保持原有SVG代码
            content: '&lt;meting-js server="netease" type="playlist" id="这里填音乐id"></meting-js&gt;'
        }
    ];

    // 统一创建按钮
    function createEditorButton(config) {
        const $toolbar = $(".cm-tools");
        if ($toolbar.length === 0) return;

        const button = $(
            `<div class="cm-tools-item joe-dynamic-btn" title="${config.title}">
                ${config.icon}
            </div>`
        );
        
        // 防止重复添加
        if (!$toolbar.find(`[title="${config.title}"]`).length) {
            $toolbar.append(button);
        }
    }

    // 统一事件处理
    function handleButtonClick(e) {
        const title = $(this).attr('title');
        const config = buttons.find(btn => btn.title === title);
        if (!config) return;

        // 获取编辑器实例(根据实际编辑器调整)
        const editor = document.querySelector('.cm-content');
        if (editor && editor.CodeMirror) {
            // 使用编辑器API插入内容
            editor.CodeMirror.replaceSelection(config.content);
        } else {
            // 备用方案:直接插入内容
            const $activeLine = $(".cm-content .cm-activeLine");
            if ($activeLine.length) {
                $activeLine.append(config.content);
            } else {
                console.warn('找不到活动编辑器行');
            }
        }

        // 关闭模态框
        $('.cm-modal').removeClass('active');
    }

    // 初始化
    buttons.forEach(createEditorButton);
    
    // 使用事件委托绑定动态元素
    $(document).on('click', '.cm-tools-item.joe-dynamic-btn', handleButtonClick);

    
    // console.log('编辑器按钮初始化完成,共加载', buttons.length, '个按钮');
});

新版单首面板:


新版歌单面板:


6

评论

博主关闭了所有页面的评论