Limite / Nombre de caractères dans CKEditor avec / Jquery

https://stackoverflow.com/questions/2014408

19-09-2019
|

Question

J'utilise CKEditor pour mon éditeur wysiwyg et je dois surveiller et limiter le nombre de caractères comme ils tapent j'ai un script jquery qui fonctionne très bien pour une 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>

Toutefois, cela ne semble pas fonctionner quand le textArea est remplacé par le CKEditor des idées?

La solution

Si vous pouvez obtenir le contenu du CKEditor que d'autres messages décrire j'ai une idée sur la façon d'obtenir le nombre des caractères saisis. Une fois que vous avez le contenu, par exemple

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

vous pouvez définir que la innerHTML d'un div caché, puis obtenir le nombre de caractères dans le innerText de cette 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

Je dirais que ce n'est pas une solution parfaite (par exemple juste <hr> dans votre contenu retournera 0 pour la longueur de innerText), mais il peut être assez proche de travailler pour vous. Il est un peu une situation étrange compter la longueur du contenu html, comme Pekka a dit des choses comme la longueur d'une étiquette <hr> sont ouverts à l'interprétation.

Autres conseils

Vous ne pouvez pas saisir le contenu de ckeditor si facilement, par exemple avec jquery et $("iframe").contents()... provoquer la ckeditor n'est pas prêt lorsque vos feux de code. Donc, vous devez lier certaines fonctions sur les événements lorsque l'instance de l'éditeur est prêt. Après cela, la bande les étiquettes, couper les espaces blancs depuis le début et la fin et le comptage peut commencer:)

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

Le textarea est seulement un élément de repli, et non mis à jour en temps réel avec le contenu entré. Vous devez saisir le contenu de votre instance de CKEditor. Ceci est sans aucun doute possible.

Découvrez les approches cette question. contenu de l'accès ckeditor à chaque changement de contenu.

Je vois un plus grand problème pour vous, cependant. Combien de caractères ne ce code ont:

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

(la réponse - je pense - est de douze)

ou ceci:

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

(la réponse - je pense - est deux espaces)

ou ceci:

<hr>

(la réponse - je pense - est un, mais qui est vraiment bas à l'interprétation)

ce sont toutes les chaînes imaginables qui se produisent lors de l'écriture et la suppression du texte dans CKEditor.

En supposant que vous voulez compter tous les caractères sans balises HTML, en ignorant des éléments supplémentaires comme des images ou des lignes horizontales, il y a une

Le CKEditor rend en fait comme iFrame, vous pouvez obtenir le contenu du Iframe ( http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/ ), bien qu'il ne soit pas va être facile. Je deuxième @ préoccupation de Pekka sur le langage HTML et comment vous allez déterminer le nombre de caractères.

// Vous pouvez obtenir un contenu réel de CKedit en utilisant document.getBody () getText () comme ci-dessous.: //
// Exemple:

// join_content est de Id ckeditor
// éditeur Html: {$ OneJoinInfo [ 'description']} {Form :: éditeur ( '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; 
};

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

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow