Compteur caractères éditeur

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Compteur caractères éditeur

Message par Xoumi le Mar 22 Juil 2014 - 15:15

Bonjour,

Je viens d'adapter un script proposé par Ea dans ce [sujet]. C'est un script très intéressant et qui répond aux exigences d'un bon nombre d'utilisateurs de la communauté. Cependant, pour un forum RPG, il y a un problème :

La fonction :

Code:
.replace(/\[.*\]/g,' ')

bloque les caractères qui se trouvent entre crochets pour que les balises ne soient pas prises en compte ! C'est une bonne chose MAIS il est beaucoup trop restrictif puisqu'il bloque un texte entre les balises comme par exemple :

Code:
[color=#D70000]- J'aime regardé Nodame Cantabile[/color]

Dans l'exemple ci-dessus : Les caractères "J'aime regardé Nodame Cantabile" ne sont pas pris en compte, ce qui est gênant.

Avez-vous une proposition pour tenter de corriger ce problème ? La solution que j'ai tenté, c'était de bloquer stricto sensu les balises possibles mais je pense qu'il y a une solution beaucoup plus simple.

En vous remerciant par avance,
Xoumi.

Xoumi
*****

Messages : 604
Inscrit(e) le : 23/09/2010

http://www.harrypotter2005.net
Xoumi a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Compteur caractères éditeur

Message par Self le Mar 22 Juil 2014 - 16:23

Bonjour,

On peut essayer comme ceci (peut-être ?) :
Code:
var wordcount_signaled= false;

$(function(){
   if(!$('#text_editor_textarea').length || !$.fn["sceditor"]) return;

   $(function(){

      var e= $('#text_editor_textarea').sceditor('instance');
      if(!e) return;

      var w= $('<div class="word-count"></div>').appendTo('.sceditor-container');

      var wc= function(){
         var b = e.val().match(/\].*\[/);
         var rb = b[0].replace(/\[/, '').replace(/\]/, '');
         var h = e.val().match(/>.*</);
         var rh = h[0].replace(/>/, '').replace(/</, '');
         var t= e.val().replace(/\[.*\]/g, rb).replace(/<.*>/g, rh).replace(/[\x00-\x40\x5b-\x60\x7b-\x7e]/g,' ');
         w.html('Caractères : '+(t.match(/\S/g)||[]).length+' Mots : '+(t.match(/\S{3,}/g)||[]).length);
         wordcount_signaled= false
      };

      e.keyDown(function(){
         if(wordcount_signaled) return;
         wordcount_signaled= true;
         setTimeout(function(){ wc() }, 2000)
      });

      wc()

   })
});

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Compteur caractères éditeur

Message par Xoumi le Mar 22 Juil 2014 - 19:39

Bonsoir SeLfde4Th7,

Merci de votre aide.

Malheureusement, dès que j'insère la partie :

Code:
var b = e.val().match(/\].*\[/);
        var rb = b[0].replace(/\[/, '').replace(/\]/, '');
        var h = e.val().match(/>.*</);
        var rh = h[0].replace(/>/, '').replace(/</, '');
        var t= e.val().replace(/\[.*\]/g, rb).replace(/<.*>/g, rh).replace(/[\x00-\x40\x5b-\x60\x7b-\x7e]/g,' ');

Le script ne fonctionne plus.

Xoumi
*****

Messages : 604
Inscrit(e) le : 23/09/2010

http://www.harrypotter2005.net
Xoumi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Compteur caractères éditeur

Message par Self le Mar 22 Juil 2014 - 20:29

Ah, je n'avais testé que dans l'ardoise JavaScript Neutral !
Comme ceci ça fonctionne chez moi :
Code:
var wordcount_signaled= false;

$(function(){
   if(!$('#text_editor_textarea').length || !$.fn["sceditor"]) return;

   $(function(){

      var e= $('#text_editor_textarea').sceditor('instance');
      if(!e) return;

      var w= $('<div class="word-count"></div>').appendTo('.sceditor-container');

      var wc= function(){
         var b = e.val().match(/\].*\[/);
         var h = e.val().match(/>.*</);
         if(b != null){
            var rb = b[0].replace(/\[/, '').replace(/\]/, '');
         }else if(h != null){
            var rh = h[0].replace(/>/, '').replace(/</, '');
         };
         var t= e.val().replace(/\[.*\]/g, rb).replace(/<.*>/g, rh).replace(/[\x00-\x40\x5b-\x60\x7b-\x7e]/g,' ');
         w.html('Caractères : '+(t.match(/\S/g)||[]).length+' Mots : '+(t.match(/\S{3,}/g)||[]).length);
         wordcount_signaled= false
      };

      e.keyDown(function(){
         if(wordcount_signaled) return;
         wordcount_signaled= true;
         setTimeout(function(){ wc() }, 2000)
      });

      wc()

   })
});

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Compteur caractères éditeur

Message par Xoumi le Mar 22 Juil 2014 - 22:14

Bonsoir,

Merci pour votre ténacité. Le script fonctionne mais il ne corrige pas le problème relaté dans le premier message, à savoir que les caractères compris entre deux balises n'est pas pris en compte par le compteur.

Xoumi
*****

Messages : 604
Inscrit(e) le : 23/09/2010

http://www.harrypotter2005.net
Xoumi a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Compteur caractères éditeur

Message par Self le Mar 22 Juil 2014 - 23:15

Ah, effectivement le BBcode et le HTML fonctionnaient mais séparément il manquait une condition,voici le code qui fonctionne (dans l'éditeur de réponse rapide ou dans l'éditeur normal) d'après mes test avec que du BBcode, que du HTML, les deux et avec aucune balise également :
Code:
var wordcount_signaled= false;

$(function(){
   if(!$('#text_editor_textarea').length || !$.fn["sceditor"]) return;

   $(function(){

      var e= $('#text_editor_textarea').sceditor('instance');
      if(!e) return;

      var w= $('<div class="word-count"></div>').appendTo('.sceditor-container');

      var wc= function(){
         var b = e.val().match(/\].*\[/);
         var h = e.val().match(/>.*</);
         if(b != null && h != null){
            var rb = b[0].replace(/\[/, '').replace(/\]/, '');
            var rh = h[0].replace(/>/, '').replace(/</, '');
         }else if(b != null){
            var rb = b[0].replace(/\[/, '').replace(/\]/, '');
         }else if(h != null){
            var rh = h[0].replace(/>/, '').replace(/</, '');
         };
         var t= e.val().replace(/\[.*\]/g, rb).replace(/<.*>/g, rh).replace(/[\x00-\x40\x5b-\x60\x7b-\x7e]/g,' ');
         w.html('Caractères : '+(t.match(/\S/g)||[]).length+' Mots : '+(t.match(/\S{3,}/g)||[]).length);
         wordcount_signaled= false
      };

      e.keyDown(function(){
         if(wordcount_signaled) return;
         wordcount_signaled= true;
         setTimeout(function(){ wc() }, 2000)
      });

      wc()

   })
});

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Compteur caractères éditeur

Message par Xoumi le Mer 23 Juil 2014 - 0:58

Re,

Le script ne fonctionne pas après insertion sur le forum, c'est-à-dire que l'élément :

Code:
var w= $('<div class="word-count"></div>').appendTo('.sceditor-container');


ne s'affiche malheureusement pas. Je l'ai même isolé dans une feuille JS pour être sûr que ce ne soit pas une erreur de ma part.






Xoumi
*****

Messages : 604
Inscrit(e) le : 23/09/2010

http://www.harrypotter2005.net
Xoumi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Compteur caractères éditeur

Message par Xoumi le Mer 23 Juil 2014 - 1:05

Re,

Je publie un double message en espérant que vous ne replancheriez pas sur le script inutilement. Il fonctionne impeccablement SeLfde4Th7, je vous en remercie !

Je me permets de vous poser une question avant de clore ce sujet, je profite de votre capital humain en matière de JS. J'ai cherché sur le Net mais sans succès car je ne dois pas donner les bons mots clefs. Dans le script, je recherche la fonction (seulement) qui permet de lui dire de ne pas prendre en compte les "espaces" comme un caractère. Savez-vous laquelle est-ce ?

En vous remerciant beaucoup pour le script. Je vais l'étudier pour comprendre ce que vous avez fait.

Cordialement,
Xoumi.

Xoumi
*****

Messages : 604
Inscrit(e) le : 23/09/2010

http://www.harrypotter2005.net
Xoumi a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Compteur caractères éditeur

Message par *Henry* le Mer 23 Juil 2014 - 1:26

Bonsoir xoumi,

il y a sûrement quelque chose qui cloche.
Sans changement du dernier script, le < div> s'affiche correctement.
Seul différence :
Je ne passe pas par la Gestion de JS.
Le script est hébergé sous mon Serveur et intégré dans le Template "overall_header" comme
Code:
 <script src="http://www.topp-tsf.de/js/forumactif/wordcount.js" type="text/javascript"></script>

Cordialement
Henry

Edit: J'ai pas vue votre dernier Message avant poster. Embarassed


Dernière édition par *Henry* le Mer 23 Juil 2014 - 1:34, édité 1 fois

*Henry*
+ Hyperactif +

Masculin
Messages : 2418
Inscrit(e) le : 11/04/2008

http://ww0.topp-henry.com
*Henry* a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Compteur caractères éditeur

Message par Xoumi le Mer 23 Juil 2014 - 1:31

Hallo,

Ja, ich weiß. Ich stellte eine weitere nachricht zu verhindern Smile

Danke Henry Smile

Xoumi
*****

Messages : 604
Inscrit(e) le : 23/09/2010

http://www.harrypotter2005.net
Xoumi a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Compteur caractères éditeur

Message par Self le Mer 23 Juil 2014 - 15:12

Ah, content que ça fonctionne Mr. Green !

@Xoumi a écrit:e recherche la fonction (seulement) qui permet de lui dire de ne pas prendre en compte les "espaces" comme un caractère.
Bien c'est la suivante:
Code:
(t.match(/\S/g)||[]).length

Dans cette portion on recherche dans la variable t tout ce qui n'est pas un espace blanc avec \S, le S qu'il faut absolument mettre en majuscule sinon si l'on met le s en minuscule on recherchera au contraire tout ce qui est un espace blanc (tabulation, espace, retour à la ligne...).
Le g nous permet une recherche globale, c'est à dire que la fonction ne s’arrêtera pas de rechercher au premier caractère qui n'est pas un espace blanc.
Et length nous renvoi le nombre de ces caractères.

Un peu plus loin sur la même ligne, on a une fonction similaire qui est :
Code:
(t.match(/\S{3,}/g)||[]).length)

