Bonjour,
La page est chargée avec 5 divs qui peuvent être édités par tinymce via la fonction "inline". Malheureusement lorsque de nouveaux divs sont ajoutés dynamiquement, tinymce ne s'active pas sur les nouveaux éléments... Comment puis-je forcer Tinymce à se recharger une fois que les éléments ont été ajoutés ?
Mon html :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 <div id=\"billetdroit\"> <div id=\"divtitre\"><h1 class=\"editable\">blablabla</h1></div> <div class=\"editable\" id=\"tiny_01\">blablabla2</div> </div> <div id=\"billetdroit\"> <div id=\"divtitre\"><h1 class=\"editable\">blablabla</h1></div> <div class=\"editable\" id=\"tiny_02\">blablabla2</div> </div> <div id=\"billetdroit\"> <div id=\"divtitre\"><h1 class=\"editable\">blablabla</h1></div> <div class=\"editable\" id=\"tiny_03\">blablabla2</div> </div> ... ...
Lorsqu'on clique sur un bouton, les 5 divs s'ajoutent.
Mon tinymce init :
Et enfin mon code jQuery qui ajoute dynamiquement les divs :
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 tinymce.init({ selector: "textarea", language: 'fr_FR', image_advtab: true, menubar:false, forced_root_block: false, plugins: ["link","code","media","image","textcolor", "emoticons"], toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons" }); tinymce.init({ selector: "h1.editable", language: 'fr_FR', inline: true, toolbar: "undo redo", menubar: false }); tinymce.init({ selector: "div.editable", language: 'fr_FR', image_advtab: true, menubar:false, inline: true, forced_root_block: false, plugins: ["link","code","media","image","textcolor", "emoticons"], toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons" });
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
37
38
39
40
41
42
43
44
45
46
47 $(document).ready(function() { var track_click = 1; //track user click on "load more" button, righ now it is 0 click var total_pages = Globals.total_pages; // $('#results').load("loadmore.php", {'page':track_click}, function() {track_click++;}); //initial data to load $(".load_more").click(function (e) { //user clicks on button $(this).hide(); //hide load more button on click $('.animation_image').show(); //show loading image if(track_click <= total_pages) //user click number is still less than total pages { //post page number and load returned data into result element $.post('loadmore.php',{'page': track_click}, function(data) { $(".load_more").show(); //bring back load more button $("#results").append(data); //append data received from server //scroll page smoothly to button id $("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500); //hide loading image $('.animation_image').hide(); //hide loading image once data is received track_click++; //user click increment on load button }).fail(function(xhr, ajaxOptions, thrownError) { //any errors? alert(thrownError); //alert with HTTP error $(".load_more").show(); //bring back load more button $('.animation_image').hide(); //hide loading image once data is received }); if(track_click >= total_pages-1) //compare user click with page number { //reached end of the page yet? disable load button $(".load_more").attr("disabled", "disabled"); } } }); });
Partager