document.addEventListener('DOMContentLoaded', function() {
// Initialize editor toolbar functionality
initializeEditor();
});
/**
* Initialize the editor toolbar and functionality
*/
function initializeEditor() {
const editorContainer = document.querySelector('.editor-container');
if (!editorContainer) return;
const textarea = editorContainer.querySelector('textarea');
const toolbar = editorContainer.querySelector('.editor-toolbar');
if (!textarea || !toolbar) return;
// Set up toolbar buttons
setupToolbarButtons(toolbar, textarea);
// Add input handler for tab key
textarea.addEventListener('keydown', function(e) {
// Handle tab key for indentation
if (e.key === 'Tab') {
e.preventDefault();
const start = this.selectionStart;
const end = this.selectionEnd;
// Set textarea value to: text before + tab + text after
this.value = this.value.substring(0, start) + " " + this.value.substring(end);
// Set cursor position after the inserted tab
this.selectionStart = this.selectionEnd = start + 4;
}
});
}
/**
* Set up the toolbar buttons for the editor
* @param {HTMLElement} toolbar - The toolbar element
* @param {HTMLTextAreaElement} textarea - The textarea element
*/
function setupToolbarButtons(toolbar, textarea) {
// Define toolbar buttons and their actions
const buttons = [
{
name: 'bold',
icon: '',
action: (text) => wrapText(textarea, '[b]', '[/b]')
},
{
name: 'italic',
icon: '',
action: (text) => wrapText(textarea, '[i]', '[/i]')
},
{
name: 'underline',
icon: '',
action: (text) => wrapText(textarea, '[u]', '[/u]')
},
{
name: 'link',
icon: '',
action: (text) => insertLink(textarea)
},
{
name: 'image',
icon: '',
action: (text) => insertImage(textarea)
},
{
name: 'code',
icon: '',
action: (text) => wrapText(textarea, '[code]', '[/code]')
},
{
name: 'quote',
icon: '',
action: (text) => wrapText(textarea, '[quote]', '[/quote]')
}
];
// Create buttons
buttons.forEach(button => {
const btn = document.createElement('button');
btn.type = 'button';
btn.setAttribute('aria-label', button.name);
btn.innerHTML = button.icon;
btn.classList.add('editor-button');
btn.addEventListener('click', () => {
button.action();
textarea.focus(); // Return focus to textarea
});
toolbar.appendChild(btn);
});
}
/**
* Wrap selected text with BBCode tags
* @param {HTMLTextAreaElement} textarea - The textarea element
* @param {string} openTag - The opening tag
* @param {string} closeTag - The closing tag
*/
function wrapText(textarea, openTag, closeTag) {
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
const selectedText = textarea.value.substring(start, end);
const replacement = openTag + selectedText + closeTag;
textarea.value = textarea.value.substring(0, start) + replacement + textarea.value.substring(end);
// Adjust selection to be between the tags
textarea.selectionStart = start + openTag.length;
textarea.selectionEnd = start + openTag.length + selectedText.length;
}
/**
* Insert a link BBCode
* @param {HTMLTextAreaElement} textarea - The textarea element
*/
function insertLink(textarea) {
const selectedText = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);
let url = prompt('Enter the URL:', 'http://');
if (!url) return;
let text = selectedText || prompt('Enter the link text:', '');
if (!text) text = url;
const linkBBCode = `[url=${url}]${text}[/url]`;
insertAtCursor(textarea, linkBBCode);
}
/**
* Insert an image BBCode
* @param {HTMLTextAreaElement} textarea - The textarea element
*/
function insertImage(textarea) {
const url = prompt('Enter the image URL:', 'http://');
if (!url) return;
const imageBBCode = `[img]${url}[/img]`;
insertAtCursor(textarea, imageBBCode);
}
/**
* Insert text at cursor position
* @param {HTMLTextAreaElement} textarea - The textarea element
* @param {string} text - The text to insert
*/
function insertAtCursor(textarea, text) {
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
textarea.value = textarea.value.substring(0, start) + text + textarea.value.substring(end);
// Set selection after inserted text
textarea.selectionStart = textarea.selectionEnd = start + text.length;
}