Ici, tout est pareil mise à part le 3 suivi d'une virgule entre les accolade, ce paramètre sert lui à dire que l'on veut rechercher tout ce qui n'est pas un espace blanc, mais cette fois d'un minimum de 3 caractères, ce qui nous donnera donc le nombre de mots Wink .


@Xoumi a écrit:En vous remerciant beaucoup pour le script. Je vais l'étudier pour comprendre ce que vous avez fait.
De rien, mais je viens de me rendre compte que le script ne fonctionne en fait que si l'on met un seul BBcode et/ou HTML, je tente de régler ça, désoler  Embarassed .

EDIT: Me revoilà , je crois que je tiens le bon code cette fois Smile, pouvez vous tester ceci :
Code:
var wordcount_signaled= false;

$(function(){
   if(!$('#text_editor_textarea').length || !$.fn["sceditor"]) return;

   $(function(){

      var e= $('#text_editor_textarea').sceditor('instance');
      if(!e) return;

      var w= $('<div class="word-count"></div>').appendTo('.sceditor-container');

      var wc= function(){
         var t= e.val().replace(/\[.[^\]]*\]/g, '').replace(/<.[^>]*>/g, '').replace(/[\x00-\x40\x5b-\x60\x7b-\x7e]/g,' ');
         w.html('Caractères : '+(t.match(/\S/g)||[]).length+' Mots : '+(t.match(/\S{3,}/g)||[]).length);
         wordcount_signaled= false
      };

      e.keyDown(function(){
         if(wordcount_signaled) return;
         wordcount_signaled= true;
         setTimeout(function(){ wc() }, 2000)
      });

      wc()

   })
});

