Discussion :

[moimp]

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.

[NoSmoking]

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.

[moimp]

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.

[NoSmoking]

Tu n'as pas lu en plein la réponse que je t'ai faite :

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

[moimp]

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