Padding intempestif quand <div contenteditable="true">
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:
<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:
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:
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.
