Textarea avec déjà un id, name, class présents

**dancom5** · 27/10/2015, 09h17

Bonjour.

Le but est lorsque j'écris quelque chose, un mot apparaisse dans la page que le texte est modifié.
Si j'écris, un mot doit apparaitre et si je recul (backspace), ce mot disparait.
Sur le site de test, ça marche bien mais pas dans mon code avec ckeditor. Si quelqu'un a une astuce,
j'aimerais bien la connaître. Voici une démo:

DEMO

J'utilise présentement un ID, un NAME et une CLASS dans mon textarea:

Code :

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

<textarea id="contents" class="ckeditor" type='text' name='contenu'><?=$contenu?></textarea>

Mais, je cherche à ajouter ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<p id="buttonId" style="display:none">à sauvegarder</p>
 
var button = $("#buttonId");
$("textarea").on('input', function (e) {
    if (e.target.value === '') {
        // Textarea has no value
        button.hide();
    } else {
        // Textarea has a value
        button.show();
    }
});

Le problème, c'est que le ID, Class et Name sont déjà utilisé par CKEDITOR et je n'obtiens pas le résultat souhaité.

**danielhagnoul** · 27/10/2015, 18h33

Il faut apprendre à se servir de l'API de CKEditor. Je ne connaissais pas, mais après une courte recherche, j'obtiens le résultat souhaité.

Code html :

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

1
2
3
4
<textarea name="editor1" id="editor1" rows="10" cols="80">
  Texte quelconque
</textarea>
<button id="btn">Go</button>

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
$( window ).load( function(){
 
  // CKEditor API : http://docs.ckeditor.com/#!/api/CKEDITOR.editor
 
  /*
   * Replace the <textarea id="editor1"> with a CKEditor
   * instance, using default configuration.
   */
  var editor = CKEDITOR.replace( 'editor1' );
 
  // The "change" event is fired whenever a change is made in the editor.
  editor.on( 'change', function( evt ) {
      // getData() returns CKEditor's HTML content.
 
      if ( evt.editor.getData().length == 0 ){
        $( "#btn" ).fadeOut();
      } else {
        $( "#btn" ).fadeIn();
      }
  });

**dancom5** · 27/10/2015, 20h21

J'ai testé dans mon serveur de développement et aussi sur https://jsfiddle.net/ et ça ne fonctionne pas.

J'ai mis ===0 au lieu de ==0 à cause que jsfiddle indiquait une erreur. Sans résultats.

Code :

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

1
2
3
4
5
6

<textarea name="editor1" id="editor1" rows="10" cols="80">
  Texte quelconque
</textarea>
<button id="btn">Go</button>

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
 
$(window).load(function () {
 
    // CKEditor API : http://docs.ckeditor.com/#!/api/CKEDITOR.editor
 
    /*
     * Replace the <textarea id="editor1"> with a CKEditor
     * instance, using default configuration.
     */
    var editor = CKEDITOR.replace('editor1');
 
    // The "change" event is fired whenever a change is made in the editor.
    editor.on('change', function (evt) {
        // getData() returns CKEditor's HTML content.
 
        if (evt.editor.getData().length === 0) {
            $("#btn").fadeOut();
        } else {
            $("#btn").fadeIn();
        }
    });
});

**danielhagnoul** · 28/10/2015, 09h48

Le code de ma page de test, pour le tester il suffit de le copier-coller dans un nouveau fichier JS :

Code html :

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.min.css">
  <style>
 
 
  </style>
</head>
<body>
 
  <textarea name="editor1" id="editor1" rows="10" cols="80">
    Texte quelconque
  </textarea>
  <button id="btn">Go</button>
 
 
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.5.4/ckeditor.js"></script>
  <script>
    "use strict";
 
                $( function(){ // forme abrégée de $(document).ready( function( ){
      
                });
    
    $( window ).load( function(){
      
      // CKEditor API : http://docs.ckeditor.com/#!/api/CKEDITOR.editor
      
      /*
       * Replace the <textarea id="editor1"> with a CKEditor
       * instance, using default configuration.
       */
      var editor = CKEDITOR.replace( 'editor1' );
      
      // The "change" event is fired whenever a change is made in the editor.
      editor.on( 'change', function( evt ) {
          // getData() returns CKEditor's HTML content.
          
          if ( evt.editor.getData().length == 0 ){
            $( "#btn" ).fadeOut();
          } else {
            $( "#btn" ).fadeIn();
          }
      });
      
    });
  </script>
</body>
</html>

**dancom5** · 05/11/2015, 09h04

A temps nornal, ça marche mais vu que le ID est déjà utilisé par un autre javascript, ça ne fonctionne pas.

C'était l'objet principale de ma question au début.

Pas grave, j'ai trouver une autre solution de remplacement.

**danielhagnoul** · 05/11/2015, 09h23

Un ID doit être unique dans la page web.

**dancom5** · 05/11/2015, 09h31

Donc, si je mets un truc pour ajouter un effet avec jquery dans le textarea alors que le ID utilise un autre truc avec jquery, je ne pourrai pas ajouter cet effet?

Textarea avec déjà un id, name, class présents

jQuery

Vue hybride

Discussions similaires

Partager

Partager