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
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
A voir également:
- Probleme avec tinyMCE dans un tableau
- Tableau croisé dynamique - Guide
- Tableau ascii - Guide
- Comment faire un tableau - Guide
- Trier un tableau excel - Guide
- Comment imprimer un tableau excel sur une seule page - Guide
8 réponses
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
525
Modifié par Pitet le 23/02/2016 à 14:46
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 :
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.
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.
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
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
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
23 févr. 2016 à 09:11
SVP je suis sur que je suis pas le premier à avoir ce probleme.
Personne à une ptite idée?
Personne à une ptite idée?
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
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:
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
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
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.
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
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
525
23 févr. 2016 à 14:16
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
As tu des messages d'erreur javascript dans la console de développement de ton navigateur ?
Bonne journée
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
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.
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.
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
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
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
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
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:
vola, merci pitet
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