Limite / Conte personaggi in CKEditor con / Jquery

Question

Sto usando CKEditor per il mio editor WYSIWYG e ho bisogno di monitorare e limitare il numero di caratteri in quanto sta digitando Ho uno script jQuery che funziona bene per un TextArea normale

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

Tuttavia questo non sembra funzionare per quando il textArea viene sostituito con il CKEditor tutte le idee?

Answer 1

Se è possibile ottenere il contenuto del CKEditor come alcuni altri messaggi descrivere Ho un'idea su come ottenere il conteggio dei caratteri immessi. Una volta che avete il contenuto, ad esempio

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

è possibile impostare che al innerHTML di un div nascosti, e quindi ottenere il conteggio di caratteri nel innerText di quel 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

Direi che non è una soluzione perfetta (ad esempio solo <hr> nel contenuto restituirà 0 per la durata del innerText), ma può essere abbastanza vicino a lavorare per voi. E 'una specie di una strana situazione che conta la lunghezza del contenuto di HTML, come ha detto Pekka cose come la lunghezza di un tag <hr> sono aperti all'interpretazione.

Answer 2

Non si può afferrare il contenuto di CKEditor così facilmente, per esempio con jQuery e $("iframe").contents()... causare il ckeditor non è pronto quando il vostro fuochi di codice. Quindi è necessario associare alcune funzioni su eventi quando l'istanza dell'editor è pronto. Dopo di che, striscia fuori i tag, tagliare i spazi bianchi dall'inizio e alla fine e il conteggio può iniziare:)

    <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

L'textarea è soltanto un elemento di ripiego, e non aggiornato dal vivo con il contenuto inserito. Si dovrà afferrare il contenuto della vostra istanza CKEditor. Questo è sicuramente possibile.

Controlla gli approcci a questa domanda. contenuti che l'accesso di CKEditor su ogni cambio di contenuti.

Vedo un problema più grande per te, però. Quanti personaggi funziona questo codice ha:?

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

(la risposta - credo - è di dodici)

o questo:

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

(la risposta - credo - è di due spazi)

o questo:

<hr>

(la risposta - credo - è uno, ma questo è giù per l'interpretazione davvero)

sono stringhe tutto immaginabili che si verificano durante la scrittura e l'eliminazione di testo in CKEditor.

Supponendo che si desidera contare tutti i caratteri senza tag HTML, ignorando elementi aggiuntivi come immagini o linee orizzontali, c'è un strip_tags () funzione per JavaScript che è possibile utilizzare per smontare i dati.

Answer 4

Il CKEditor in realtà rende come un Iframe, è possibile ottenere il contenuto dal Iframe ( http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/ ), anche se non è sarà facile. Vorrei secondo @ preoccupazione di Pekka di HTML e come si sta andando per determinare conteggio dei caratteri.

Answer 5

// È possibile ottenere il contenuto reale del CKedit utilizzando document.getBody () getText () come di seguito.: //
// Esempio:

// join_content è Id di ckeditor
// Editor Html:     {$ OneJoinInfo [ 'descrizione']}     {Forma :: editore ( 'join_content', 'full', '', '', '', 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);