Question

I am trying to apply the TinyMCE rich text to only one form generated with Django. Upon doing so however it inserts another textarea within the form. What am I doing wrong?

Edited code

        <p><div id="AnswerBox">{{ form.as_p }}</div></p>

        $('.answers').load(url, function() {
            $('#AnswerBox').addClass('mceEditor', 
                function() {tinyMCE.init({
                    theme : "advanced",
                    mode : "specific_textareas",
                    editor_selector : "AnswerBox",
                    elements: "AnswerBox",
                    plugins : "fullpage",
                    theme_advanced_buttons3_add : "fullpage",
                });
            })
        })

Answer 1

You’re adding the editor to the div that wraps the form. You need to add it to specific elements in the form – inputs and text areas. These are identified by the value of the elements option in the TinyMCE.init() function.

Look at customising the form template, and adding your mceEditor class to the elements you want.

Alternatively you could write a little javascript to insert the class, and place it before your current js. Something like –

$('#yourForm textarea').addClass('mceEditor');

(You’ll need to change your template –

<p><div id="yourForm">{{ form.as_p }}</div></p>

so the jquery selector works. Obviously you’ll need to identify which fields you actually want the editor on).