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>

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager