Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Bibliothèques & Frameworks Discussion :

[CKE 4.5.5] Compteur de caractères


Sujet :

Bibliothèques & Frameworks

  1. #1
    Candidat au Club
    Profil pro
    Inscrit en
    novembre 2009
    Messages
    7
    Détails du profil
    Informations personnelles :
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations forums :
    Inscription : novembre 2009
    Messages : 7
    Points : 4
    Points
    4
    Par défaut [CKE 4.5.5] Compteur de caractères
    Bonjour,

    j'utilise la version "basic" 4.5.5 avec les plugins "bbcode" et "entities".

    J'ai vu qu'il existait le plugin "wordcount" pour gérer des compteurs de caractères, mais celui-ci ne répond pas complètement à nos besoins (certaines balises bbcode de mise en forme sont comptées comme des caractères).

    J'essaie donc de créer un compteur sans passer par le plugin.
    Je suis partie d'un formulaire très simple avec un compteur de caractères mis à jour par une fonction Javascript :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>A Simple Page with CKEditor</title>
            <script src="../ckeditor.js"></script>
        </head>
        <body>
            <form name="monform">
                <textarea name="editor1" id="editor1" rows="10" cols="80" onKeyUp="counter(this);"></textarea>
                <span name="compteur" id="compteur"></span>
     
                <input type="submit" name="bouton" value="Valider">
            </form>
     
            <script type="text/javascript">
    		function counter(textarea) {
    			total = textarea.value.length;
    			document.getElementById('compteur').innerHTML = total + " caractere(s)";
    		}
            </script>
        </body>
    </html>

    J'ai ensuite appliqué CKEditor sur la textarea en ajoutant les lignes ci-dessous (entre les lignes "textarea" et "span" du code ci-dessus). Mais le compteur ne fonctionne plus.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <script type="text/javascript">
                    CKEDITOR.replace('editor1');
    </script>

    Si je commente la ligne "CKEDITOR.replace('editor1');", tout refonctionne.

    Je suppose que j'utilise mal la syntaxe pour travailler sur le contenu de la textarea...

    J'ai vu que je pouvais remplacer ma portion de code "CKEDITOR.replace" par un script de la forme :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <script language="JavaScript" type="text/javascript" >
    	objEditor=CKEDITOR.replace("editor1");
    </script>
    et ensuite récupérer le contenu de la textarea dans ma fonction Javascript avec une instruction "objEditor.getData();", mais pour le moment, le compteur ne se met toujours pas à jour...


    Je vous remercie par avance pour votre aide.

  2. #2
    Candidat au Club
    Profil pro
    Inscrit en
    novembre 2009
    Messages
    7
    Détails du profil
    Informations personnelles :
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations forums :
    Inscription : novembre 2009
    Messages : 7
    Points : 4
    Points
    4
    Par défaut
    Bonjour,

    j'ai pu trouver une solution mais qui n'est pas optimisée pour le moment (j'essaie encore de factoriser la gestion des événements pour que le code ne soit pas "redondant" sur chaque textarea).

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>A Simple Page with CKEditor</title>
            <script src="ckeditor.js"></script>
        </head>
        <body>
            <form>
                <textarea name="editor1" id="editor1" rows="10" cols="80">
                    This is my textarea to be replaced with CKEditor.
                </textarea>
     
                <p id="compteur_editor1">0 caract&egrave;re(s)</p>
                <script>
                    editor=CKEDITOR.replace('editor1',
    				{
    					 forcePasteAsPlainText : true,
    					 width   : '75%',
    					 uiColor : '#FA5858'
    				});
     
     
    				editor.on('contentDom', function(event) {
    					var editable = editor.editable();
     
    					editable.attachListener(editable, 'keyup', function() {
    						updateCounter(event.editor);
    					});
    				});
     
    				editor.on('dataReady', function (event) {
    					updateCounter(event.editor);
    				}, editor, null, 100);
     
    				editor.on('afterPaste', function (event) {
    					updateCounter(event.editor);
    				}, editor, null, 100);
     
    				editor.on('change', function (event) {
    					updateCounter(event.editor);
    				}, editor, null, 100);
                </script>
     
    <br />
     
                <textarea name="editor2" id="editor2" rows="10" cols="80">
                    Mon texte
                </textarea>
                <p id="compteur_editor2">0 caract&egrave;re(s)</p>
                <script>
                    editor2=CKEDITOR.replace('editor2',
    				{
    					 forcePasteAsPlainText : true,
    					 width   : '75%',
    					 uiColor : '#81BEF7'
    				 });
     
    				editor2.on('contentDom', function(event) {
    					var editable = editor2.editable();
     
    					editable.attachListener(editable, 'keyup', function() {
    						updateCounter(event.editor);
    					});
    				});
     
    				editor2.on('dataReady', function (event) {
    					updateCounter(event.editor);
    				}, editor2, null, 100);
     
    				editor2.on('afterPaste', function (event) {
    					updateCounter(event.editor);
    				}, editor2, null, 100);
     
    				editor2.on('change', function (event) {
    					updateCounter(event.editor);
    				}, editor2, null, 100);
                </script>
            </form>
            <script type="text/javascript">
    			function updateCounter(editorInstance) {
    				var contenu = editorInstance.getData();
     
    				[...]
     
    				var nombreCaracteres = contenu.length;
    				document.getElementById('compteur_'+editorInstance.name).innerHTML = nombreCaracteres+' caract&egrave;re(s)';
    			}
            </script>
        </body>
    </html>

    Je cherche une solution pour factoriser la partie "gestion des événements" (mise à jour du compteur au chargement du formulaire, après un copier-coller...) de façon à ce que je n'ai pas cette partie sous chaque textarea et que cela soit pris en compte pour toutes les textareas du formulaire.
    (même si dans le script de mon application, la construction du contenu de la page est gérée dans une boucle et que cela ne coûte rien de plus d'ajouter une textarea, il me semble que ce code pourrait être organisé différemment pour être optimisé).

    Je remercie par avance tous ceux qui pourraient m'aider à comprendre comment optimiser ce code.

Discussions similaires

  1. Compteur de caractères
    Par Marc_27 dans le forum ASP.NET
    Réponses: 18
    Dernier message: 22/01/2010, 16h32
  2. compteur de caractère pour 5 textaera
    Par anca2 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 29/06/2009, 20h36
  3. Compteur de caractères petit blocage.
    Par fx_web dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 17/01/2009, 12h32
  4. Compteur de caractères lors d'un saut de ligne
    Par blueman dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 22/06/2006, 10h08
  5. Compteur de caractères dans textarea en temps réél
    Par Jherek dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 22/03/2006, 18h03

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo