intégration de ckeditor dans une dialog [Débutant(e)]

**Emmanuel Lecoester** · 05/08/2013, 20h10

Bonjour à tous,

J'ai réussi à intégrer ckeditor dans une dialog. Pour qui n'a jamais essyé, il suffit de faire une petite recherche sur google et vous pourrez vous faire une idée.

Le code ci-dessous fonctionne mais... après avoir fait F5 sur la page.
En fait la première fois, la widget ckeditor s'affiche mais sans focus et donc sans contenu... si je fais F5 sur la page, la page se rafraichit et là miracle çà marche : j'ai le focus + le contenu.

D'après vous cela peut venir de où ?

Merci

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
               $("#eventToUpdate").dialog(
               {
                  autoOpen: false,
                  bgiframe: true,
                  title: "Update event",
                  width: 650,
                  modal: true,
                  closeOnEscape: true,
                  open: function (e, ui)
                  {
                     var instance = CKEDITOR.instances['#AEFC-eventToUpdate-description'];
                     if (instance)
                     {
                        instance.destroy(true);
                     }
                     $("#AEFC-eventToUpdate-tabs4").hide();
                     $("#AEFC-eventToUpdate-tab4").hide();
                     $('#AEFC-eventToUpdate-description').ckeditor();
                     $('#AEFC-eventToUpdate-description').val(event.description);
                     $('#AEFC-eventToUpdate-tabs').easytabs('select', '#AEFC-eventToUpdate-tabs1');
                  },
                  buttons:
                  {
                     "Update": function ()
                     {
                        $(this).dialog("close");
                     },
                     Cancel: function ()
                     {
                        $(this).dialog("close");
                     }
                  }
               });

               $('#eventToUpdate').dialog('open');
            });

**danielhagnoul** · 05/08/2013, 20h59

Bonsoir

Mettre le tabIndex sur 1, voir la documentation : http://docs.ckeditor.com/#!/api/CKEDITOR.config et http://docs.ckeditor.com/#!/guide/dev_configuration

Puis insérer le code suivant en dernière ligne de la méthode open() :

Code :

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

1
2
3
4
5
6
  open: function (e, ui)
  {
     // code
 
     $( "[tabIndex='1']" ).trigger( "focus" );
  },

Edit : Je ne sais pas pourquoi je me suis focalisé sur le tabIndex 1, cela devrait marcher avec sa valeur par défaut ( 0 ).

Donc :

Code :

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

1
2
3
4
5
6
  open: function (e, ui)
  {
     // le code actuel
 
     $( "[tabIndex='0']" ).trigger( "focus" );
  },

**Emmanuel Lecoester** · 05/08/2013, 22h39

Désolé çà ne marche pas mieux.

**danielhagnoul** · 06/08/2013, 10h47

Bonjour

Après la première ouverture de la page, que se passe-t-il lorsqu'on appuie sur la touche "Tab" ?

Tu as aussi testé ma première idée, mettre le tabIndex du CKEditor sur 1 ?

C'est peut-être plus grave qu'un simple problème de focus, hélas ! je ne connais pas du tout CKEditor.

**Emmanuel Lecoester** · 06/08/2013, 18h33

En appuyant sur TAB, à un moment, la zone HTML est entourée avec un trait pointillé gris donc je pense que ckeditor prend bien le focus.

C'est donc plus un problème de contenu :s

Même avec l'index à 1 çà pose souci

.

**danielhagnoul** · 06/08/2013, 20h32

Je suis en train d'apprendre CKEditor, mais je manque de temps ce soir.

Voici ma page de test avec le code de mon premier test.

J'ai repris l'exemple standard de CKEditor et le code de l'exemple http://jqueryui.com/dialog/#modal-message.

Lorsque le dialogue est ouvert, il suffit de cliquer sur le texte du message pour faire apparaître CKEditor et apporter des modifications.

