Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
// Word, character and byte counter for the wiki editor
$(function() {
// 1. Detect only the source editor using the recommended hook
mw.hook('wikipage.editform').add(function($editForm) {
if ($('#wpTextbox1').length === 0) return;
// 2. Create the counter
var counter = $(`
<div id="mw-edit-counter" style="
position: fixed;
bottom: 20px;
right: 20px;
padding: 12px 16px;
background: #20232a;
color: #61dafb;
border-radius: 8px;
font-family: system-ui, sans-serif;
font-size: 14px;
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
z-index: 1100;
opacity: 0.95;
transition: background 0.3s;
">
<div style="display: flex; gap: 15px;">
<div><b>Words:</b> <span id="edit-words">0</span></div>
<div><b>Characters:</b> <span id="edit-chars">0</span></div>
<div><b>Bytes:</b> <span id="edit-bytes">0</span></div>
</div>
</div>
`);
$('body').append(counter);
// 3. Optimized counting function with text cleaning
function updateCounter() {
try {
var text = $('#wpTextbox1').val();
// Text cleaning for more accurate counting
var cleanText = text
.replace(/\[\[.*?\]\]/g, '') // Remove wiki links
.replace(/\{\{.*?\}\}/g, '') // Remove templates
.replace(/<[^>]+>/g, '') // Remove HTML tags
.replace(/={2,}.*?={2,}/g, '') // Remove headers
.replace(/[\[\]\{\}\|\*\#\:;]/g, '') // Other wiki characters
.replace(/\s+/g, ' ') // Multiple spaces -> single
.trim();
// Calculations using cleaned text
var words = cleanText === '' ? 0 : cleanText.split(/\s+/).length;
var chars = cleanText.length;
// Bytes calculation with original text (uncleaned)
var bytes = new Blob([text]).size;
// Update DOM
$('#edit-words').text(words);
$('#edit-chars').text(chars);
$('#edit-bytes').text(bytes);
// Change background color if exceeding 1000 words
$('#mw-edit-counter').css(
'background',
words > 1000 ? '#4a1a1a' : '#20232a' // Dark red / Dark blue
);
} catch (e) {
console.error('Error in updateCounter:', e);
}
}
// 4. Events and additional features
$('#wpTextbox1').on('input change keyup paste', updateCounter);
updateCounter(); // Initialize
// Make counter draggable (requires jquery.ui)
$('#mw-edit-counter').draggable({
handle: 'div',
containment: 'window'
});
});
});