Limitar/Count Caracteres en CKEditor w/Jquery

Question

estoy usando CKEditor para mi editor WYSIWYG y tengo que controlar y limitar el recuento de caracteres, ya que están escribiendo Tengo un script de jQuery que funciona bien para un TextArea normales

<script type ="text/javascript" language="javascript"> 
    function limitChars(textid, limit, infodiv) { 
     var text = $('.' + textid).val(); 
     var textlength = text.length; 
     if (textlength > limit) { 
      $('#' + infodiv).html('You cannot write more then ' + limit + ' characters!'); 
      $('#' + textid).val(text.substr(0, limit)); 
      return false; 
     } 
     else { 
      $('#' + infodiv).html('You have ' + (limit - textlength) + ' characters left.'); 
      return true; 
     } 
    } 

    $(function() { 

     $('.comment-1').keyup(function() { 
      limitChars('comment-1', 1000, 'charlimitinfo-1'); 
     }) 
    }); 

</script> 

Sin embargo, esto no parece funcionar para cuando el campo textArea se reemplaza con el CKEditor alguna idea?

Answer 1

Si usted puede conseguir el contenido de la CKEditor como alguna otra las publicaciones describen que tengo una idea sobre cómo obtener el recuento de los caracteres ingresados. Una vez que estén todos los componentes, por ejemplo

<b><span class="redText">H</span>ello <span>World!</span></b> 

puede establecer que a la innerHTML de un div oculto, y luego obtener el recuento de caracteres en el innerText de ese div.

var elem = document.getElementById('hiddenTestDiv'); 
elem.innerHTML = '<b><span class="redText">H</span>ello <span>World!</span></b>'; 
var innerText = elem.innerText; // equals 'Hello World!' 
var contentLength = elem.innerText.length; // equals 12 

yo diría que no es una solución perfecta (por ejemplo, acaba de <hr> en su contenido devolverá 0 para la longitud de innerText), pero puede ser lo suficientemente cerca como para trabajar para usted. Es una situación bastante extraña contar la longitud del contenido de html, ya que Pekka dijo que cosas como la longitud de una etiqueta <hr> están sujetas a interpretación.

Answer 2

El textarea es solo un elemento de reserva y no se actualiza en vivo con el contenido ingresado. Tendría que agarrar el contenido de su instancia de CKEditor. Esto es definitivamente posible.

Consulte los enfoques en this question. que acceden a los contenidos de CKEditor en cada cambio de contenido.

Veo un problema más grande para usted, sin embargo. El número de caracteres no tiene este código ?:

<b><span class="redText">H</span>ello <span>World!</span></b> 

(la respuesta - creo - es doce)

o esto:

<b> <p style="font-size: 30px; font-weight: bold"></p> </b> 

(la respuesta - creo - es dos espacios)

o esto:

<hr> 

(la respuesta, creo, es una, pero eso depende de la interpretación)

todas estas son cadenas imaginables que se producen al escribir y eliminar texto en CKEditor.

Suponiendo que desea contar todos los caracteres sin etiquetas HTML, ignorando elementos adicionales como imágenes o líneas horizontales, existe una función strip_tags() para JavaScript que puede usar para desforrar los datos.

Answer 3

El CKEditor en realidad representa un Iframe, puede obtener los contenidos del iframe (http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/), aunque no va a ser fácil. Me gustaría secundar la preocupación de @ Pekka sobre el HTML y cómo va a determinar el recuento de caracteres.

Answer 4

No se puede capturar el contenido de ckeditor tan fácilmente, por ejemplo con jquery y $("iframe").contents()... porque el ckeditor no está listo cuando se dispara el código. Por lo tanto, debe vincular algunas funciones a los eventos cuando la instancia del editor esté lista. Después de eso, tira a las etiquetas, recortar los espacios en blanco desde el principio y el final y el recuento puede empezar :)

<input type="text" name="count" id="count" /> 
    <textarea id="ck"></textarea> 
    <script type="text/javascript"> 
    $(document).ready(function() 
    { 
     var editor = CKEDITOR.replace('ck'); 
     editor.on("instanceReady", function(){ 
      this.document.on("keyup", ck_jq); 
      this.document.on("paste", ck_jq); 
     }); 

    }); 

    function ck_jq() 
    { 
     var len = CKEDITOR.instances['ck'].getData().replace(/<("[^"]*"|'[^']*'|[^'">])*>/gi, '').replace(/^\s+|\s+$/g, ''); 
     $("#count").val(len.length); 
    } 

    </script> 

HTH :)

Answer 5

// Se puede obtener el contenido real de CKedit utilizando document.getBody() getText() de la siguiente manera:. //
// Muestra:

// join_content es Id de CKEditor
// editor HTML: {$ oneJoinInfo [ 'description']} {forma :: editor ('join_content', 'completo', '', '', '', 1)}

var join_contentVal = CKEDITOR.instances.join_content.document.getBody().getText();  
    if(strlen(join_contentVal) > 1000){        
    return false;   
} 



function save() 
    { 
    var caseText = CKEDITOR.instances.caseText.getData(); 
    var caseforlen = CKEDITOR.instances.caseText.document.getBody().getText(); 
    if (strlen(caseforlen) > 4000) { 
     alert("maxnum is 2000"); 
     return; 
    } 

} 


function strlen(str) { 
    var regExp = new RegExp(" ","g"); 
    str = str.replace(regExp , ""); 
    str = str.replace(/\r\n/g,""); 
    var realLength = 0, len = str.length, charCode = -1; 
    for (var i = 0; i < len; i++) { 
     charCode = str.charCodeAt(i); 
     if (charCode >= 0 && charCode <= 128) realLength += 1; 
     else realLength += 2; 
    } 
    return realLength; 
}; 

Answer 6

function getCurrentCount(editor){ 
       var currentLength = editor.getData() 
           .replace(/<[^>]*>/g, '') 
           .replace(/\s+/g, ' ') 
           .replace(/&\w+;/g ,'X') 
           .replace(/^\s*/g, '') 
           .replace(/\s*$/g, '') 
           .length; 

       return currentLength; 
} 

function checkLength(evt){ 
       var stopHandler = false; 
       var currentLength = getCurrentCount(evt.editor); 
       var maximumLength = 350; 

       if(evt.editor.config.MaxLength) 
       { 
           maximumLength = evt.editor.config.MaxLength; 
       } 

       if(!evt.editor.config.LockedInitialized) 
       { 
           evt.editor.config.LockedInitialized = 1; 
           evt.editor.config.Locked = 0; 
       } 

       if(evt.data) 
       { 
           if(evt.data.html) 
           { 
               currentLength += evt.data.html.length; 
           } 
           else if(evt.data.text) 
           { 
               currentLength += evt.data.text.length; 
           } 
       } 

       if(!stopHandler && currentLength >= maximumLength) 
       { 
           if (!evt.editor.config.Locked) 
           { 
               // Record the last legal content. 
               evt.editor.fire('saveSnapshot'); 
               evt.editor.config.Locked = 1; 
               // Cancel the keystroke. 
               evt.cancel(); 
           } 
           else 
               // Check after this key has effected. 
               setTimeout(function() 
               { 
                   // Rollback the illegal one. 
                   if(getCurrentCount(evt.editor) > maximumLength) 
                       evt.editor.execCommand('undo'); 
                   else 
                       evt.editor.config.Locked = 0; 
               }, 0); 
       } 
} 

CKEDITOR.replace('local',{ 
       MaxLength: 255 
}); 
CKEDITOR.instances.local.on('key', checkLength); 
CKEDITOR.instances.local.on('paste', checkLength);