Probleme avec tinyMCE dans un tableau [Résolu/Fermé]

Signaler
Messages postés
91
Date d'inscription
samedi 2 août 2014
Statut
Membre
Dernière intervention
14 janvier 2021
-
Messages postés
91
Date d'inscription
samedi 2 août 2014
Statut
Membre
Dernière intervention
14 janvier 2021
-
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


8 réponses

Messages postés
2371
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
13 janvier 2021
445
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.
2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
91
Date d'inscription
samedi 2 août 2014
Statut
Membre
Dernière intervention
14 janvier 2021
1
En fait je me suis rendu compte que le problème demeure des lors que le textarea est encadré par une balise html
Messages postés
91
Date d'inscription
samedi 2 août 2014
Statut
Membre
Dernière intervention
14 janvier 2021
1
SVP je suis sur que je suis pas le premier à avoir ce probleme.
Personne à une ptite idée?
Messages postés
91
Date d'inscription
samedi 2 août 2014
Statut
Membre
Dernière intervention
14 janvier 2021
1
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
Messages postés
91
Date d'inscription
samedi 2 août 2014
Statut
Membre
Dernière intervention
14 janvier 2021
1
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.
Messages postés
2371
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
13 janvier 2021
445
Salut,

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

Bonne journée
Messages postés
91
Date d'inscription
samedi 2 août 2014
Statut
Membre
Dernière intervention
14 janvier 2021
1
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.
Messages postés
91
Date d'inscription
samedi 2 août 2014
Statut
Membre
Dernière intervention
14 janvier 2021
1
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
Messages postés
91
Date d'inscription
samedi 2 août 2014
Statut
Membre
Dernière intervention
14 janvier 2021
1
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