Probleme avec tinyMCE dans un tableau

Résolu/Fermé

lamouchetsetse Messages postés 112 Date d'inscription samedi 2 août 2014 Statut Membre Dernière intervention 21 septembre 2021 - 22 févr. 2016 à 14:10
lamouchetsetse Messages postés 112 Date d'inscription samedi 2 août 2014 Statut Membre Dernière intervention 21 septembre 2021 - 25 févr. 2016 à 17:35

Bonjour à tous, je rencontre un problème avec tinyMCE lorsque celui ci doit ce greffer sur textarea situé dans un tableau lors d'un évènement.

Voici un bout de code démo qui illustre le problème:

function tinymceFunc()
{
    tinymce.init(
    {
        selector: "textarea",
        language : "fr_FR",
        height: 500,
        plugins: [
          "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
          "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
          "table contextmenu directionality emoticons template textcolor paste fullpage textcolor colorpicker textpattern"
        ],
      
        toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
        toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | insertdatetime preview | forecolor backcolor",
        toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",
      
        menubar: false,
        toolbar_items_size: 'small',
      
        style_formats: [{
          title: 'Bold text',
          inline: 'b'
        }, {
          title: 'Red text',
          inline: 'span',
          styles: {
            color: '#ff0000'
          }
        }, {
          title: 'Red header',
          block: 'h1',
          styles: {
            color: '#ff0000'
          }
        }, {
          title: 'Example 1',
          inline: 'span',
          classes: 'example1'
        }, {
          title: 'Example 2',
          inline: 'span',
          classes: 'example2'
        }, {
          title: 'Table styles'
        }, {
          title: 'Table row 1',
          selector: 'tr',
          classes: 'tablerow1'
        }],
      
        templates: [{
          title: 'Test template 1',
          content: 'Test 1'
        }, {
          title: 'Test template 2',
          content: 'Test 2'
        }],
        content_css: [
          '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
          '//www.tinymce.com/css/codepen.min.css'
        ]
    });

}

<html>
    <head>
        <title>tinyMCE</title>
        <meta charset="utf-8">
        <script src="tinymce/tinymce.min.js"></script>
    </head>
    <body>
        <span id="span">CLICK 1</span>
        <div id="div"></div>
    </body>
</html>

var span = document.getElementById('span'),
    div = document.getElementById('div');
span.onclick = function()
{
    alert('test');
    this.innerHTML = 'CLICK 2';
    div.innerHTML = '<table><tr><td><textarea class="textarea" name="test"></textarea></td></tr></table>';
    tinymceFunc();
}

En testant ce code, tout ce passe bien lors du 1er click, mais lors du 2eme click l'éditeur ne ce greffe pas sur le textarea.

Par contre, si on supprime le tableau, alors le code fonctionne. Le problème, c'est que dans mon vrai code le textarea est situé dans une cellule de tableau. Je peux toujours réorganiser mon code en enlevant le tableau, mais j'aimerais bien comprendre d’où viens le problème.

Merci à vous

A voir également:

Probleme avec tinyMCE dans un tableau
Tableau croisé dynamique - Guide
Tableau ascii - Guide
Tableau word - Guide
Clémence souhaite faire calculer automatiquement les prix de 30 produits dans trois devises. elle a déjà saisi une formule de calcul pour le tarif du premier produit dans la première devise. corrigez sa formule afin que recopiée vers le bas puis vers la droite, elle remplisse correctement tout le tableau. - Forum Excel
Le nom du champ de tableau croisé dynamique n'est pas valide ✓ - Forum Excel

8 réponses

Réponse 1 / 8

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
Modifié par Pitet le 23/02/2016 à 14:46

Le problème vient surement du fait qu'une instance de tinymce est déjà chargée lorsque tu essayes d'initialiser le deuxième éditeur.

La solution suivante semble fonctionner, mais ne connaissant pas bien tinymce je ne sais pas s'il s'agit de la meilleure méthode :

