Probleme avec tinyMCE dans un tableau
Résolu
lamouchetsetse
Messages postés
112
Date d'inscription
Statut
Membre
Dernière intervention
-
lamouchetsetse Messages postés 112 Date d'inscription Statut Membre Dernière intervention -
lamouchetsetse Messages postés 112 Date d'inscription Statut Membre Dernière intervention -
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:
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
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 word - Guide
- Trier un tableau excel - Guide
- Tableau ascii - Guide
- Imprimer un tableau excel - Guide
- Tableau croisé dynamique - Guide
8 réponses
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.
En fait je me suis rendu compte que le problème demeure des lors que le textarea est encadré par une balise html
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
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.
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
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
