Discussion :

[nzangel]

Bonjour,

dans le but de faire un planning, je voudrais utiliser Tinymce. Un tableau est affiché avec les jours de la semaine et le nom des personnes.

chaque cellule du tableau contient un div. Lorsque je click sur un DIV, l'éditeur Tinymce apparaît avec, normalement le contenu du div. Mais le contenu n’apparaît pas.
Si je désactive tinymce, je vois bien le contenu dans mon textarea.

une petite image :


la config de tinymce :

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
<script type="text/javascript">
tinyMCE.init({
        theme : "advanced",
        mode : "textareas",
		language : "fr",
		width : "400",
		height : "200",
		forced_root_block : false,
		force_br_newlines : true,
		force_p_newlines : false,
		plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", 
 		theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull",
		theme_advanced_buttons2 : "fontsizeselect,forecolor,backcolor,link,unlink,code"
 
});
</script>

un exemple d'un div dans une cellule :

Code :

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

1
2
 
<div id="<?php print $data['nom']; ?>-<?php print datefr($jour[1]); ?>-m" class="zone-txt"><?php echo affContenu($data['nom'],datefr($jour[1]),'m'); ?></div>

le formulaire pour le textarea :

Code :

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

1
2
3
4
5
6
7
8
9
 
	<form method="post" action="add_event.php">
				<input id="cellule" name="cellule" type="text" value="" size="30">
        <p>     
                <textarea name="content" class="tinymce" style="width:100%">
				</textarea>
                <input type="submit" value="Save" />
        </p>
</form>

et enfin, le code jquery pour récupérer la valeur du textarea en fonction de la cellule sélectionnée :

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
 
$(function() {
	// on cache la div de saisie
	$(".formulaire-saisie").hide();
	// détection du click dans une div contenant rel
	$("div[id]").click(function(){
	  $('.zone-txt').css('border','0').css('width','250px').css('height','70px');
      var idString = $(this).attr("id");
	  var contenu = $('#'+idString).html();
	  $(".formulaire-saisie").show();
      $('#cellule').attr('value',idString);
	  $('#content').val(contenu);
	  $(this).css('border','2px solid #ff0000').css('width','246px').css('height','66px');
    });
 
});

Je débute dans le javascript/jquery, ça ne fonctionne peut être pas comme je le pensais.
Ou alors il y a une option dans TinyMCE que j'a loupé ?

Merci pour votre aide.

[nzangel]

j'ai regardé un peu le code généré par Tinymce et j'ai l'impression que le problème vient du fait que TinyMCE récupère le contenu de mon textarea uniquement lors du chargement de la page.

Donc j'ai beau cliquer sur un div, il ne charge pas la nouvelle valeur.

quelqu'un aurait une solution sans devoir recharger la page en passant la variable par l'url ?

merci

[Invité]

Bonjour,
$("div[id]").click ???

[nzangel]

????

la valeur change bien mais comment faire charger à nouveau tinymce ?

[nzangel]

j'ai trouvé la solution, voici le code jquery :

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
 
$(function() {
	// on cache la div de saisie
	$(".formulaire-saisie").hide();
	// détection du click dans une div contenant rel
	$("div[id]").click(function(){
	  $('.zone-txt').css('border','0').css('width','250px').css('height','70px');
 
      var idString = $(this).attr("id");
	  var contenu = $('#'+idString).html();
	  $(".formulaire-saisie").show();
      $('#cellule').attr('value',idString);
	  $('#contenttxt').html(contenu);
	  tinyMCE.get('contenttxt').setContent(contenu) ;
	  $(this).css('border','2px solid #ff0000').css('width','246px').css('height','66px');
    });
 
});

il fallait juste ajouter cette ligne :

Code :

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

1
2
 
tinyMCE.get('contenttxt').setContent(contenu) ;