Discussion :

[cahnory]

Bonjour tout le monde, un petit problème de javascript impliquant tinyMCE et son modul jquery.
J'ai un formulaire dont certains fieldset sont duplicables. Concrètement ces fieldset ont une class ui-duplicate et à l'aide de jQuery j'ai créé un plugin que j'utilise comme ceci :

Code :

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

$('.ui-duplicate').duplicate();

Ce plugin ajoute un bouton "ajouter" "supprimer". Lors de l'ajout je clone mon fieldset, vide les value des input enfants, dé-check, dé-select...

J'attribue aussi à certains textarea la class ui-rte qui permet leur transformation en modul tinyMCE

Code :

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

$('.ui-rte').tinymce({config});

Le souci c'est lorsque je duplique un fieldset contenant un textarea, il m'est impossible de faire fonctionner tinyMCE sur le textarea du nouveau fieldset.
Ce que j'envisage de faire c'est lors de la duplication, supprimer les modules tinymce existant sur les élément de class ui-rte puis les re créer. Mon problème est que je n'ai pas trouvé comment supprimer ces modules. J'arrive à les désactiver (hide() qui ne fait que masquer le module et ré-afficher le textarea) mais pas à vraimens le supprimer.
Quelqu'un saurait comment faire ou aurai autre chose à proposer ?

[Alexdezark]

Bonjour,

D'abord il faudrait voir le code d'init de ton tinyMce pour voir comment sont initialisés les textAreas mais quoi qu'il en soit les textAreas ne sont pas initialisés au moment de leur création mais au moment ou tinyMce est initialisé, soit souvent dans le $(document).ready.

tinyMce ne peut être initialisé qu'une fois et les initialisations suivantes se soldent par un echec et plus aucun de tes textAreas ne s'initialisera de nouveau.

Voici un exemple pour avoir des textAreas tinyMce dans différents tabs jQuery.ui (à adapter selon tes besoins)

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
<script>
 
$(document).ready(function() {
    $tabs=$("#example").tabs({
    load:function(event, ui){
    if(ui.index==0){
$('#divEditor').append('<textarea name="editor" id="editor"></textarea>');
$('#editor').tinymce({
    script_url : 'tinymce/jscripts/tiny_mce/tiny_mce.js',
    theme : "advanced",
    language: "fr",
    mode : "exact",
    elements : 'editor',
    plugins : "style,table,save,emotions,insertdatetime,print,nonbreaking", 
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_buttons1 : "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontsizeselect,|forecolor,forecolorpicker ,backcolor,removeformat",
    theme_advanced_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,|,insertdate,inserttime,|,emotions",
    theme_advanced_buttons3 :"",
 
    height:"250px",
    width:"360px",
 
setup : function(ed) {
        ed.onInit.add(function(ed) {
        tinyMCE.execCommand('mceRepaint');
        });
 
        }
 
});    
};
 
    if(ui.index==2){
$('#divEditor').append('<textarea name="editor" id="editor"></textarea>');
$('#editor').tinymce({
    script_url : 'tinymce/jscripts/tiny_mce/tiny_mce.js',
    theme : "advanced",
    language: "fr",
    mode : "exact",
    elements : 'editor',
    plugins : "style,table,save,emotions,insertdatetime,print,nonbreaking", 
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_buttons1 : "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontsizeselect,|forecolor,forecolorpicker ,backcolor,removeformat",
    theme_advanced_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,|,insertdate,inserttime,|,emotions",
    theme_advanced_buttons3 :"tablecontrols",
 
    height:"250px",
    width:"360px",
 
setup : function(ed) {
        ed.onInit.add(function(ed) {
        tinyMCE.execCommand('mceInsertContent',false,'<b>Hello world!!</b>');
        tinyMCE.execCommand('mceRepaint');
        });
 
        }                 
});    
}
    },
select:function(event, ui){
        if($('#editor').length!=0){
        tinyMCE.get('editor').remove();
        $('#editor').remove();
        };
        }
});
 
});
 
</script>

Remarque la suppression des instances dans le "select" et l'initalisation dans le "load".

Pour beaucoup plus de simplicité je te conseille de jetter un coup d'oeil à un autre éditeur : nicEdit

[cahnory]

Désolé, je n'avais pas vu ta réponse. Merci pour l'exemple et la solution alternative, je vais regarder ça.