【编程猫社区】多语法支持

Codemao Markdown

在编程猫社区使用Markdown语法发布帖子
目前为 2021-05-03 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         Codemao Markdown
// @namespace    codemao
// @version      0.3
// @description  在编程猫社区使用Markdown语法发布帖子
// @author       简单得不简单
// @require      https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js
// @require      https://gf.qytechs.cn/scripts/425827-editormd-js/code/editormdjs.js
// @require      https://gf.qytechs.cn/scripts/34138-marked-js/code/markedjs.js
// @require      https://gf.qytechs.cn/scripts/425847-prettify-js/code/prettifyjs.js
// @resource     editormd https://jddbjd.gitee.io/editor.md/css/editormd.preview.css
// @grant        GM_getResourceText
// @grant        GM_addStyle
// @include      *://shequ.codemao.cn/community
// @include      *://shequ.codemao.cn/community/*
// @include      *://shequ.codemao.cn/work_shop/*
// ==/UserScript==

(function () {
    let editormdcss = GM_getResourceText('editormd')
    GM_addStyle(editormdcss)

    // 原理：提交时，将 Markdown 放在 <pre> 元素中；查看时，读取 <pre> 元素的内容，并渲染

    // 粘贴 Markdown 文本
    var pasteText = function (type) {
        // 贴子发布表单
        var forumContainer = document.getElementsByClassName(type + '-forum_sender--container')[0];
        // 帖子编辑 iframe
        var iframeDoc = document.getElementById('react-tinymce-0_ifr').contentDocument;
        iframeDoc.body.innerHTML = '';

        // 粘贴 Markdown 文本 按钮
        var btnPasteText = document.createElement('button');
        btnPasteText.innerText = '粘贴Markdown代码';
        btnPasteText.style = 'display: block; text-align: center; width: 100%; padding: 5px 0; margin: 5px 0; background: #fec433; border-radius: 4px; color: #fff;';
        btnPasteText.onclick = function () {
            navigator.clipboard.readText().then(
                // 通过 <pre> 元素保证内容不被编程猫改为HTML
                clipText => iframeDoc.body.innerHTML = '<p><span style="font-size: xx-large;" data-mce-style="font-size: xx-large;">本文使用由社区用户简单得不简单（https://shequ.codemao.cn/user/2776410）提供的油猴脚本：Codemao Markdown，由于你没有安装该脚本，无法查看帖子内容</span></p><pre style="display: none;">' + clipText + '</pre>');
            // 对标题添加“[m]”，用于在帖子页面识别是否为 Markdown 文档
            switch (type) {
                case 'workshop':
            }
            var forumTitle = document.getElementsByClassName(type + '-forum_sender--title_input')[0];
            if (!forumTitle.value.endsWith('[m]')) {
                forumTitle.value = forumTitle.value + '[m]';
            }
        }
        // 将按钮添加到表单底部
        forumContainer.appendChild(btnPasteText);

        // 提示文本
        var textExplain = document.createElement('a');
        textExplain.style = 'display: block; text-align: center; width: 100%; padding: 5px 0; margin: 5px 0; background: #fec433; border-radius: 4px; color: #fff;';
        textExplain.innerText = '点击进入编辑器';
        textExplain.href = 'https://jddbjd.gitee.io/editor.md/';
        textExplain.target = '__blank';
        textExplain.title = '点击进入编辑器';
        // 将文本添加到表单底部
        forumContainer.appendChild(textExplain);
    }

    // 修改帖子页面的 HTML 为 Markdown 渲染后的 HTML
    var modify = function () {
        // 获取帖子标题，以确判断是否为 Markdown 帖子
        var forumTitle = document.getElementsByClassName('r-community-r-detail--forum_title')[0];
        if (forumTitle.innerText.endsWith('[m]')) {
            // 获取帖子内容
            var forumContent = document.getElementsByClassName('r-community-r-detail--forum_content')[0];
            // 提取 <pre> 中的文本
            var forumText = forumContent.getElementsByTagName('pre')[0].innerText;
            // 修改其 HTML 为 Markdown
            forumContent.innerHTML = '<textarea style="display:none;">' + forumText + '</textarea>';
            forumContent.className = 'markdown-body editormd-html-preview';
            forumContent.id = 'markdown';

            $(function () {
                // 渲染 Markdown
                var editor = editormd.markdownToHTML("markdown", {
                    htmlDecode: true,
                });
            });
        }
    }


    // 程序入口
    var forum = function () {
        var path = location.pathname;
        // 判断当前页是论坛首页还是帖子页
        if (/^\/community\/\d+\/?$/.test(path)) {
            // 帖子页
            modify();
        } else if (/^\/community\/?$/.test(path)) {
            // 论坛首页
            pasteText('r-community-c');
        } else if (/^\/work_shop\/\d+\/?$/.test(path)) {
            // 工作室
            pasteText('c-post_box');
        }
    }


    // 设置延时，在文档加载完后渲染，否则不会渲染成功
    setTimeout(forum, 1000);
})();
欢迎访问Greasy Fork镜像