Bien entendu les fichiers CKEditor sont sur mon ordinateur il faut changer l'accès en fonction de votre installation.

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://d3js.org/d3.v3.min.js",
			"http://danielhagnoul.developpez.com/lib/VerbalExpressions.js",
			"http://code.jquery.com/jquery-2.0.3.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"../ckeditor/ckeditor.js",
			"../ckeditor/adapters/jquery.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/d3Base.js",
			function(){
 
				$( function(){
 
					$( "#dialog-message" ).dialog({
						"modal" : true,
						"buttons" : {
							"Ok" : function(){
								$( this ).dialog( "close" );
							}
						}
					});
 
					$( "#editable" ).ckeditor();
 
				});
 
				$( window ).load( function(){
 
 
				});
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/sunny/jquery-ui.min.css">
	<link rel="stylesheet" href="sample.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
		#dialog-message { display: none; width: 50rem; }
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
		<div id="dialog-message" title="Download complete">
			<div id="editable" contenteditable>
				<p>
					<span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
					Your files have downloaded successfully into the My Downloads folder.
				</p>
				<p>
					Currently using <b>36% of your storage space</b>.
				</p>
			</div>
		</div>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-08-01T23:21:55.314+02:00" pubdate>2013-08-01T23:21:55.314+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

EDIT 22h08 Version 2 :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://d3js.org/d3.v3.min.js",
			"http://danielhagnoul.developpez.com/lib/VerbalExpressions.js",
			"http://code.jquery.com/jquery-2.0.3.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"../ckeditor/ckeditor.js",
			"../ckeditor/adapters/jquery.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/d3Base.js",
			function(){
 
				$( function(){
 
					$( "#dialog-message" ).dialog({
						"width" : "400px",
						"modal" : true,
						"open" : function(){
							$( "[tabIndex='1']" ).trigger( "blur" );
						},
						"buttons" : {
							"Modifier" : function(){
								$( "[tabIndex='1']" ).trigger( "focus" );
							},
							"Ok" : function(){
								console.log( $( "#editable" ).html() );
 
								$( this ).dialog( "close" );
							}
						}
					});
 
					$( "#editable" ).ckeditor();
 
				});
 
				$( window ).load( function(){
 
 
				});
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
		#dialog-message { display: none; width: 50rem; }
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
		<div id="dialog-message" title="Download complete">
			<div id="editable" contenteditable tabIndex="1">
				<p>
					<span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
					Your files have downloaded successfully into the My Downloads folder.
				</p>
				<p>
					Currently using <b>36% of your storage space</b>.
				</p>
			</div>
		</div>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-08-06T22:00:31.100+02:00" pubdate>2013-08-06T22:00:31.100+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

EDIT 23 h 00 version 3 (finale) :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://d3js.org/d3.v3.min.js",
			"http://danielhagnoul.developpez.com/lib/VerbalExpressions.js",
			"http://code.jquery.com/jquery-2.0.3.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"../ckeditor/ckeditor.js",
			"../ckeditor/adapters/jquery.js",
			"../ckeditor/lang/fr.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/d3Base.js",
			function(){
 
				$( function(){
 
					$( "#dialog-message" ).dialog({
						"autoOpen" : false,
						"width" : "400px",
						"modal" : true,
						"open" : function(){
							$( "[tabIndex='1']" ).trigger( "blur" );
							$( "#editable" ).ckeditor();
						},
						"buttons" : {
							"Modifier" : function(){
								$( "[tabIndex='1']" ).trigger( "focus" );
							},
							"Ok" : function(){
								console.log( $( "#editable" ).html() );
 
								$( this ).dialog( "close" );
							}
						}
					});
 
				});
 
				$( window ).load( function(){
 
					setTimeout( function(){
						$( "#dialog-message" ).dialog( "open" );
					}, 3000 );
 
				});
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
		#dialog-message { display: none; }
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
		<div id="dialog-message" title="Download complete">
			<div id="editable" contenteditable tabIndex="1">
				<p>
					<span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
					Your files have downloaded successfully into the My Downloads folder.
				</p>
				<p>
					Currently using <b>36% of your storage space</b>.
				</p>
			</div>
		</div>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-08-06T22:00:31.100+02:00" pubdate>2013-08-06T22:00:31.100+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

**Darkaurora** · 06/08/2013, 22h05

Pourrais tu me passer le code html?, j'ai la partie js tout est ok mais j'ai la flemme de reconstruire ton html. Surtout que tu utilises deux plugins que je ne connaît pas

et que tes ID ne veulent rien dire pour moi...

**Bovino** · 07/08/2013, 07h53

j'ai la flemme de reconstruire ton html

Je crois qu'avec des réponses comme ça, beaucoup auront la flemme de te répondre !

**Darkaurora** · 07/08/2013, 09h35

Bah désoler je veux bien aider mais n'étant pas doué je ne vais pas reconstruire un code html conséquent sachant que pour résoudre son problème il faut à mon avis à voir une vue d'ensemble car il peut tout aussi bien avoir un problème d'initialisation entre CKeditor, easytabs et ui dialog...

Je ne suis pas ici pour me plaindre, si il me passe son code html j'y jette un coup d’œil sinon j'ai pas le temps désoler.

J'ai déjà suffisamment à faire de mon côté pour me rajouter du travail supplémentaire.

Je rappel que je suis ici car j'ai eu et j'aurais très certainement besoin de votre aide, qu'ayant apprécier la qualité de l'aide qui m'a été apporté je souhaite participer et aider en retour et j'ajouterais que je n'ai qu'une motivation c'est de m'améliorer et que s'exercer et vous lire est une bonne solution. Maintenant si je dois passer 2 || 3 heures afin de reconstruire un code html semblable ( et excusez moi pour cette estimation qui est proche de mes compétences ), je le dis, je ne le ferais pas!

**Emmanuel Lecoester** · 07/08/2013, 20h27

@danielhagnoul : t'es un malade

Je vais regarder ton code d'ici demain. Car comme bien souvent, je suis passé à un autre sujet sur ma page. Mais ce bug de ckeditor me rend "perplexe". Donc tes bouts de code ne sont pas tombés aux oubliettes !

Manu

**Emmanuel Lecoester** · 08/08/2013, 13h28

Bon test effectué concluant avec ton code intégré dans ma page.

Mais ... Car oui j'ai un mais

Dans ton cas tu as pris un DIV comme conteneur alors que moi j'ai un TEXTAREA. Cà tu pouvais pas le savoir car je ne te l'avais pas dit

Cà marche donc avec le DIV mais pas avec un textarea.

Je vais regarder de plus près la solution en div pour avancer.

Encore merci !

EDIT : Je suis preneur aussi d'un exemple où la barre est figée dans la DIV

**Darkaurora** · 08/08/2013, 14h00

Je réitère ma question

... Pourrais tu me passer un extrait de ton html afin que je puisse t'aider à résoudre ce problème.

Pour ma part il y a un conflit entre UI dialog, easytabs & CKeditor et j'aimerais bien trouver une solution

**Emmanuel Lecoester** · 08/08/2013, 14h13

Hello dark,

En fait tu prends le code version 3 fourni par danielhagnoul et tu mets TEXTAREA au lieu de DIV. Et tu auras le même problème que moi.

Concernant mon code c'est assez chaud à te le donner de but en blanc car il est lourd

par contre tout ce qui est easytabs dans mon code fourni tu peux oublier, le problème n'est pas là.

**Darkaurora** · 08/08/2013, 14h40

Bah je n'ai pas besoins de l'ensemble mais de la partie html concerné, après c'est ton choix

Par contre je n'ai aucun problème que ce soit une div ou un textarea ou même une cellule de tableau...

**danielhagnoul** · 09/08/2013, 09h34

Envoyé par Emmanuel Lecoester

Dans ton cas tu as pris un DIV comme conteneur alors que moi j'ai un TEXTAREA. Cà tu pouvais pas le savoir car je ne te l'avais pas dit

Cà marche donc avec le DIV mais pas avec un textarea.

Je vais regarder de plus près la solution en div pour avancer.

La dernière version (4.2) de CKEditor prend en compte le HTML5. Utilisé un textaera au lieu d'une division éditable, c'est l'ancienne méthode, plus complexe, toujours disponible, mais je ne vois pas l'intérêt d'apprendre à me servir d'un truc obsolète. Surtout lorsque tu as déjà un spécialiste de la chose sous la main.

**Emmanuel Lecoester** · 09/08/2013, 11h29

Merci pour l'info !

C'est là ou je me rend compte qu'il va falloir travailler un peu plus sur mes intégrations de composants.

En tout cas ta solution fonctionne à merveille contrairement à la solution textarea donc je vais rester en DIV.

à toi !

intégration de ckeditor dans une dialog [Débutant(e)] [UI]

jQuery

Discussions similaires

Partager

Partager