Initialiser Tinymce sur un élément créé "à la volée"

Ferias Quarante
Javascript

Bonjour à tous,

J'ai un petit souci sur mon projet. Sur une des pages, je liste des activités : chaque activité est une div contenantt différents champs (2 selects, 3 inputs et 1 textarea).
Il est possible de déplacer chaque activité, d'en ajotuer et d'en supprimer. Pour une meilleur expérience, l'ajout d'une nouvelle activité se fait en jquery comme suit : je clone le DOM d'une activité et je l'ajoute dans la liste.

Le problème est le suivant : quand j'ajoute une activité, je clone son DOM donc, je clone donc aussi la balise tinymce avec l'éditeur du DOM source. Comment faire pour réinitialiser tinymce "à la volée" sur le DOM ajouté en supprimant bien le précédent ?

J'ai essayé 2-3 choses déjà :

  • en utilisant tinymce en mode inline : après avoir cloner le DOM source je supprime les différents attributs initialiser par tinymce, et ensuite je fais une initialisation classqiue de tinymce. Cela marche, le problème c'est qu'en mode inline sur un textarea je n'arrive pas à avoir le gras, souligné, ... :p
  • en utilisant tinyMCE.execCommand mais je ne comprends pas du tout comment cela marche et si c'est la solution dans ce cas.
  • le mode inline pourrait paraitre la solution sauf que ... toutes ces activités sont dans un formulaire donc j'ai besoin de textarea pour pouvoir soumettre ...

Bref, j'ai besoin d'un coup de main! :)
Merci pour votre aide,

Cordialement

1 réponse

Ferias Quarante
Auteur
Réponse acceptée

J'ai trouvé une solution, je sais pas si c'est la plus "jolie" et la plus optimale, mais cela marche.
Voici le code de ma fonction qui initiaise tinymce sur un élément content plusieurs éléments dont un textarea pour tinymce :

jQuery.fn.extend({
initializeEditor: function(srcElement) {
           // textarea cible pour tinyMCE
            var editor = $(this).find('textarea');

            // l'élément courant étant issu d'un clone() avec jQuery, on teste si une initialization de tinyMCE existe déjà et on la supprime
            var existingEditor = $(this).find('.mce-tinymce');
            if (existingEditor.length > 0)
            {
                existingEditor.remove();
                editor.removeAttr('id');
                editor.attr('style', 'display:block;');
            }

            // initialisation de tinyMCE
            editor.tinymce(EDITOR_OPTIONS);

           // clone du contenu de l'élément source s'il y en a un
            if (typeof srcElement != 'undefined')
            {
                var srcId = srcElement.find('textarea').attr('id');
                var editorId = editor.attr('id');
                tinyMCE.get(editorId).setContent(tinyMCE.get(srcId).getContent());
            }

            return this;
        }
});