IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
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

Bibliothèques & Frameworks Discussion :

Ajouter un 'data-placeholder' dans le premier élément du contenu [CKEditor]


Sujet :

Bibliothèques & Frameworks

  1. #1
    Membre éclairé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    1 309
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 70
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 1 309
    Points : 672
    Points
    672
    Par défaut Ajouter un 'data-placeholder' dans le premier élément du contenu
    Bonjour,
    J'utilise CKEditor avec un attribut placeholder comme ceci:
    Code js : 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
    	DecoupledEditor
    		.create( document.querySelector( '#editor' ), {
    			language: 'fr',
    			placeholder: "Entrez votre texte ici.",
    			toolbar: {
    				removeItems: ['insertTable', 'mediaEmbed']
    			}
    		} )
    		.then( editor => {
    			const toolbarContainer = document.querySelector( '#toolbar-container' );
     
    			toolbarContainer.appendChild( editor.ui.view.toolbar.element );
    		} )
    		.catch( error => {
    			console.error( error );
    	    } );
    Malheureusement, la première balise du contenu est affecté de cet attribut, comme ici: <h2 data-placeholder="Entrez votre texte ici.">. Je pense qu'il s'agit d'un défaut de CKEditor. Bien sûr je peux le filtrer mais ce serait tout de même mieux d'éviter ce problème.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    16 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 093
    Points : 40 883
    Points
    40 883
    Par défaut
    Bonjour,
    Je pense qu'il s'agit d'un défaut de CKEditor.
    non c'est le comportement par défaut, dès que tu tapes du texte ton placeholder disparaît et ce quelque soit le format, de plus si tu récupères le contenu via un getData() celui-ci sera vide.

  3. #3
    Membre éclairé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    1 309
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 70
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 1 309
    Points : 672
    Points
    672
    Par défaut
    J'ai mal du m'expliquer ou pas assez. Voici ce qui se passe.
    1. Je saisi 'mon titre' et 'mon paragraphe' dans la zone de saisie (le placeholder disparaît dès le premier caractère saisi et c'est normal);
    2. Je sélectionne 'mon titre' et je lui affecte 'Titre 1' avec la boîte à outils;
    3. Je sélectionne 'mon paragraphe' et je lui affecte 'Paragraphe' avec la boîte à outil;
    4. J'enregistre.

    Dans le document enregistré résultant, j'obtiens: <h1 placeholder="xxxx">mon titre</h1><p>mon paragraphe</p>.
    On voit bien que le placeholder de la zone de saisie se trouve maintenant dans la première balise html générée par CKEditor et c'est pour cela que je pense que c'est un défaut de l'éditeur.

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    16 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 093
    Points : 40 883
    Points
    40 883
    Par défaut
    Tu n'as pas lu en plein la réponse que je t'ai faite :
    Citation Envoyé par NoSmoking
    ... de plus si tu récupères le contenu via un getData() celui-ci sera vide.

    Visiblement tu récupères le contenu avec une lecture du innerHTML alors qu'il te faut le récupérer avec la méthode dédiée getData()

    La différence est importante puisque dans un cas tu auras
    DOM.innerHTML : <h2 data-placeholder="Entrez votre texte ici.">Titre</h2><p>paragraphe</p>
    et dans l'autre
    CKEdotor.getData : <h2>Titre</h2><p>paragraphe</p>, HTML épuré de tous les markdown utilisés en interne par CKEditor.

    Il te suffit donc de récupérer la référence à l’éditeur pour pouvoir accéder à ses méthodes :
    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
    let ckEditor; // variable globale
    DecoupledEditor
      .create(document.querySelector('#editor'), {
        language: 'fr',
        placeholder: "Entrez votre texte ici.",
        toolbar: {
          removeItems: ['insertTable', 'mediaEmbed']
        }
      })
      .then(editor => {
        // récup. référence editeur
        ckEditor = editor;
     
        const toolbarContainer = document.querySelector('#toolbar-container');
     
        toolbarContainer.appendChild(editor.ui.view.toolbar.element);
      })
      .catch(error => {
        console.error(error);
      });
    et pour la récupération du contenu c'est simplement :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    const innerHTML = ckEditor.getData();

  5. #5
    Membre éclairé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    1 309
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 70
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 1 309
    Points : 672
    Points
    672
    Par défaut
    Effectivement cela fonctionne et je comprends mieux.
    Je n'aurais pas eu l'idée de récupérer la référence à l'éditeur, d'autant plus que je n'avais pas compris l'utilité de la méthode then de l'éditeur. Je ne suis toujours pas sûr de l'avoir comprise. Je suppose que cette méthode indique ce que l'éditeur doit faire, une fois qu'il est créé.

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

Discussions similaires

  1. [CKEditor] Ajouter des class/style dans la liste déroulante des styles CKEditor 4.x
    Par Darkhan dans le forum Bibliothèques & Frameworks
    Réponses: 1
    Dernier message: 02/08/2014, 22h15
  2. Réponses: 0
    Dernier message: 20/08/2013, 11h59
  3. Ajout web user control dans un placeholder
    Par gabdeschenes dans le forum ASP.NET
    Réponses: 4
    Dernier message: 13/11/2009, 16h47
  4. [XL-2007] Ajouter les donnée d'un userform dans la premiere ligne vide
    Par dodo28 dans le forum Macros et VBA Excel
    Réponses: 7
    Dernier message: 31/07/2009, 00h12
  5. [VB6] [MSHFlexGrid] Tri sur clic dans la première ligne
    Par degreste dans le forum VB 6 et antérieur
    Réponses: 5
    Dernier message: 06/03/2003, 00h42

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