编程猫发帖助手：快速高效发布帖子

<!-- 编程猫发帖助手 -->
<script>
const SERVER = 'http://localhost:5000';

setTimeout(() => {
    const optionsDiv = document.querySelector('.r-community-c-forum_sender--bottom_options'),
        forumEditDiv = optionsDiv.parentNode.children[2],
        forumTypeDiv = document.createElement('div'),
        sendButton = document.createElement('a'),
        saveButton = document.createElement('a'),
        manageButton = document.createElement('a'),
        tokenInput = document.createElement('input'),
        forumTypeSelectButton_richText = document.createElement('div'),
        forumTypeSelectButton_markDown = document.createElement('div'),
        forumTypeSelectButton_HTML = document.createElement('div'),
        markDownEdit = document.createElement('iframe'),
        HTMLEdit = document.createElement('iframe'),
        css = document.createElement('style'),
        help = document.createElement('div'),
        helpShowMoreButton = document.createElement('a'),
        manageBoard = document.createElement('div'),
        manager = new ForumManager(localStorage, manageBoard);
    let helpShowMore = true;

    globalThis.CodemaoForumHelper_forumManager = manager;

    sendButton.innerText = '发布';
    saveButton.innerText = '保存';
    manageButton.innerText = '管理';
    sendButton.classList.add('r-community-c-forum_sender--option');
    saveButton.classList.add('r-community-c-forum_sender--option');
    manageButton.classList.add('r-community-c-forum_sender--option');
    optionsDiv.innerHTML = '';
    optionsDiv.appendChild(sendButton);
    optionsDiv.appendChild(saveButton);
    optionsDiv.appendChild(manageButton);

    tokenInput.id = 'tokenInput';
    tokenInput.placeholder = '帖子token';
    optionsDiv.appendChild(tokenInput);

    help.style.marginLeft = help.style.marginRight = '50px';
    helpShowMoreButton.style.color = '#5AD9AA';
    helpShowMoreButton.style.fontWeight = 'bold';
    helpShowMoreButton.onclick = () => {
        if (helpShowMore) {
            help.innerText = '注意事项：
1.MarkDown/HTML类型帖子完全使用Editor.md的语法，支持流程图、表格、目录、TeX等……

';
            helpShowMoreButton.innerText = '\n展开 ∨';
            help.appendChild(helpShowMoreButton);
        } else {
            help.innerHTML = '注意事项：
<br>
1.MarkDown/HTML类型帖子完全使用Editor.md的语法，支持流程图、表格、目录、TeX等，具体语法参考<a href="http://editor.md.ipandao.com/" style="color: #2cc9ff" target="_blank">这里</a>；
<br>
2.MarkDown/HTML类型帖子支持HTML语法，但不支持JavaScript，需要JavaScript请使用HTML类型帖子；
<br>
3.帖子token自动随机生成，相当于是帖子的密码和id，帖子的编辑不限账号，只需要有token就可以；
<br>
4.插件自带帖子管理器，会自动记录使用过的token；
<br>
5.请不要在帖子中进行xss注入或发布违规内容，违者会对帖子进行删除，情节严重或多次违规将封禁ip；
<br>
6.发布帖子时若帖子未创建，会自动进行创建；
<br>
7.开启编创协MarkDown编辑器等其它插件可能会产生不兼容等情况，如遇到问题请先尝试关闭除本插件外的所有插件。
<br>
';
            helpShowMoreButton.innerText = '\n收起 ∧';
            help.appendChild(helpShowMoreButton);
        }
        helpShowMore = !helpShowMore;
    }
    helpShowMoreButton.click();
    optionsDiv.parentNode.appendChild(help);

    forumTypeDiv.classList.add('r-community-c-forum_sender--type_select');
    forumEditDiv.insertBefore(forumTypeDiv, forumEditDiv.children[1]);
    forumTypeSelectButton_richText.innerText = '富文本';
    forumTypeSelectButton_markDown.innerText = 'MarkDown/HTML';
    forumTypeSelectButton_HTML.innerText = 'HTML';
    forumTypeDiv.appendChild(forumTypeSelectButton_richText);
    forumTypeDiv.appendChild(forumTypeSelectButton_markDown);
    forumTypeDiv.appendChild(forumTypeSelectButton_HTML);
    forumTypeSelectButton_richText.style.color = 'red';
    forumTypeSelectButton_richText.style.borderColor = 'red';

    markDownEdit.src = `${SERVER}/static/MDEdit.html`;
    markDownEdit.style.display = 'none';
    markDownEdit.style.height = '600px';
    markDownEdit.style.width = '100%';
    document.querySelector(".r-community-c-forum_sender--container > div:nth-child(3)").appendChild(markDownEdit);

    HTMLEdit.src = `${SERVER}/static/HTMLEdit.html`;
    HTMLEdit.style.display = 'none';
    HTMLEdit.style.height = '600px';
    HTMLEdit.style.width = '100%';
    document.querySelector(".r-community-c-forum_sender--container > div:nth-child(3)").appendChild(HTMLEdit);

    document.querySelector(".c-model_box--content_wrap > div").appendChild(manageBoard)
    manager.elementInit();

    forumTypeSelectButton_richText.onclick = () => {
        document.querySelector(".r-community-c-forum_sender--container").style.width = '856px';
        forumTypeSelectButton_markDown.style.color = 'black';
        forumTypeSelectButton_markDown.style.borderColor = 'black';
        forumTypeSelectButton_HTML.style.color = 'black';
        forumTypeSelectButton_HTML.style.borderColor = 'black';
        forumTypeSelectButton_richText.style.color = 'red';
        forumTypeSelectButton_richText.style.borderColor = 'red';
        document.querySelector(".r-community-c-forum_sender--container > div:nth-child(3)").children[0].style.display = 'block';
        document.querySelector(".r-community-c-forum_sender--container > div:nth-child(3)").children[1].style.display = 'none';
        document.querySelector(".r-community-c-forum_sender--container > div:nth-child(3)").children[2].style.display = 'none';
    };

    forumTypeSelectButton_markDown.onclick = () => {
        document.querySelector(".r-community-c-forum_sender--container").style.width = 'auto';
        forumTypeSelectButton_richText.style.color = 'black';
        forumTypeSelectButton_richText.style.borderColor = 'black';
        forumTypeSelectButton_HTML.style.color = 'black';
        forumTypeSelectButton_HTML.style.borderColor = 'black';
        forumTypeSelectButton_markDown.style.color = 'red';
        forumTypeSelectButton_markDown.style.borderColor = 'red';
        document.querySelector(".r-community-c-forum_sender--container > div:nth-child(3)").children[1].style.display = 'block';
        document.querySelector(".r-community-c-forum_sender--container > div:nth-child(3)").children[0].style.display = 'none';
        document.querySelector(".r-community-c-forum_sender--container > div:nth-child(3)").children[2].style.display = 'none';
    };

    forumTypeSelectButton_HTML.onclick = () => {
        document.querySelector(".r-community-c-forum_sender--container").style.width = 'auto';
        forumTypeSelectButton_richText.style.color = 'black';
        forumTypeSelectButton_richText.style.borderColor = 'black';
        forumTypeSelectButton_markDown.style.color = 'black';
        forumTypeSelectButton_markDown.style.borderColor = 'black';
        forumTypeSelectButton_HTML.style.color = 'red';
        forumTypeSelectButton_HTML.style.borderColor = 'red';
        document.querySelector(".r-community-c-forum_sender--container > div:nth-child(3)").children[2].style.display = 'block';
        document.querySelector(".r-community-c-forum_sender--container > div:nth-child(3)").children[0].style.display = 'none';
        document.querySelector(".r-community-c-forum_sender--container > div:nth-child(3)").children[1].style.display = 'none';
    };

    sendButton.onclick = () => {

    };

    saveButton.onclick = () => {

    };

    manageButton.onclick = () => {
        manager.display();
    };

    css.innerHTML = `
.r-community-c-forum_sender--option {
    margin: 30px;
}

.r-community-c-forum_sender--type_select {
    width: 100%;
    height: 35px;
    margin-bottom: 20px;
    text-align: center;
}

.r-community-c-forum_sender--type_select:hover {
    font-size: 15px;
    cursor: pointer;
}

.r-community-c-forum_sender--type_select > div {
    display: inline-block;
    width: 32%;
    height: 100%;
    border-style: solid;
    border-color: hsla(0,0%,40%,.28);
    border-width: 1px;
    border-radius: 4px;
    margin: 5px;
    text-align: center;
    line-height: 35px;
    font-size: 15px;
}

#tokenInput {
    padding: 5px;
    border-style: solid;
    border-width: 2px !important;
    border-color: rgba(128,128,128,0.5);
    width: 200px;
    align-self: center;
}

#tokenInput:focus {
    border-color: black;
}

.forum:hover {
    background-color: rgba(252,194,51,0.5);
}

.forumSelect {
    background-color: rgba(252,194,51,0.8) !important;
}
    `;
    document.head.appendChild(css);

    console.log('----- 编程猫发帖助手 运行成功 -----');
}, 3000);

