Connaitre le nombre de caractères en temps réel

**kinder_pingui** · 05/07/2007, 10h52

Bonjour à tous !

J'aimerais connaître en temps réel le nombre de caractères saisis dans FCKeditor afin de prévenir le rédacteur s'il dépasse le maximum autorisé.

Pour connaître la longueur, j'utilise le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var longueur = FCKeditorAPI.GetInstance("nom_instance").GetHTML().length;

Ca marche très bien lors de la validation du formulaire, mais je voudrais que ce calcul se fasse à chaque fois que le texte est modifié. J'avais pensé à un évènement genre onKeyDown, mais où le mettre pour que ça marche ? J'ai bien pensé à la balise textarea dans fckeditor.js, mais ça ne me donne rien...

Merci d'avance pour vos idées !

Fred

**ascito** · 05/07/2007, 14h16

c aps trop du php tout ca, essai de poster dans le forum javascript plutot

**kinder_pingui** · 05/07/2007, 14h21

Ben, je poste sur le forum FCKeditor. Je sais bien que ce n'est pas du PHP, mais c'est là que les admins ont placé cette rubrique...

Maintenant, si je poste sur Javascript, y a risque de doublon. Mais je vais faire un lien dans la rubrique javascript pour que les spécialistes puissent le voir !

**koopajah** · 05/07/2007, 14h24

Ben ca a beau etre du FCKEditor c'est vrai que ton problème est purement javascript pour moi. Mais je n'ai jamais utilisé FCKEditor donc je sais pas jusqu'où tu peux aller avec.

Pour ton probleme moi j'utiliserai l'évènement onChange dans ton textarea, essaie de faire un truc simple comme un alert('') pour voir:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<textarea name="montxt" onchange="javascript:alert('Nb caracteres : ' + montxt.value.length);" />

Ou quelquelquechose du style, ca devrait t'afficher une alerte a chaque fois que tu changes qqch dans le textarea

**kinder_pingui** · 05/07/2007, 14h38

Oui je suis d'accord, c'est du javascript. Un peu naïvement, j'ai vu une rubrique FCKeditor et la présence du PHP dans l'arborescence du forum ne m'a pas interpellé.

Bon, ceci dit, j'ai écrit un message dans la rubrique javascript qui redirige ici afin que les javascripteurs puissent le voir de suite.

Sinon j'ai testé ton code (le textarea se trouve dans le fichier fckeditor.js), mais ça ne donne rien... Merci quand même !!

Fred

**ascito** · 05/07/2007, 15h54

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/JavaScript">
function valider(){

alert (document.getElementById("ct").innerHTML);
}

function textchange(text1){

if(text1.length<10){
document.getElementById("ct").innerHTML =text1.length;
}
else {
alert (text1.length);
}
}

</script>
<title>tu peu essayer ca </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>



<form name="f" class=" " action="Javascript:valider();" method="post">
<input type="text" onkeyup="Javascript:textchange(document.f.text1.value);" name="text1" value="entrez votre text"/>
<input type="submit" name="valider" value="envoyer" />
</form>


<div id="ct"></div>

</body>
</html>

dit moi si ca fonctionne

**kinder_pingui** · 05/07/2007, 16h58

@ ascito : Merci pour ton code. malheureusement, ça ne marche pas. FCKeditor place le texte dans une balise textarea, située qui plus est dans un fichier javascript.

En regardant le code source, le textarea n'apparait pas, juste un input de type hidden, et encore ne contient-il que le texte par défaut, avant modification.

Malgré plusieurs essais, aucun évènement (onkeyup, onkeydown, onchange) placé dans le textarea ne semble modifier quoi que ce soit. Il faut sûrement utiliser du javascript faisant référence à l'instance FCKeditorAPI.GetInstance, mais je n'en sais pas plus...

**kinder_pingui** · 09/07/2007, 10h47

J'ai finalement trouvé en farfouillant sur le wiki de FCKeditor. Voici la solution :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
// Compteur de caracteres dans l'editeur
function FCKeditor_OnComplete(editorInstance) {
    if(editorInstance.Name == "FCKeditor1") {
    	editorInstance.Events.AttachEvent('OnSelectionChange', DoSomething);
    	editorInstance.Events.AttachEvent('OnPaste', DoSomething);
    }
}
 
function DoSomething(editorInstance) {
	var longueur = editorInstance.GetHTML().length;
	// Et là, on fait les tests qu'on veut
}

Le fonction FCKeditor_OnComplete est appelée à la fin du chargement de l'éditeur dans la page. On peut ensuite lui associer les évènements désirés.

Fred

**ascito** · 09/07/2007, 11h49

ca peu etre en effet bien pratique, mais si je comprends c dans un des fichiers .Js que tu implémente le bout de code, lequel?

**kinder_pingui** · 09/07/2007, 13h55

Envoyé par ascito

ca peu etre en effet bien pratique, mais si je comprends c dans un des fichiers .Js que tu implémente le bout de code, lequel?

Au début, je l'avais mis dans le fichier fckeditor.js (le fichier métier), mais ça ne marchait pas.

Je l'ai finalement mis dans un fichier javascript classique que j'appelle dans la balise <head> de mon fichier html et là, ça marche sans problème.

Connaitre le nombre de caractères en temps réel [CKEditor]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager