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.