class Forum {
    constructor(token, id, name, type, time) {
        this.token = token;
        this.id = id;
        this.name = name;
        this.type = type;
        this.time = time;
    }

    async updateName(name) {
        const res = await axios({
            method: 'POST',
            url: SERVER + '/forum/update',
            data: {
                token: this.token,
                name: name
            }
        });
        if (res.status === 201) {
            this.time = new Date().valueOf();
            this.name = name;
            return true;
        }
        return false;
    }

    get data() {
        return {
            token: this.token,
            id: this.id,
            name: this.name,
            type: this.type,
            time: this.time
        };
    }

    elementShow(parent) {
        const element = document.createElement('div');
        element.classList.add('forum');
        element.style.width = '100%';
        element.style.height = '10%';
        element.style.padding = '2%';
        element.style.borderStyle = 'solid';
        element.style.borderColor = 'rgba(0,0,0,0.45)';
        element.style.borderWidth = '1px';
        element.style.fontSize = '15px';
        element.style.fontWeight = 'bold';
        element.style.whiteSpace = 'pre';
        element.innerText = `${this.id}    ${this.name}
${new Date(this.time).toLocaleString()}     ${['富文本', 'MarkDown/HTML', 'HTML'][this.type]}`;
        parent.appendChild(element);
        return element;
    }
}

