Padding intempestif quand <div contenteditable="true">

**Nyro Xeo** · 08/09/2013, 00h43

Salut à tous,

J'expérimente un souci désagréable avec CKEditor, que je viens de découvrir.

J'ai un div dont on peut éditer le contenu :

Code :

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

<div contenteditable="true">Hello world</div>

Grâce à CKEditor, lorsque je clique sur le <div>, il est éditable avec l'éditeur de texte, c'est nickel.

Sauf que je remarque qu'une marge intérieure (padding quoi) intempestive apparaît dans mon <div>.

Ca ne le fait pas si j'enlève l'attribut contenteditable. Et ça ne le fait pas non plus s'il s'agit d'autre chose qu'un <div>. Un <p> par exemple n'aura pas de marge intempestive.

Je suis certain que cela vient de CKEditor puisque si je désactive le AutoInline (qui sert à rendre tous les contenteditable="true" éditables par CKEditor), la marge disparaît.

Voici un code pour que vous puissiez tester, si l'envie vous prend :

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
<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>Titre</title>
		<style>
		div[contenteditable="true"]
		{
			border: 1px dotted grey;
		}
		</style>
	</head>
	<body>
		<div contenteditable="true">
			Hello world
		</div>
		<script type="text/javascript" src="http://localhost/uv/script/ckeditor/standard/ckeditor.js"></script>
	</body>
</html>

Vous verrez une marge intérieure dans le <div>.

Maintenant, rajoutez juste avant le </body> ceci :

Code :

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

1
2
3
<script type="text/javascript">
CKEDITOR.disableAutoInline = true;
</script>

Vous verrez qu'il n'y a plus de marge dans le <div>. Preuve que le problème vient de CKEditor.

Quelqu'un aurait une piste ?

J'en doute puisque ça touche directement l'éditeur, mais sait-on jamais.

Merci bien d'avance !

PS : Le problème apparaît sous Google Chrome et Firefox, et probablement d'autres.

**NoSmoking** · 08/09/2013, 12h52

Bonjour,

Vous verrez qu'il n'y a plus de marge dans le <div>. Preuve que le problème vient de CKEditor.

Avec l'utilisation d'une balise support de type DIV, en mode normal, chaque ligne est mise dans une balise P qui par défaut possède une marge.

Pour supprimer celle ci il te suffit de mettre le CSS suivant

Code css :

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

1
2
3
div[contenteditable="true"] p{
  margin:0;
}

en mode CKEDITOR.disableAutoInline = true;, c'est la balise support qui devient éditable.

Quelqu'un aurait une piste ?

J'en doute puisque ça touche directement l'éditeur, mais sait-on jamais.

l'optimisme a du bon

**Nyro Xeo** · 08/09/2013, 13h12

Oh trop bon !

Excellent, merci infiniment !

Envoyé par NoSmoking

l'optimisme a du bon

Je croyais à un "bug" de CKEditor, donc je ne pensais pas obtenir de réponse, mais finalement comme tu l'expliques c'est très logique. J'ai bien fait de poster.

Padding intempestif quand <div contenteditable="true"> [CKEditor]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager