透過按鈕就能快速地使用粗體、斜體、刪除線、超連結的標記！
// ==UserScript==
// @name 噗浪輸入框格式化標記按鈕
// @namespace http://tampermonkey.net/
// @version 1.1
// @description 透過按鈕就能快速地使用粗體、斜體、刪除線、超連結的標記！
// @author 方格子
// @match https://www.plurk.com/*
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// 定義按鈕的標籤和功能
const buttons = [
{ text: '粗體', tag: '**', title: '插入粗體標記' },
{ text: '斜體', tag: '*', title: '插入斜體標記' },
{ text: '刪除線', tag: '--', title: '插入刪除線標記' },
{ text: '超連結', tag: '', title: '插入超連結' } // 新增超連結按鈕
];
// 添加按鈕到指定的輸入框
function addButtons(inputBox) {
const buttonContainer = document.createElement('div');
buttonContainer.style.marginTop = '2px';
buttonContainer.style.display = 'flex'; // 使用 flexbox 來排列按鈕
// 創建一個可展開的選單
const toggleButton = document.createElement('button');
toggleButton.innerText = '格式化選項';
toggleButton.style.fontSize = '12px';
toggleButton.style.backgroundColor = '#4c6391';
toggleButton.style.padding = '6px';
toggleButton.style.marginRight = '5px'; // 右邊留點空間
toggleButton.onclick = () => {
buttonList.style.display = buttonList.style.display === 'none' ? 'flex' : 'none'; // 切換顯示狀態
};
buttonContainer.appendChild(toggleButton);
const buttonList = document.createElement('div');
buttonList.style.display = 'none'; // 初始隱藏
buttonList.style.flexDirection = 'row'; // 水平排列按鈕
buttonList.style.alignItems = 'center'; // 垂直居中對齊
buttons.forEach(button => {
const btn = document.createElement('button');
btn.innerText = button.text;
btn.title = button.title;
btn.style.backgroundColor = '#547bc7';
btn.style.padding = '6px';
btn.style.marginRight = '5px';
btn.onclick = () => {
if (button.text === '超連結') {
insertLink(inputBox); // 處理超連結的插入
} else {
insertTag(inputBox, button.tag);
}
};
buttonList.appendChild(btn);
});
buttonContainer.appendChild(buttonList);
// 將按鈕容器添加到輸入框上方
inputBox.parentNode.insertBefore(buttonContainer, inputBox);
}
// 插入標記的功能
function insertTag(inputBox, tag) {
const start = inputBox.selectionStart;
const end = inputBox.selectionEnd;
const text = inputBox.value;
// 獲取選取的文字
const selectedText = text.slice(start, end);
// 如果有選取文字，則在前後添加標記
if (selectedText) {
inputBox.value = text.slice(0, start) + tag + selectedText + tag + text.slice(end);
inputBox.selectionStart = start + tag.length; // 將光標移到標記後
inputBox.selectionEnd = start + tag.length + selectedText.length; // 選取的文字後
} else {
// 如果沒有選取文字，則直接插入標記
inputBox.value = text.slice(0, start) + tag + tag + text.slice(end);
inputBox.selectionStart = inputBox.selectionEnd = start + tag.length; // 將光標移到標記後
}
inputBox.focus();
}
// 插入超連結的功能
function insertLink(inputBox) {
const url = prompt('請輸入超連結的 URL:');
const title = prompt('請輸入顯示的文字:');
if (url && title) {
const linkText = `[${title}](${url})`; // Markdown 語法
const start = inputBox.selectionStart;
const end = inputBox.selectionEnd;
const text = inputBox.value;
inputBox.value = text.slice(0, start) + linkText + text.slice(end);
inputBox.selectionStart = inputBox.selectionEnd = start + linkText.length; // 將光標移到標記後
inputBox.focus();
}
}
// 監聽輸入框的變化
const observer = new MutationObserver(() => {
const inputBig = document.getElementById('input_big');
const inputSmall = document.getElementById('input_small');
const cboxInput = document.getElementById('cbox_input');
if (inputBig && !inputBig.previousElementSibling) {
addButtons(inputBig);
}
if (inputSmall && !inputSmall.previousElementSibling) {
addButtons(inputSmall);
}
if (cboxInput && !cboxInput.previousElementSibling) {
addButtons(cboxInput);
}
});
// 開始觀察 Plurk 的輸入框
observer.observe(document.body, { childList: true, subtree: true });
})();