Limitar / Count Caracteres en CKEditor con / Jquery

Question

Estoy utilizando 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 la caja de texto se reemplaza por el CKEditor alguna idea?

Answer 1

Si usted puede conseguir el contenido de la CKEditor como algunos otros puestos describir tengo una idea acerca de cómo obtener el recuento de los caracteres introducidos. Una vez que estén todos los componentes, por ejemplo

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

se puede establecer que el 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 especie de una situación extraña contar la longitud del contenido del HTML, como dijo Pekka cosas como la longitud de una etiqueta <hr> están abiertos a la interpretación.

Answer 2

No se puede agarrar el contenido de CKEditor tan fácilmente, por ejemplo, con jQuery y $("iframe").contents()... hacer que el CKEditor no está listo cuando sus fuegos de código. Así que hay que unir algunas funciones de eventos cuando la instancia del editor está listo. 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 3

El área de texto es solamente un elemento de respaldo, y no se actualiza en vivo con el contenido introducido. Usted tendría que agarrar el contenido de la instancia de CKEditor. Esto es definitivamente posible.

Consulte los enfoques en esta pregunta. contenidos que el acceso de CKeditor en cada cambio de contenido.

Veo un problema mayor para usted, sin embargo. Cuántos caracteres tiene este código:?

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

(la respuesta - creo - es de 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 uno, pero es gracias a la interpretación de verdad)

estos son concebibles todas las cadenas que se producen al escribir y borrar texto en CKEditor.

Si se asume que desea contar todos los caracteres sin etiquetas HTML, haciendo caso omiso de los elementos adicionales como imágenes o líneas horizontales, hay un strip_tags () función de JavaScript que se puede utilizar para desmontar los datos.

Answer 4

El CKEditor hace real como un marco flotante, Usted puede obtener el contenido del marco flotante ( http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/ ), aunque no es va a ser fácil. Me segundos @ preocupación de Pekka sobre HTML y cómo se va a determinar el recuento de caracteres.

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);