Citat:
Ursprungligen postat av
attack-titan
Ja, jag förstår mycket väl vad du menar. Det bästa hade varit om en viss mängd av dem implementerats i Flashbacks gränssnitt.
Här har du ett script för greasemonkey som lägger till en till knapp som visar en lista med custom smileys. Observera att jag har genererat scriptet med hjälp av chatgpt och jag har inte läst igenom det, men det verkar funka. Bara att lägga till de smileys du vill ha i CHARACTERS
Kod:
// ==UserScript==
// @name Flashback - Custom Character Picker
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Adds a button to insert special characters into Flashback editor
// @author You
// @match https://www.flashback.org/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
const CHARACTERS = ['😂', '🤣'];
function addButton() {
const toolbar = document.querySelector('#vB_Editor_001_controls .btn-group');
if (!toolbar) return;
if (document.getElementById('charPickerBtn')) return;
const btn = document.createElement('button');
btn.type = 'button';
btn.className = 'btn btn-default';
btn.id = 'charPickerBtn';
btn.setAttribute('data-toggle', 'tooltip');
btn.setAttribute('data-original-title', 'Special Characters');
btn.innerHTML = '<i class="fa fa-star"></i>';
btn.addEventListener('click', openCharPicker);
toolbar.appendChild(btn);
}
function openCharPicker() {
let picker = document.getElementById('charPickerWindow');
if (picker) {
picker.style.display = picker.style.display === 'none' ? 'block' : 'none';
return;
}
picker = document.createElement('div');
picker.id = 'charPickerWindow';
picker.style.position = 'fixed';
picker.style.top = '100px';
picker.style.left = '50%';
picker.style.transform = 'translateX(-50%)';
picker.style.background = '#fff';
picker.style.border = '1px solid #aaa';
picker.style.padding = '10px';
picker.style.zIndex = '9999';
picker.style.boxShadow = '0 2px 8px rgba(0,0,0,0.3)';
CHARACTERS.forEach(char => {
const btn = document.createElement('button');
btn.textContent = char;
btn.style.margin = '5px';
btn.style.fontSize = '18px';
btn.className = 'btn btn-sm btn-default';
btn.addEventListener('click', () => insertChar(char));
picker.appendChild(btn);
});
// close button
const closeBtn = document.createElement('button');
closeBtn.textContent = '×';
closeBtn.style.cssText = 'position:absolute;top:2px;right:5px;border:none;background:none;font-size:18px;cursor:pointer;';
closeBtn.addEventListener('click', () => picker.style.display = 'none');
picker.appendChild(closeBtn);
document.body.appendChild(picker);
}
function insertChar(char) {
const textarea = document.querySelector('#vB_Editor_001_textarea');
if (!textarea) return;
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
const text = textarea.value;
textarea.value = text.substring(0, start) + char + text.substring(end);
textarea.selectionStart = textarea.selectionEnd = start + char.length;
textarea.focus();
}
// Wait for editor to appear
const observer = new MutationObserver(() => {
if (document.querySelector('#vB_Editor_001_controls')) {
addButton();
observer.disconnect();
}
});
observer.observe(document.body, { childList: true, subtree: true });
})();