class ForumManager {
    /**
     * @param {HTMLElement} element
     */
    constructor(storage, element) {
        this.storage = storage;
        this.element = element;
        this.forums = [];
        if (!storage.getItem('CodemaoForumHelperData')) storage.setItem('CodemaoForumHelperData', '[]');
        for (const forum of JSON.parse(storage.getItem('CodemaoForumHelperData'))) this.forums.push(new Forum(forum['token'], forum['id'], forum['name'], forum['type'], forum['time']));
    }

    elementInit() {
        this.element.style.display = 'none';
        this.element.style.width = '80%';
        this.element.style.height = '80%';
        this.element.style.borderRadius = '4px';
        this.element.style.position = 'absolute';
        this.element.style.top = '50%';
        this.element.style.left = '50%';
        this.element.style.transform = 'translate(-50%,-50%)';
        this.element.style.zIndex = '2';
        this.element.style.background = '#fff';
        this.element.style.boxShadow = '0 6px 28px 0 rgba(0,0,0,.12)'
        this.mask = document.createElement('div');
        this.mask.style.display = 'none';
        this.mask.style.position = 'absolute';
        this.mask.style.top = this.mask.style.bottom = this.mask.style.left = this.mask.style.right = '0';
        this.mask.style.background = 'rgba(0,0,0,0.3)';
        this.element.parentElement.appendChild(this.mask);
        this.closeButton = document.createElement('a');
        this.closeButton.style.position = 'absolute';
        this.closeButton.style.right = '20px';
        this.closeButton.style.top = '10px';
        this.closeButton.style.padding = '10px'
        this.element.appendChild(this.closeButton);
        this.closeIcon = document.createElement('i');
        this.closeIcon.style.background = 'url(https://cdn-community.codemao.cn/community_frontend/asset/bind_phone_close_9b02e.svg) no-repeat -5px -5px';
        this.closeIcon.style.width = this.closeIcon.style.height = '14px';
        this.closeIcon.style.display = 'inline-block';
        this.closeButton.appendChild(this.closeIcon);
        this.closeButton.close = this.close;
        this.closeButton.onclick = () => {
            this.close();
        };
        this.forumShowBox = document.createElement('div');
        this.forumShowBox.style.borderStyle = 'solid';
        this.forumShowBox.style.borderColor = 'rgba(0,0,0,0.45)';
        this.forumShowBox.style.borderWidth = '1px';
        this.forumShowBox.style.width = '65%';
        this.forumShowBox.style.height = '90%';
        this.forumShowBox.style.margin = '5%';
        this.element.appendChild(this.forumShowBox);
        for (const forum of this.forums) forum.elementShow(this.forumShowBox).onclick = ({ srcElement }) => {
            this.forumOnclick(srcElement);
        };
        this.selectedForum = null;
    }

    forumOnclick(element) {
        this.selectedForum && this.selectedForum.classList.remove('forumSelect');
        this.selectedForum = element;
        element.classList.add('forumSelect');
    }

    display() {
        this.element.style.display = 'inline-block';
        this.mask.style.display = 'inline-block';
    }

    close() {
        this.element.style.display = 'none';
        this.mask.style.display = 'none';
    }

    appendForum(token, id, name, type) {
        const time = new Date().valueOf(),
        forum = new Forum(token, id, name, type, time);
        this.forums.push(forum);
        forum.elementShow(this.forumShowBox).onclick = () => {
            this.parentNode.forumOnclick(this);
        };
        this.storage.setItem('CodemaoForumHelperData', JSON.stringify(this.data));
    }

    get data() {
        return this.forums.map(forum => forum.data);
    }
}

// 这是一个JavaScript代码，用于实现编程猫发帖助手功能。
// 它可以帮助用户在编程猫社区快速高效地发布帖子。
// 具体功能包括添加发布帖子的选项、支持不同类型帖子、提供帖子管理器等。
</script>
<!-- 编程猫发帖助手 -->