<html>
    <head>
        <title>tinyMCE</title>
        <meta charset="utf-8">
        <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
    </head>
    <body>
        <span id="span">CLICK 1</span>
        <div id="div"></div>

        <script>
            var editor = null;

            var span = document.getElementById('span'),
                    div = document.getElementById('div');
            span.onclick = function ()
            {
                if (editor != null) {
                    tinymce.remove();
                }

                this.innerHTML = 'CLICK 2';
                div.innerHTML = '<table><tr><td><textarea class="textarea" name="test"></textarea></td></tr></table>';
                tinymceFunc();
            }

            function tinymceFunc()
            {
                editor = tinymce.init(
                        {
                            selector: "textarea",
                            height: 500,
                            plugins: [
                                "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
                                "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                                "table contextmenu directionality emoticons template textcolor paste fullpage textcolor colorpicker textpattern"
                            ],
                            toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
                            toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | insertdatetime preview | forecolor backcolor",
                            toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",
                            menubar: false,
                            toolbar_items_size: 'small',
                            style_formats: [{
                                    title: 'Bold text',
                                    inline: 'b'
                                }, {
                                    title: 'Red text',
                                    inline: 'span',
                                    styles: {
                                        color: '#ff0000'
                                    }
                                }, {
                                    title: 'Red header',
                                    block: 'h1',
                                    styles: {
                                        color: '#ff0000'
                                    }
                                }, {
                                    title: 'Example 1',
                                    inline: 'span',
                                    classes: 'example1'
                                }, {
                                    title: 'Example 2',
                                    inline: 'span',
                                    classes: 'example2'
                                }, {
                                    title: 'Table styles'
                                }, {
                                    title: 'Table row 1',
                                    selector: 'tr',
                                    classes: 'tablerow1'
                                }],
                            templates: [{
                                    title: 'Test template 1',
                                    content: 'Test 1'
                                }, {
                                    title: 'Test template 2',
                                    content: 'Test 2'
                                }],
                            content_css: [
                                '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
                                '//www.tinymce.com/css/codepen.min.css'
                            ]
                        });

            }
        </script>
    </body>
</html>

J'ai donc utilisé la méthode tinymce.remove() qui permet de supprimer toutes les instances de tinymce sur la page avant de charger le deuxième éditeur.
J'appelle la méthode remove() uniquement lorsqu'un éditeur est chargé grâce à la variable globale editor initialisée à null et dont j'affecte le retour de la méthode tinymce.init (permettant ainsi de savoir qu'un éditeur est initialisé).

PS: pour ne pas télécharger les fichiers de langues de l'éditeur, j'ai supprimé ton paramètre language : "fr_FR" dans la config de tinymce.

Réponse 2 / 8

lamouchetsetse Messages postés 112 Date d'inscription samedi 2 août 2014 Statut Membre Dernière intervention 21 septembre 2021 2
22 févr. 2016 à 17:43

En fait je me suis rendu compte que le problème demeure des lors que le textarea est encadré par une balise html

Réponse 3 / 8

lamouchetsetse Messages postés 112 Date d'inscription samedi 2 août 2014 Statut Membre Dernière intervention 21 septembre 2021 2
23 févr. 2016 à 09:11

SVP je suis sur que je suis pas le premier à avoir ce probleme.
Personne à une ptite idée?

Réponse 4 / 8

lamouchetsetse Messages postés 112 Date d'inscription samedi 2 août 2014 Statut Membre Dernière intervention 21 septembre 2021 2
23 févr. 2016 à 13:27

Bon la meilleur solution que j'ai trouvé c'est cloner ma div lorsqu'elle est créer la 1er fois puis d'utiliser le clone pour les autre fois

comme ceci:


var span = document.getElementById('span'),
    div = document.getElementById('div'),
    annuler = document.getElementById('annuler'),
    clone = '';

var click = function()
{
    alert('test');
    this.innerHTML = 'CLICK 2';
    //div.innerHTML = '<div id="divTest"><textarea class="textarea" name="test"></textarea></div>';
    
    var div2 = document.createElement('div');
    
    div2.id = 'div2';
    
    if(typeof clone === 'undefined' || clone === '')
    {
        div2.innerHTML = '<textarea class="textarea" name="test"></textarea>';
        div.appendChild(div2)
        tinymce.init({ selector:'textarea' });
    }
    else
    {
	    div.appendChild(clone);
    }
    
    //div2.appendChild(tinyMCE);
    
    
    span.onclick = function(){};
};    

