ckeditor bloque la valeur du textarea

**momjunior** · 02/11/2018, 11h05

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

**Cincinnatus** · 02/11/2018, 13h04

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 ?

**momjunior** · 06/11/2018, 17h20

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.

**momjunior** · 14/11/2018, 16h50

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.

**Cincinnatus** · 15/11/2018, 08h52

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>

**momjunior** · 15/11/2018, 09h29

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?

ckeditor bloque la valeur du textarea

Servlets/JSP Java

Discussions similaires

Partager

Partager