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

Servlets/JSP Java Discussion :

ckeditor bloque la valeur du textarea


Sujet :

Servlets/JSP Java

  1. #1
    Membre habitué
    Inscrit en
    juin 2005
    Messages
    486
    Détails du profil
    Informations forums :
    Inscription : juin 2005
    Messages : 486
    Points : 198
    Points
    198
    Par défaut ckeditor bloque la valeur du textarea
    Bonjour

    J'ai un formulaire avec des champs input et un textarea géré par l'éditeur riche ckeditor. J'arrive à récupérer les infos du formulaire à partir d'une servlet pour tous les input sauf pour le textarea, la valeur que je récupère dans le textarea est vide. Mais lorsque je supprime le ckeditor, j'arrive à récupérer cette valeur. A priori, le ckeditor bloque la valeur contenue dans le textarea et je ne sais pas pourquoi.

    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
    <form name="form1" id="form1">
     
    <div class="input-group titre_article">
    <span class="input-group-addon">Titre de l'article:</span>
    	<input class="form-control" type="text" name="titre">
    <span class="erreur_titre"></span>
    		</div>
     
    	<div class="panel-body">
    		<!-- This <div> holds alert messages to be display in the sample page. -->
    			<div id="alerts">
    			<noscript>
    			<p>
    				<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript support, like yours, you should still see the contents (HTML data) and you should be able to edit it normally, without a rich editor interface.
    			</p>
    			</noscript>
    	</div>
    	<!-- This <fieldset> holds the HTML that you will usually find in your pages. -->
     
    	<textarea name="texte" cols="80" class="ckeditor" id="editeur" rows="10"></textarea>
               <span class="erreur_texte"></span>									
     
    	</div>
     
    	<div class="input-group pan_image">
    	<span class="input-group-addon">Ajouter une image:</span>
               <input type="file" class="custom-file-input" id="customFile" name="image">
                       <span class="erreur_image"></span>
    	</div>
    						<br>
          <button type="button" class="btn btn-primary btn_article">Envoyer</button>
    </form>
    Donc quand je supprime class="ckeditor" , j'arrive à récupérer la valeur contenue dans le textarea.

    Merci

  2. #2
    Membre éprouvé Avatar de Cincinnatus
    Homme Profil pro
    Développeur Java
    Inscrit en
    mars 2007
    Messages
    443
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Service public

    Informations forums :
    Inscription : mars 2007
    Messages : 443
    Points : 1 158
    Points
    1 158
    Par défaut
    Bonjour,

    La partie du code concernant ckeditor semble provenir d'un tutoriel de 2011, mis à jour en 2012.
    https://www.tutorielsenfolie.com/tut...-CKEditor.html

    Si tu utilises une version plus récente de ce composant les changements sont peut-être trop importants pour utiliser cette doc, et peut-être faut-il voir la doc officielle ?

  3. #3
    Membre habitué
    Inscrit en
    juin 2005
    Messages
    486
    Détails du profil
    Informations forums :
    Inscription : juin 2005
    Messages : 486
    Points : 198
    Points
    198
    Par défaut
    J'ai changé de tutoriel en allant directement sur le site de CKeditor.

    J'ai téléchargé le format Zip via ce lien:
    https://ckeditor.com/ckeditor-5/download/

    Et j'ai suivi les instructions via ce lien:
    https://ckeditor.com/docs/ckeditor5/...ving-data.html

    Et voici mon code:

    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
    </head>
    <script type="text/javascript" src="ckeditor5-build-classic/ckeditor.js"></script>
    </head>
     
    <body>
     
    <form>
    <textarea  id="editor" name="texte"></textarea>
    </form>
     
             <script>
                ClassicEditor
                .create( document.querySelector( '#editor' ) )
                .catch( error => {
                    console.error( error );
                } );
            </script>
    </body>
    Mais toujours rien, je récupère toujours une valeur Null.

  4. #4
    Membre habitué
    Inscrit en
    juin 2005
    Messages
    486
    Détails du profil
    Informations forums :
    Inscription : juin 2005
    Messages : 486
    Points : 198
    Points
    198
    Par défaut
    Finalement ça marche, j'arrive à récupérer la valeur du CKEditor. voici le code:

    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
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    
    <head>
     <script src="ckeditor/ckeditor.js"></script>
            
    </head>
    
    <body>
    
    <form>
    <textarea  id="editor" name="editor"></textarea>
    </form>
    
     <script>
             CKEDITOR.replace( 'editor' );
        </script>
    
     <script>
        $(function() {
    //Current request reference; can be used else where
    var request;
     
    /* attach a submit handler to the form */
    $(".btn_article").click(function(event) {
        // abort any pending request
        if (request) {
            request.abort();
        }
         
      /* stop form from submitting normally */
      event.preventDefault();
    
      /*clear result div*/
       $("#result").html('');
       
       var formData = new FormData();
       
      /* $("input[type='file']").each(function(index,inputFile) {
          formData.append(inputFile.name, inputFile.files[0]); // exemple pour un champ monofichier, sinon il faut parcourir le tableau et créer un tableau avec chaque fichier dedans
       });
       
       var other_data = $('#form1').serializeArray();
        $.each(other_data,function(key,input){
            formData.append(input.name,input.value);
            console.log("champ1: "+input.name+" = "+input.value);
        });
     */
    
    var titre = $('#form1 input[name="titre"]').val();
    var categ = $('#form1 select[name="categorie"]').val();
    var texte =  CKEDITOR.instances['editor'].getData();
    
    console.log("le titre est: "+titre);
    console.log("la catégorie est: "+categ);
    console.log("le texte est: "+texte);
    
    formData.append('titre', titre);
    formData.append('categorie', categ);
    formData.append('editor', texte);
    
     $("input[type='file']").each(function(index,inputFile) {
          formData.append(inputFile.name, inputFile.files[0]); // exemple pour un champ monofichier, sinon il faut parcourir le tableau et créer un tableau avec chaque fichier dedans
       });
      /* Send the data using post and put the results in a div */
      request =$.ajax({
          url: "creationArticle",
          type: "POST",
          enctype: 'multipart/form-data',
          data:  formData,
          processData: false,
          contentType: false,
          cache: false,
          success: function(data){
              var result=data.split("+");
    
    var erreur_titre = result[0];
    var erreur_categ = result[1];
    var erreur_texte = result[2];
    var erreur_image = result[3];
    var resultat = result[4];
    
    console.log("ok:"+data);
    
    $('.erreur_titre').html(erreur_titre);
    $('.erreur_categ').html(erreur_categ);
    $('.erreur_texte').html(erreur_texte);
    $('.erreur_image').html(erreur_image);
    $('#result').html(resultat);
          },
          error:function(){
              $("#result").html('there is error while submit');
          }  
      });
      return false;
    
    });
    
    });
    
        </script>
    
    </body>
    Maintenant le problème est que j'aimerais mettre cette fonction dans un fichier jquery "creer.fichier.js" pour ne pas trop surcharger le code de la page jsp.

    Sauf qu'en isolant le code, la variable CKEditor n'est pas reconnu car je ne sais pas comment définir le chemin menant vers /ckeditor/ckeditor.js dans le fichier jquery.

  5. #5
    Membre éprouvé Avatar de Cincinnatus
    Homme Profil pro
    Développeur Java
    Inscrit en
    mars 2007
    Messages
    443
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Service public

    Informations forums :
    Inscription : mars 2007
    Messages : 443
    Points : 1 158
    Points
    1 158
    Par défaut
    Simplement en chargeant la librairie et le source depuis la page :
    <head>
    <script src="ckeditor/ckeditor.js"></script>
    <script src="scripts/creer.fichier.js"></script>
    </head>

  6. #6
    Membre habitué
    Inscrit en
    juin 2005
    Messages
    486
    Détails du profil
    Informations forums :
    Inscription : juin 2005
    Messages : 486
    Points : 198
    Points
    198
    Par défaut
    Oui je sais cela, sauf que si je crée mon fichier jquery "creer.fichier.js", et que je mets ce code:

    Code JavaScript : 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
     $(function() {
    //Current request reference; can be used else where
    var request;
     
    /* attach a submit handler to the form */
    $(".btn_article").click(function(event) {
        // abort any pending request
        if (request) {
            request.abort();
        }
     
      /* stop form from submitting normally */
      event.preventDefault();
     
      /*clear result div*/
       $("#result").html('');
     
       var formData = new FormData();
     
      /* $("input[type='file']").each(function(index,inputFile) {
          formData.append(inputFile.name, inputFile.files[0]); // exemple pour un champ monofichier, sinon il faut parcourir le tableau et créer un tableau avec chaque fichier dedans
       });
     
       var other_data = $('#form1').serializeArray();
        $.each(other_data,function(key,input){
            formData.append(input.name,input.value);
            console.log("champ1: "+input.name+" = "+input.value);
        });
     */
     
    var titre = $('#form1 input[name="titre"]').val();
    var categ = $('#form1 select[name="categorie"]').val();
    var texte =  CKEDITOR.instances['editor'].getData();
     
    console.log("le titre est: "+titre);
    console.log("la catégorie est: "+categ);
    console.log("le texte est: "+texte);
     
    formData.append('titre', titre);
    formData.append('categorie', categ);
    formData.append('editor', texte);
     
     $("input[type='file']").each(function(index,inputFile) {
          formData.append(inputFile.name, inputFile.files[0]); // exemple pour un champ monofichier, sinon il faut parcourir le tableau et créer un tableau avec chaque fichier dedans
       });
      /* Send the data using post and put the results in a div */
      request =$.ajax({
          url: "creationArticle",
          type: "POST",
          enctype: 'multipart/form-data',
          data:  formData,
          processData: false,
          contentType: false,
          cache: false,
          success: function(data){
              var result=data.split("+");
     
    var erreur_titre = result[0];
    var erreur_categ = result[1];
    var erreur_texte = result[2];
    var erreur_image = result[3];
    var resultat = result[4];
     
    console.log("ok:"+data);
     
    $('.erreur_titre').html(erreur_titre);
    $('.erreur_categ').html(erreur_categ);
    $('.erreur_texte').html(erreur_texte);
    $('.erreur_image').html(erreur_image);
    $('#result').html(resultat);
          },
          error:function(){
              $("#result").html('there is error while submit');
          }  
      });
      return false;
     
    });
     
    });

    Au niveau de cette ligne:

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    var texte =  CKEDITOR.instances['editor'].getData();

    CKEDITOR est souligné en jaune par netbeans et j'ai ce message d'erreur:

    The global variable "CKEDITOR is not declared"
    Donc il faut que j'importe le fichier ckeditor.js dans mon fichier jquery. Est-ce possible?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Modifier valeur dans textarea
    Par nicerico dans le forum jQuery
    Réponses: 6
    Dernier message: 03/05/2013, 13h06
  2. [CKEditor] Récupérer la valeur du textarea par javascript
    Par junior2386 dans le forum Bibliothèques & Frameworks
    Réponses: 2
    Dernier message: 09/11/2011, 14h56
  3. [CKEditor] Afficher la valeur de mon textarea via PHP
    Par Arget dans le forum Bibliothèques & Frameworks
    Réponses: 7
    Dernier message: 03/08/2011, 11h17
  4. Recuperer nouvelle valeur de textarea
    Par rom56 dans le forum ASP.NET
    Réponses: 2
    Dernier message: 22/12/2009, 14h57
  5. Valeur dans Textarea
    Par deutschy dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 12/10/2007, 15h49

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