1 pièce(s) jointe(s)
Utiliser Xing pour Reveal.js
Bonjour,
J'ai un projet où je dois utiliser Reveal.js (un "framework" js qui permet de faire des diaporamas) et faire un éditeur wysiwyg (ou utiliser un existant) afin de modifier le contenu de mon diaporama.
J'ai donc choisi l'éditeur wysiwyg Xing (HTML5).
J'arrive à récupérer le contenu de mon diaporama pour le mettre dans un textarea.
Ce dernier est contrôlé par Xing.
Mais lorsque je réalise une modification sur mon textarea et que je quitte mon éditeur, aucune modification n'apparaît sur mon diaporama. (Or je souhaiterai l'inverse)
(Appuyez sur E pour ouvrir l'éditeur)
Voici mon code:
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
101
102
103
104
105
106
107
108
109
110
111
| <body id="first">
<div class="container">
<div id="editor">
<span class="glyphicon glyphicon-remove"></span>
<h4>Editeur HTML</h4>
<div class="edit">
<form>
<div id="toolbar" style="display: none;">
<a data-wysihtml5-command="bold" title="CTRL+B"><b>gras</b></a> |
<a data-wysihtml5-command="italic" title="CTRL+I"><i>italique</i></a> |
<a data-wysihtml5-command="createLink">lien</a> |
<a data-wysihtml5-command="insertImage">image</a> |
<a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1">h1</a> |
<a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2">h2</a> |
<a data-wysihtml5-command="insertUnorderedList">liste à puces</a> |
<a data-wysihtml5-command="insertOrderedList">liste à numéros</a> |
<a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="red" style="color:red;">rouge</a> |
<a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="green" style="color:green;">vert</a> |
<a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="blue" style="color:blue">bleu</a>
<a data-wysihtml5-action="change_view">HTML</a>
<div data-wysihtml5-dialog="createLink" style="display: none;">
<label>
Link:
<input data-wysihtml5-dialog-field="href" value="http://">
</label>
<a data-wysihtml5-dialog-action="save">OK</a> <a data-wysihtml5-dialog-action="cancel">Cancel</a>
</div>
<div data-wysihtml5-dialog="insertImage" style="display: none;">
<label>
Image:
<input data-wysihtml5-dialog-field="src" value="http://">
</label>
<label>
Align:
<select data-wysihtml5-dialog-field="className">
<option value="">default</option>
<option value="wysiwyg-float-left">left</option>
<option value="wysiwyg-float-right">right</option>
</select>
</label>
<a data-wysihtml5-dialog-action="save">OK</a> <a data-wysihtml5-dialog-action="cancel">Cancel</a>
</div>
</div>
<textarea id="textarea"></textarea>
</form>
</div>
</div>
<div class="reveal">
<div id="slides" class="slides">
<!--<section data-markdown>
<script type="text/template">
## Titre en Markdown
Paragraphe en Markdown avec un [lien](http://a-pitaut.xyz/bi_code).
</script>
</section>-->
<section>
<h2>Titre en HTML niveau 2</h2>
<p>Paragraphe en HTML</p>
</section>
<section>
<section>
<p>Slide du Haut</p>
</section>
<section>
<h3>Code basique d'une page html</h3>
<pre class="hljs"><code style="font-weight:bold" data-trim contenteditable><!DOCTYPE html>
<html>
<head>
<title>Accueil</title>
<meta charset="utf-8">
</head>
<body>
<div> </div>
</body>
</html></code></pre>
</section>
</section>
<section>
<h1>Au revoir.</h1>
</section></div>
</div>
</div>
<!-- Javascript -->
<script src="./jquery/jquery-1.11.3.min.js"></script>
<script src="./reveal.js/lib/js/head.min.js"></script>
<script src="./reveal.js/js/reveal.js"></script>
<script src="./xing/parser_rules/advanced.js"></script>
<script src="./xing/dist/wysihtml5-0.3.0.js"></script>
<script>
var editor = new wysihtml5.Editor("textarea", {
toolbar: "toolbar",
parserRules: wysihtml5ParserRules
});
</script>
<script src="./source/editor.js"></script>
<script src="./source/code.js"></script>
</body> |
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
| /*****EDITOR*****/
/* Editeur */
$editor = $("#editor");
$exit = $(".glyphicon-remove"); // Bouton croix pour fermer l'éditeur
$crayon = $(".glyphicon-pencil");
$content = $("#first #slides");
$text = $("#textarea");
$(document).ready( function(){
$text.text($("#slides").html());
});
// Ouvrir l'éditeur avec la touche E
$(document).keyup( function(key) {
if(key.keyCode == 69 && $flag_editor == false)
{
/* Affiche l'éditeur */
$flag_editor = true;
$editor.show();
}
});
$crayon.click( function() {
/* Affiche l'éditeur */
$flag_editor = true;
$editor.show();
});
$exit.click( function() {
if($flag_editor == true)
{
/* Applique le contenu de #editeur dans .slides */
$("#first #slides").html($("#textarea").text());
/* Cache l'éditeur */
$flag_editor = false;
$editor.hide();
}
}); |
Ci-joint l'archive : Pièce jointe 193953
Merci de votre aide.
