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

Version imprimable

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:

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

Mais, je cherche à ajouter ceci :
Code:

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é.

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:

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

Code:

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();
      }
  });

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:

1
2
3
4
5
6

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

Code:

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();
        }
    });
});

:calim2:

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

Code:

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>

05/11/2015, 09h04
dancom5

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.
05/11/2015, 09h23
danielhagnoul

Un ID doit être unique dans la page web.
05/11/2015, 09h31
dancom5

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?