Mr. A (discusión | contribs.)
Página creada con «// 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…»
 
Mr. A (discusión | contribs.)
mSin resumen de edición
 
Línea 1: Línea 1:
// Contador de palabras en el editor
// Contador de palabras, caracteres y bytes para el editor wiki
$(function() {
$(function() {
     // 1. Detectar solo el editor de código fuente usando el hook recomendado
     // 1. Detectar solo el editor de código fuente usando el hook recomendado

Revisión actual - 17:38 13 jul 2025

// Contador de palabras, caracteres y bytes para el editor wiki
$(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'
        });
    });
});