Si oui, je n'ai qu'ajouté un paramètre dans les expressions régulières ^^.

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Compteur caractères éditeur

Message par Xoumi le Jeu 24 Juil 2014 - 1:16

Hello,

Une intervention exemplaire en termes d'entraide ! C'est toujours plus intéressant (et motivant) d'apprendre que de consommer directement. Je pense sincèrement qu'il devrait exister un forum "JavaScriptActif" comme à l'instar de CSSActif (quand le CSS débutait) pour guider les nocives dans l'apprentissage et la vulgarisation de ce codage !

Je vous remercie beaucoup pour vos explications. J'avoue que j'avais compris dans la nuit, en lisant une kyrielle d'articles sur le Javascript (qui ne sont pas vulgarisés). J'ai pu ainsi corriger et adapter un compteur automatique sur plusieurs textarea, ce qui n'était pas une masse à faire quand on est novice  What a Face 

Concernant la correction du code, elle fonctionne impeccablement. J'avais vu ce problème mais je trouvais ça déplacé de vous refaire travailler dessus. Je m'étais dit que je travaillerais à partir de votre idée pour corriger le problème sur le long terme. C'est en forgeant que l'on devient forgeron (ou pas).

Encore une fois SeLfde4Th7, je tiens à vous remercier pour la qualité de l'entraide ainsi que votre dévouement dans une section qui n'est pas toujours facile (parlant en connaissance de cause).

Je passe le sujet en résolu !

Bien cordialement,
Xoumi.


Xoumi
*****

Messages : 604
Inscrit(e) le : 23/09/2010

http://www.harrypotter2005.net
Xoumi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Compteur caractères éditeur

Message par Self le Jeu 24 Juil 2014 - 3:47

Wahoo, votre enthousiasme à la résolution de ce problème fait super plaisir à voir, content de vous avoir été utile Mr. Green !

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum