tinymce bei dynamischen hinzugefügten Formularelementen

Kalito

Erfahrenes Mitglied
Hallo,

ich nutze für zwei Textboxen tinymce

HTML:
<div id="8" class="tescase_scope_show">
            <div id="items" class="sortable">
                <div id="0" class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-sort"></i>
                    </div>
                    <div class="panel-body">
                        <div class="col-md-5">
                        <div class="form-group textarea"><label class="control-label" for="testunits-0-step">Testschritt</label><textarea name="testunits[0][step]" class="edittextarea form-control" id="testunits-0-step" rows="5"></textarea></div>   
                        </div>
                        <div class="col-md-5">
                        <div class="form-group textarea"><label class="control-label" for="testunits-0-expection">Erwartung</label><textarea name="testunits[0][expection]" class="edittextarea form-control" id="testunits-0-expection" rows="5"></textarea></div>                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-danger delete pull-right" type="button">Testschritt löschen</button>
                        </div>
                    </div>
                </div>
            </div>
            <button class="btn bg-olive pull-right" id="btn-add" type="button">Testschritt hinzufügen</button>
        </div>

bei der initialen Anzeige funktioniert auch alles soweit einwandfrei. Wenn ich aber den HTML-Block dupliziere, dann funktioniert zwar noch das initiale Textfeld, aber die geklonten nicht.

Die Duplizierung gestalte ich mit folgenden Code:
Code:
$(document).ready(function()
{
    $('#btn-add').click(function(e)
    {
        var last_id = $('#items').children().last().attr('id');
        var template = $('#items').children().last().clone();
       
        var new_id = parseInt(last_id)+1;

        /*
         * Anpassung des Element an die neue ID
         */
       
        //ID des Umschließendes DIV
        template.children().attr('id', new_id);
       
        //ID und Name der einzelnen Elemente anpassen
        template.find('textarea').each(function()
        {
            var child_old_id = $(this).attr('id').split('-');
            var child_new_id = child_old_id[0]+'-'+new_id+'-'+child_old_id[2];
            $(this).attr('id',child_new_id);
           
            var child_old_name = $(this).attr('name').split('[');
            var child_new_name = child_old_name[0]+'['+new_id+']['+child_old_id[2]+']';
            $(this).attr('name',child_new_name);
        });
               
        //Umwandlung des Templates in ein HTML-Element
        template = template.html();
       
        //HTML-Element unten anfügen
        $('#items').append('<div id="'+new_id+'" class="panel panel-default">'+template+'</div>');
    });
});

Hat jemand eine Idee, wie ich bei den dynamisch hinzugefügten Textfelder tinymce nutzen kann?
 
Ist eigentlich ganz einfach. Ruf die Initialisierung von TinyMCE nach dem Hinzufügen der Textarea für die neue ID auf. Ich hab das bei mir über eine separate Funktion gemacht, der ich die neu erzeugte ID übergebe.
Javascript:
var calltiny = function(artikelid){
    tinymce.init({
        selector: "#"+artikelid,
        theme: "modern",
        height: 200,
        usw.
    });
}
 
hm funktioniert irgendwie nicht. Irgendwie ist es gefühlt nicht Fleisch und nicht Fisch. Beim geklonten Textarea wird das tinymce korrekt angezeigt (inkl Buttons), aber nicht bedienbar.

Edit: Sehe gerade, dass beide iframes (Original und Kopie) die selbe ID haben
 
Hab meine Seite dahin umgebaut, dass ich nun einen Templateblock habe, wo ich erst mittels JS die Klasse setze und Tiny neu initialisiere.
 
Hab meine Seite dahin umgebaut, dass ich nun einen Templateblock habe, wo ich erst mittels JS die Klasse setze und Tiny neu initialisiere.

Schau mal hier auf der Beispielseite vorbei: http://wog.gamenetworx.de/Guides/Erstellen/Spiel/1
Dort habe Ich es sogar, dass wenn Du beispielsweise 10 Kapitel hinzu fügst, dass TinyMCE 10 mal eben geklont wird, jedoch immer mit neuer ID :)

Eventuell kannst Du dass noch gebrauchen, auch wenn dein Beitrag als Erledigt markiert ist :)

Hier mein Quell-JS-Code:
Code:
    $("#btnFeld").click(function(){
        var chapters = $('#chapters').val();
       
        for(var i = 1; i <= chapters; i++) {
            $("#meinForm").append('<div id="chapters_'+ count + '" class="panel panel-warning"><div class="panel-heading">Kapitelbeschreibung: <input class="form-control" type="text" placeholder="Kapitel-Titel" id="chapterTitle_' + count + '" /></div><div class="panel-body"><textarea class="editor" name="" placeholder="Kapitelbeschreibung ' + count + '"></textarea></div><div class="panel-footer right"><button onClick="btnDelete(' + count + ');" class="btn btn-danger">Kapitel ' + count + ' L&oumlschen?</button></div></div>');
            tinymce.init({
                selector: 'textarea.editor',
                language: 'de',
                height: 250,
                theme: 'modern',
                plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak',
                    'searchreplace wordcount visualblocks visualchars code fullscreen',
                    'insertdatetime media nonbreaking save table contextmenu directionality',
                    'emoticons template paste textcolor colorpicker textpattern imagetools placeholder'
                ],
                toolbar1: 'insertfile undo redo | styleselect size forecolor | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | preview fullscreen media',
                image_advtab: true,
                templates: [
                    { title: 'Test template 1', content: 'Test 1' },
                    { title: 'Test template 2', content: 'Test 2' }
                ]
            });
            count++;
        }
    });
 
Zurück