Question

I am using django forms, and loading wysiwym editor in a page. The problem is that each form has 4 instances of wysiwym editors, and the page can have 10-30 such forms on an average.

        {% for form in forms %}
            <ul data-role='listview' data-inset='true' class='find_details'
                id="find_details_{{ form.instance.id }}" style='display:none;' >
                {{ form.as_ul }}
            </ul>
        {% endfor %}

The way I am loading wysiwym is as follows:
For all inputs with class wym, add the wymeditor.

$('#page').live( 'pageinit', function(event) {
  $('.wym').each( function () { $(this).wymeditor(); });
});

This method leads to reloading of all the static content associated with the wysiwym editor 40-100 times on the same page, thus leading to an insane load time.

What might be a good way of implementing this, without having the css, images and iframes load so many times? I can definitely do the same thing after the document loads, but I am primarily looking for a best practice solution for consolidating the loads to just once if possible.

Answer 1

You can initialize WYM on demand, only if user clicks into textarea. So unused textareas will not slow down loading.

Maybe even hide that textareas and show DIVs with actual rendered content and catch clicks on them. Will look good, kind a wysiwyg.