编程猫发帖助手 - 增强社区发帖体验 - 常规

该脚本是一个编程猫发帖助手的 JavaScript 代码，它扩展了编程猫社区的发帖功能，提供了更丰富和便捷的编辑和管理体验。/n/n主要功能：/n/n1. 添加帖子类型选择： 提供富文本、Markdown/HTML、HTML 三种帖子类型供用户选择，满足不同用户的编辑需求。/n2. 新增功能按钮： 添加了发布、保存、管理按钮，方便用户操作帖子。/n3. 帖子token输入框： 提供帖子token输入框，用于管理和编辑帖子，提高安全性。/n4. 帖子管理器： 集成了帖子管理器，方便用户管理已发布的帖子。/n5. 注意事项提示： 提供了详细的帖子注意事项提示，帮助用户避免错误操作。/n6. 发布/保存功能： 实现帖子发布和保存功能，与后端接口交互。/n/n依赖库：/n/n- axios：用于与后端接口进行数据交互。/n- Editor.md：用于提供 Markdown 编辑器功能。/n/n使用说明：/n/n1. 将该代码引入到编程猫社区网页中。/n2. 确保后端接口已经实现。/n3. 使用浏览器扩展程序或其他方式将该代码注入到网页中。/n/n代码示例：/n/njavascript/nconst SERVER = 'http://localhost:5000';/n/nsetTimeout(() => {/n const optionsDiv = document.querySelector('.r-community-c-forum_sender--bottom_options'),/n forumEditDiv = optionsDiv.parentNode.children[2],/n forumTypeDiv = document.createElement('div'),/n sendButton = document.createElement('a'),/n saveButton = document.createElement('a'),/n manageButton = document.createElement('a'),/n tokenInput = document.createElement('input'),/n forumTypeSelectButton_richText = document.createElement('div'),/n forumTypeSelectButton_markDown = document.createElement('div'),/n forumTypeSelectButton_HTML = document.createElement('div'),/n markDownEdit = document.createElement('iframe'),/n HTMLEdit = document.createElement('iframe'),/n css = document.createElement('style'),/n help = document.createElement('div'),/n helpShowMoreButton = document.createElement('a'),/n manageBoard = document.createElement('div'),/n manager = new ForumManager(localStorage, manageBoard);/n let helpShowMore = true;/n/n globalThis.CodemaoForumHelper_forumManager = manager;/n/n sendButton.innerText = '发布';/n saveButton.innerText = '保存';/n manageButton.innerText = '管理';/n sendButton.classList.add('r-community-c-forum_sender--option');/n saveButton.classList.add('r-community-c-forum_sender--option');/n manageButton.classList.add('r-community-c-forum_sender--option');/n optionsDiv.innerHTML = '';/n optionsDiv.appendChild(sendButton);/n optionsDiv.appendChild(saveButton);/n optionsDiv.appendChild(manageButton);/n/n tokenInput.id = 'tokenInput';/n tokenInput.placeholder = '帖子token';/n optionsDiv.appendChild(tokenInput);/n/n help.style.marginLeft = help.style.marginRight = '50px';/n helpShowMoreButton.style.color = '#5AD9AA';/n helpShowMoreButton.style.fontWeight = 'bold';/n helpShowMoreButton.onclick = () => {/n if (helpShowMore) {/n help.innerText = '注意事项：//n1.MarkDown/HTML类型帖子完全使用Editor.md的语法，支持流程图、表格、目录、TeX等……//n//n';/n helpShowMoreButton.innerText = '//n展开 ∨';/n help.appendChild(helpShowMoreButton);/n } else {/n help.innerHTML = '注意事项：//n //n1.MarkDown/HTML类型帖子完全使用Editor.md的语法，支持流程图、表格、目录、TeX等，具体语法参考<a href=//'http://editor.md.ipandao.com///' style=//'color: #2cc9ff//' target=//'_blank//'>这里</a>；//n //n2.MarkDown/HTML类型帖子支持HTML语法，但不支持JavaScript，需要JavaScript请使用HTML类型帖子；//n //n3.帖子token自动随机生成，相当于是帖子的密码和id，帖子的编辑不限账号，只需要有token就可以；//n //n4.插件自带帖子管理器，会自动记录使用过的token；//n //n5.请不要在帖子中进行xss注入或发布违规内容，违者会对帖子进行删除，情节严重或多次违规将封禁ip；//n //n6.发布帖子时若帖子未创建，会自动进行创建；//n //n7.开启编创协MarkDown编辑器等其它插件可能会产生不兼容等情况，如遇到问题请先尝试关闭除本插件外的所有插件。//n //n';/n helpShowMoreButton.innerText = '//n收起 ∧';/n help.appendChild(helpShowMoreButton);/n }/n helpShowMore = !helpShowMore;/n }/n helpShowMoreButton.click();/n optionsDiv.parentNode.appendChild(help);/n/n forumTypeDiv.classList.add('r-community-c-forum_sender--type_select');/n forumEditDiv.insertBefore(forumTypeDiv, forumEditDiv.children[1]);/n forumTypeSelectButton_richText.innerText = '富文本';/n forumTypeSelectButton_markDown.innerText = 'MarkDown/HTML';/n forumTypeSelectButton_HTML.innerText = 'HTML';/n forumTypeDiv.appendChild(forumTypeSelectButton_richText);/n forumTypeDiv.appendChild(forumTypeSelectButton_markDown);/n forumTypeDiv.appendChild(forumTypeSelectButton_HTML);/n forumTypeSelectButton_richText.style.color = 'red';/n forumTypeSelectButton_richText.style.borderColor = 'red';/n/n markDownEdit.src = /`${SERVER}/static/MDEdit.html/`;/n markDownEdit.style.display = 'none';/n markDownEdit.style.height = '600px';/n markDownEdit.style.width = '100%';/n document.querySelector(/'.r-community-c-forum_sender--container > div:nth-child(3)/').appendChild(markDownEdit);/n/n HTMLEdit.src = /`${SERVER}/static/HTMLEdit.html/`;/n HTMLEdit.style.display = 'none';/n HTMLEdit.style.height = '600px';/n HTMLEdit.style.width = '100%';/n document.querySelector(/'.r-community-c-forum_sender--container > div:nth-child(3)/').appendChild(HTMLEdit);/n/n document.querySelector(/'.c-model_box--content_wrap > div/').appendChild(manageBoard)/n manager.elementInit();/n/n forumTypeSelectButton_richText.onclick = () => {/n document.querySelector(/'.r-community-c-forum_sender--container/').style.width = '856px';/n forumTypeSelectButton_markDown.style.color = 'black';/n forumTypeSelectButton_markDown.style.borderColor = 'black';/n forumTypeSelectButton_HTML.style.color = 'black';/n forumTypeSelectButton_HTML.style.borderColor = 'black';/n forumTypeSelectButton_richText.style.color = 'red';/n forumTypeSelectButton_richText.style.borderColor = 'red';/n document.querySelector(/'.r-community-c-forum_sender--container > div:nth-child(3)/').children[0].style.display = 'block';/n document.querySelector(/'.r-community-c-forum_sender--container > div:nth-child(3)/').children[1].style.display = 'none';/n document.querySelector(/'.r-community-c-forum_sender--container > div:nth-child(3)/').children[2].style.display = 'none';/n };/n/n forumTypeSelectButton_markDown.onclick = () => {/n document.querySelector(/'.r-community-c-forum_sender--container/').style.width = 'auto';/n forumTypeSelectButton_richText.style.color = 'black';/n forumTypeSelectButton_richText.style.borderColor = 'black';/n forumTypeSelectButton_HTML.style.color = 'black';/n forumTypeSelectButton_HTML.style.borderColor = 'black';/n forumTypeSelectButton_markDown.style.color = 'red';/n forumTypeSelectButton_markDown.style.borderColor = 'red';/n document.querySelector(/'.r-community-c-forum_sender--container > div:nth-child(3)/').children[1].style.display = 'block';/n document.querySelector(/'.r-community-c-forum_sender--container > div:nth-child(3)/').children[0].style.display = 'none';/n document.querySelector(/'.r-community-c-forum_sender--container > div:nth-child(3)/').children[2].style.display = 'none';/n };/n/n forumTypeSelectButton_HTML.onclick = () => {/n document.querySelector(/'.r-community-c-forum_sender--container/').style.width = 'auto';/n forumTypeSelectButton_richText.style.color = 'black';/n forumTypeSelectButton_richText.style.borderColor = 'black';/n forumTypeSelectButton_markDown.style.color = 'black';/n forumTypeSelectButton_markDown.style.borderColor = 'black';/n forumTypeSelectButton_HTML.style.color = 'red';/n forumTypeSelectButton_HTML.style.borderColor = 'red';/n document.querySelector(/'.r-community-c-forum_sender--container > div:nth-child(3)/').children[2].style.display = 'block';/n document.querySelector(/'.r-community-c-forum_sender--container > div:nth-child(3)/').children[0].style.display = 'none';/n document.querySelector(/'.r-community-c-forum_sender--container > div:nth-child(3)/').children[1].style.display = 'none';/n };/n/n sendButton.onclick = () => {/n/n };/n/n saveButton.onclick = () => {/n/n };/n/n manageButton.onclick = () => {/n manager.display();/n };/n/n css.innerHTML = `/n.r-community-c-forum_sender--option {/n margin: 30px;/n}/n/n.r-community-c-forum_sender--type_select {/n width: 100%;/n height: 35px;/n margin-bottom: 20px;/n text-align: center;/n}/n/n.r-community-c-forum_sender--type_select:hover {/n font-size: 15px;/n cursor: pointer;/n}/n/n.r-community-c-forum_sender--type_select > div {/n display: inline-block;/n width: 32%;/n height: 100%;/n border-style: solid;/n border-color: hsla(0,0%,40%,.28);/n border-width: 1px;/n border-radius: 4px;/n margin: 5px;/n text-align: center;/n line-height: 35px;/n font-size: 15px;/n}/n/n#tokenInput {/n padding: 5px;/n border-style: solid;/n border-width: 2px !important;/n border-color: rgba(128,128,128,0.5);/n width: 200px;/n align-self: center;/n}/n/n#tokenInput:focus {/n border-color: black;/n}/n/n.forum:hover {/n background-color: rgba(252,194,51,0.5);/n}/n/n.forumSelect {/n background-color: rgba(252,194,51,0.8) !important;/n}/n `;/n document.head.appendChild(css);/n/n console.log('----- 编程猫发帖助手运行成功 -----');/n}, 3000);/n/nclass Forum {/n constructor(token, id, name, type, time) {/n this.token = token;/n this.id = id;/n this.name = name;/n this.type = type;/n this.time = time;/n }/n/n async updateName(name) {/n const res = await axios({/n method: 'POST',/n url: SERVER + '/forum/update',/n data: {/n token: this.token,/n name: name/n }/n });/n if (res.status === 201) {/n this.time = new Date().valueOf();/n this.name = name;/n return true;/n }/n return false;/n }/n/n get data() {/n return {/n token: this.token,/n id: this.id,/n name: this.name,/n type: this.type,/n time: this.time/n };/n }/n/n elementShow(parent) {/n const element = document.createElement('div');/n element.classList.add('forum');/n element.style.width = '100%';/n element.style.height = '10%';/n element.style.padding = '2%';/n element.style.borderStyle = 'solid';/n element.style.borderColor = 'rgba(0,0,0,0.45)';/n element.style.borderWidth = '1px';/n element.style.fontSize = '15px';/n element.style.fontWeight = 'bold';/n element.style.whiteSpace = 'pre';/n element.innerText = /`${this.id} ${this.name}//n${new Date(this.time).toLocaleString()} ${['富文本', 'MarkDown/HTML', 'HTML'][this.type]}/`;/n parent.appendChild(element);/n return element;/n }/n}/n/nclass ForumManager {/n /**/n * @param {HTMLElement} element/n *//n constructor(storage, element) {/n this.storage = storage;/n this.element = element;/n this.forums = [];/n if (!storage.getItem('CodemaoForumHelperData')) storage.setItem('CodemaoForumHelperData', '[]');/n for (const forum of JSON.parse(storage.getItem('CodemaoForumHelperData'))) this.forums.push(new Forum(forum['token'], forum['id'], forum['name'], forum['type'], forum['time']));/n }/n/n elementInit() {/n this.element.style.display = 'none';/n this.element.style.width = '80%';/n this.element.style.height = '80%';/n this.element.style.borderRadius = '4px';/n this.element.style.position = 'absolute';/n this.element.style.top = '50%';/n this.element.style.left = '50%';/n this.element.style.transform = 'translate(-50%,-50%)';/n this.element.style.zIndex = '2';/n this.element.style.background = '#fff';/n this.element.style.boxShadow = '0 6px 28px 0 rgba(0,0,0,.12)' /n this.mask = document.createElement('div');/n this.mask.style.display = 'none';/n this.mask.style.position = 'absolute';/n this.mask.style.top = this.mask.style.bottom = this.mask.style.left = this.mask.style.right = '0';/n this.mask.style.background = 'rgba(0,0,0,0.3)';/n this.element.parentElement.appendChild(this.mask);/n this.closeButton = document.createElement('a');/n this.closeButton.style.position = 'absolute';/n this.closeButton.style.right = '20px';/n this.closeButton.style.top = '10px';/n this.closeButton.style.padding = '10px'/n this.element.appendChild(this.closeButton);/n this.closeIcon = document.createElement('i');/n this.closeIcon.style.background = 'url(https://cdn-community.codemao.cn/community_frontend/asset/bind_phone_close_9b02e.svg) no-repeat -5px -5px';/n this.closeIcon.style.width = this.closeIcon.style.height = '14px';/n this.closeIcon.style.display = 'inline-block';/n this.closeButton.appendChild(this.closeIcon);/n this.closeButton.close = this.close;/n this.closeButton.onclick = () => {/n this.close();/n };/n this.forumShowBox = document.createElement('div');/n this.forumShowBox.style.borderStyle = 'solid';/n this.forumShowBox.style.borderColor = 'rgba(0,0,0,0.45)';/n this.forumShowBox.style.borderWidth = '1px';/n this.forumShowBox.style.width = '65%';/n this.forumShowBox.style.height = '90%';/n this.forumShowBox.style.margin = '5%';/n this.element.appendChild(this.forumShowBox);/n for (const forum of this.forums) forum.elementShow(this.forumShowBox).onclick = ({ srcElement }) => {/n this.forumOnclick(srcElement);/n };/n this.selectedForum = null;/n }/n/n forumOnclick(element) {/n this.selectedForum && this.selectedForum.classList.remove('forumSelect');/n this.selectedForum = element;/n element.classList.add('forumSelect');/n }/n/n display() {/n this.element.style.display = 'inline-block';/n this.mask.style.display = 'inline-block';/n }/n/n close() {/n this.element.style.display = 'none';/n this.mask.style.display = 'none';/n }/n/n appendForum(token, id, name, type) {/n const time = new Date().valueOf(),/n forum = new Forum(token, id, name, type, time);/n this.forums.push(forum);/n forum.elementShow(this.forumShowBox).onclick = () => {/n this.parentNode.forumOnclick(this);/n };/n this.storage.setItem('CodemaoForumHelperData', JSON.stringify(this.data));/n }/n/n get data() {/n return this.forums.map(forum => forum.data);/n }/n}/n/n