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 actif
    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 expérimenté
    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 actif
    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/latest/builds/guides/integration/saving-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 actif
    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 expérimenté
    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 actif
    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?

###raw>template_hook.ano_emploi###