intégration de ckeditor dans une dialog

Version imprimable

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:

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');
            });

05/08/2013, 20h59
danielhagnoul
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:

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:

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

Désolé çà ne marche pas mieux.
06/08/2013, 10h47
danielhagnoul

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.
06/08/2013, 18h33
Emmanuel Lecoester

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 :(.

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:

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:

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:

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>

06/08/2013, 22h05
Darkaurora

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...
07/08/2013, 07h53
Bovino

Citation:

j'ai la flemme de reconstruire ton html

:ptdr:
Je crois qu'avec des réponses comme ça, beaucoup auront la flemme de te répondre ! :no:
07/08/2013, 09h35
Darkaurora

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!
07/08/2013, 20h27
Emmanuel Lecoester

@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
08/08/2013, 13h28
Emmanuel Lecoester

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 :aie:

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 :oops:
08/08/2013, 14h00
Darkaurora

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 8O
08/08/2013, 14h13
Emmanuel Lecoester

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 :aie:

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

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...
09/08/2013, 09h34
danielhagnoul

Citation:

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 :aie:

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.
09/08/2013, 11h29
Emmanuel Lecoester

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.

:merci: à toi !