probleme avec tinyMCE

Par Geronimo, il y a 10 ans

Bonjour à tous, je suis nouveau et je rencontre un problème avec tinyMCE lorsque celui ci doit ce greffer sur textarea situé dans une balise HTML créé 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' ] }); } </script> <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> <script> var span = document.getElementById('span'), div = document.getElementById('div'); span.onclick = function() { alert('test'); this.innerHTML = 'CLICK 2'; div.innerHTML = '<div id="divTest"><textarea class="textarea" name="test"></textarea></div>'; 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 la div qui contient le textarea, alors le code fonctionne.
J'ai beau chercher et tester 1001 chose, je ne parviens pas à comprendre et à corriger ce problème.
Je m'en remais donc à vous en espérant que quelqu'un aura une solution.

Merci à vous

6 réponses

Geronimo,

il y a 10 ans

svp personne à une ptite idée pour me mettre sur la bonne voie?

Geronimo,

il y a 10 ans

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

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; };

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

Geronimo,

il y a 10 ans

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.

Alexandre #lbac,

il y a 10 ans

lors de l'affichage de ton évènement il suffit de charger tinymce à ce moment là, non ?

Geronimo,

il y a 10 ans

bonjour et merci de votre reponse mais c'est bien ce ke je fais via la fonction tinymceFunc
et tinymce ce charge bien lors du 1er clik mais pas sur les suivant et je ne comprend pas pourkoi

Geronimo,

il y a 10 ans

C'est bon j'ai trouvé une solution sur un autre forum. La fonction "tinymce.remove();" solutione mon probleme
Voici mon code final au cas ou ce serai util pour d'autre:

<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> <script> 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; }; </script>

Voila bonne journée à tous