span.onclick = click;

annuler.onclick = function()
{
    var div22 = document.getElementById('div2');
    
    clone = div22.cloneNode(true);
    //alert('nodeEnfant.innerHTML => '+div22.innerHTML+'\n clone.innerHTML => '+clone.innerHTML);
    
    div.innerHTML = '';
    span.innerHTML = 'CLICK 1';
    span.onclick = click;
};

Voila, si quelqu'un à une meilleur solution à proposer, je suis preneur.

PS ce code n'est pas tout à fais le meme que celui que j'ai poster au début, mais illustre mieux le probleme

lamouchetsetse Messages postés 112 Date d'inscription samedi 2 août 2014 Statut Membre Dernière intervention 21 septembre 2021 2
23 févr. 2016 à 13:51

Et merde cette solution n'est pas bonne. L'éditeur s'affiche, mais ne fonctionne pas.
Bon, j’espère que quelqu'un aura une idée.

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 8

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
23 févr. 2016 à 14:16

Salut,

As tu des messages d'erreur javascript dans la console de développement de ton navigateur ?

Bonne journée

Réponse 6 / 8

lamouchetsetse Messages postés 112 Date d'inscription samedi 2 août 2014 Statut Membre Dernière intervention 21 septembre 2021 2
23 févr. 2016 à 14:19

salut pitet, merci de m’accorder du temps.
Non je n'ai aucune erreur dans ma console.

si tu as le temps, tu peu tester le code que j'ai posté, en tout cas, chez moi il n'y a pas d'erreur.

Réponse 7 / 8

lamouchetsetse Messages postés 112 Date d'inscription samedi 2 août 2014 Statut Membre Dernière intervention 21 septembre 2021 2
23 févr. 2016 à 15:15

Merci pitet
DSL, Je n'ai pas le temps de regarder ton code en détail car je doit m'absenter jusqu’à demain.
A 1er vu, lorsque l'on click sur le span, la page est rechargé à chaque fois.

Je ne sais pas si c'est voulu et ou normal, en tout cas j'aimerais que cela soit évité car mon but en utilisant javaScript c'est d'éviter le rechargement de page. Sinon j'aurais tout fais en php.

En tout cas merci de ton aide. Je reviens demain

Réponse 8 / 8

lamouchetsetse Messages postés 112 Date d'inscription samedi 2 août 2014 Statut Membre Dernière intervention 21 septembre 2021 2
25 févr. 2016 à 17:35

Bonjour pitet, effectivement tinymce.remove(); est la solution à mon probleme. je te remercie d'avoir pris le temps de m'aider et pour le coup je t'es mis +1.

Voici mon code final qui fonctionne maintenant très bien:

<html>
    <head>
        <title>tinyMCE</title>
        <meta charset="utf-8">
        <script src="tinymce/tinymce.min.js"></script>
    </head>
    <body>
        <span id="span">CLICK 1</span>
        <br/>
        <span id="annuler">annuler</span>
        <div id="div"></div>
    </body>
</html>

var span = document.getElementById('span'),
    div = document.getElementById('div'),
    annuler = document.getElementById('annuler');

var click = function()
{
    alert('test');
    
    this.innerHTML = 'CLICK 2';
    div.innerHTML = '<div id="divTest"><textarea class="textarea" name="test"></textarea></div>';
    
    tinymce.init({ selector:'textarea' });
    
    span.onclick = function(){};
    
    test = false;
};    

span.onclick = click;

annuler.onclick = function()
{
    tinymce.remove();
    div.innerHTML = '';
    span.innerHTML = 'CLICK 1';
    span.onclick = click;
};

vola, merci pitet

Discussions similaires

ou sont les bananes ?

Impossible d'afficher le rapport de tableau croisé dynamique sur un rapport

Tableau croisé dynamique avec plusieurs en-têtes identiques

Bibliothèque

Trouver le nom d'un tableau avec sa photo.

Discussions similaires

Newsletters