[CKE 4.5.5] Compteur de caractères

**nanou_31** · 28/01/2016, 11h47

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.

**nanou_31** · 02/02/2016, 10h54

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.

[CKE 4.5.5] Compteur de caractères

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager