Nota: Después de publicar, quizás necesite actualizar la caché de su navegador para ver los cambios.
- Firefox/Safari: Mantenga presionada la tecla Shift mientras pulsa el botón Actualizar, o presiona Ctrl+F5 o Ctrl+R (⌘+R en Mac)
- Google Chrome: presione Ctrl+Shift+R (⌘+Shift+R en Mac)
- Edge: mantenga presionada Ctrl mientras pulsa Actualizar, o presione Ctrl+F5
// Contador de palabras en el editor
$(function() {
// 1. Detectar solo el editor de código fuente usando el hook recomendado
mw.hook('wikipage.editform').add(function($editForm) {
if ($('#wpTextbox1').length === 0) return;
// 2. Crear el contador
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>Palabras:</b> <span id="edit-words">0</span></div>
<div><b>Caracteres:</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. Función de conteo optimizada con limpieza de texto
function updateCounter() {
try {
var text = $('#wpTextbox1').val();
// Limpieza de texto para conteo más preciso
var cleanText = text
.replace(/\[\[.*?\]\]/g, '') // Eliminar enlaces wiki
.replace(/\{\{.*?\}\}/g, '') // Eliminar plantillas
.replace(/<[^>]+>/g, '') // Eliminar HTML tags
.replace(/={2,}.*?={2,}/g, '') // Eliminar encabezados
.replace(/[\[\]\{\}\|\*\#\:;]/g, '') // Otros caracteres wiki
.replace(/\s+/g, ' ') // Espacios múltiples -> único
.trim();
// Cálculos con texto limpio
var words = cleanText === '' ? 0 : cleanText.split(/\s+/).length;
var chars = cleanText.length;
// Bytes con texto original (sin limpiar)
var bytes = new Blob([text]).size;
// Actualizar DOM
$('#edit-words').text(words);
$('#edit-chars').text(chars);
$('#edit-bytes').text(bytes);
// Cambiar color de fondo si supera 1000 palabras
$('#mw-edit-counter').css(
'background',
words > 1000 ? '#4a1a1a' : '#20232a' // Rojo oscuro / Azul oscuro
);
} catch (e) {
console.error('Error en updateCounter:', e);
}
}
// 4. Eventos y funcionalidades adicionales
$('#wpTextbox1').on('input change keyup paste', updateCounter);
updateCounter(); // Inicializar
// Hacer contador arrastrable (requiere jquery.ui)
$('#mw-edit-counter').draggable({
handle: 'div',
containment: 'window'
});
});
});
