[CKEditor + jQuery] Meerdere CKE's dynamisch inladen

[Verwijderd]

Ik wil graag aan de hand van een keuzemenu (<select>), een div element vullen met wat eenvoudige HTML content. Hierin staat ook telkens een textarea, die ik wil laten vervangen door een CKEditor. Dit gebeurd dmv van een ajax request. Dit werkt op zich prima. De HTML ziet er als volgt uit:

HTML:

<label for="template">Sjabloon</label>
<select name="template" id="template">
 <option value="0"></option>
 <option value="1">User Template 1</option>
 <option value="2">Systeem template 1</option>
</select><br />

En de jQuery:

JavaScript:

jQuery(document).ready(function() {

    jQuery('#template').change(function() {
        var value = jQuery(this).val();
        
        if(value != 0) {
            jQuery('#mail_content').show();
            
            jQuery.ajax({
                url: baseURL + 'versturen/laad_template/' + value,
                type: 'POST',
                data:
                    {
                        template_id: value
                    },
                success: function(data) { 
                    jQuery('#sjablonen_template').html(data);   
                    
                    jQuery('textarea#editor-' + value).ckeditor();  // Hier wordt de ckeditor dus ingeladen.... 
                }           
            });
        } else {
            jQuery('#mail_content').hide();
        }
    });
});

Zoals gezegd, werkt dit goed. Het probleem is echter, wanneer je eerst optie 1 selecteerd, vervolgens optie 2 en daarna weer de 1ste optie selecteerd (volg je het nog ), wordt de textarea niet meer vervangen.

Ik heb al geprobeerd om alle textarea's een apart id mee te geven: <textarea id="editor-{$template_id}">. Dit maakt geen verschil vergeleken met <textarea id="editor">.

Heeft iemand enig idee hoe dit kan komen? Ik heb zelf het idee dat dit komt doordat hetzelfde id al eerder vervangen is door CKEditor. Ik kan dit natuurlijk oplossen door een teller bij te houden en deze bij elke wijziging aan de <select> op te hogen, zodat je altijd een uniek textarea id krijgt. Dit is echter omslachtig en ik mag toch aannemen dat dit makkelijker op te lossen is.

[BtM909]

Aangezien 't ook gewoon clientside is, heb je een uitgeklede testcase? Dat praat namelijk wat makkelijker

[moozzuzz]

Kan je bij het switchen tussen twee opties de betrokken textvelden niet resetten (een soort automagische disable richtext bij een onchange)

[418O2]

Eh, de CKEditor is toch al geinitialiseerd als je teruggaat?

Ik vraag me af wat je verder doet, want dit is, zoals BtM al aangeeft, niet genoeg om een diagnose te stellen.

Het is in ieder geval geen lupus

[Verwijderd]

Een testcase is helaas niet mogelijk, dit stuk code draait in een applicatie die ik aan het ontwikkelen ben waar ik eigenlijk geen toegang tot wil geven.

Ik heb inmiddels een oplossing gevonden door ipv een textarea te vervangen, te appenden aan een div. Dus ipv van:

HTML:

<textarea id="editor"></textarea>

Dit te gebruiken:

HTML:

<div id="editor"></div>

En het oude javascript:

JavaScript:

jQuery('textarea#editor-' + value).ckeditor();

Aan te passen naar:

JavaScript:

var config = {};
CKEDITOR.appendTo('editor', config, '');

[Verwijderd]

Houd er wel rekening mee dat je op deze wijze geen graceful degrading hebt. Dus: gebruikers op OS'en die geen JS/CKEDITOR ondersteunen, kunnen _helemaal_ geen tekst invoeren/editen, omdat er alleen maar een div element bestaat.

418O2 schreef op vrijdag 29 oktober 2010 @ 12:33:
Het is in ieder geval geen lupus

It's never lupus

[418O2]

Je hoeft toch alleen maar de html van de editorinhoud aan te passen? En geen nieuwe textarea aan te maken?

[Verwijderd]

Ik heb even wat eigen code opgezocht en ik heb het op deze manier opgelost:

JavaScript:

/*
* refreshEditor
*
* Replaces a textarea with an CKEDITOR instance, destroying
* any old instances in the progress.
*
* @param string nodeId Id of node to replace.
*/
refreshEditor : function(nodeId) {
        if (typeof mynamespace.editor !== 'undefined') mynamespace.editor.destroy();
        mynamespace.editor = CKEDITOR.replace(nodeId, mynamespace.editorConfig);
    }

Hierbij pas ik het singleton design pattern toe. Er zijn ten alle tijde maximaal 1 instanties van het objecttype CKEDITOR.editor aanwezig. Hierbij is de namespace mynamespace arbitrair gekozen, die je dient te vervangen door je eigen namespace. De variabele editorConfig binnen die namespace wijst naar een object met configuratieinstellingen zoals gedefinieerd door CKEDITOR.config.

De destroy() method, verwijdert alleen de CKEDITOR instantie, maar bewaart het oorspronkelijke DOM element (en de daarbij eventuele inhoud daarvan). Het mooie is dat je daarna ditzelfde element weer kunt vervangen door een CKEDITOR instantie, waarbij de inhoud van dat element automatisch binnen de editor wordt geplaatst. Zolang je netjes de destroy() method gebruikt, handelt CKEDITOR alle garbage collection netjes voor je af.

Tip: koppel je jQuery code los van je CKEDITOR code. Dit zijn beide projecten die in volle gang zijn, waarbij je het risico loopt dat er bij een volgende update de boel niet meer (volledig) werkt. Bovendien creëer je op deze manier ook afhankelijkheden (dependancies) binnen je code.

[ Voor 14% gewijzigd door Verwijderd op 30-10-2010 21:30 ]