Using Bootstrap wysiwyg text editor in Django Form

Question

I am using Django and Bootrap 2.32. I want to include this wysiwyg-bootrap-themed text editor: http://mindmup.github.io/bootstrap-wysiwyg/. The usage of this editor is fairly simple, including

$('#editor').wysiwyg();

in the JS-declaration will render each

<div class=editor></div>

into a beatiful wysiwyg text-editor.

Now the problem: I want to include this editor into one of my django form field. I have the single form:

class Article_Form(ModelForm):
    Article_text = CharField(widget=Textarea(attrs = {'id' : 'editor'}))
    class Meta:
        model= Article

, whereas the Article model includes one simple CharField . Is there any chance, to get the editor work inside the Article_text form-field? With the above-mentioned widget, the created textarea cannot be controlled by the wysiwyg-editor-control buttons. Wrapping the form-template-tag like this

<div id="editor">
    {{ Article_Form.Article_text }}                                
</div>

doesn't work either. The problem thus is that Django creates a textarea, wheras the editor would need a <div> to render correctly. Do you guys have any idea how to get this to work (without refering to django-wysiwyg).

Thanks!

Answer 1

Are you sure that this "plugin" doesn't work with textarea?

{{ Article_Form.Article_text }}

will be rendered to something like:

<textarea cols="40" id="id_Article_text" name="Article_text" rows="10"></textarea>

So there is a chance that you can initialize the wysiwyg editor like:

$('#id_Article_text').wysiwyg();

However after checking the plugin, I doubt that would be possible since it is using contenteditable="true" attribute of HTML5 and probably the plugin works with div only.

So there is no way you can make it work natively with Django form. The solution should be display other fields of your form manually, hide the one with textarea and display the editor instead:

<form action="" method="POST">

    {{ Article_Form.field1 }}
    {{ Article_Form.field2 }}

    <div class=editor></div>

    {% csrf_token %}
    <input type="submit" value="Submit" id="submit-btn" />
</form>

Then you can use JS to submit your form:

$('#submit-btn').click(function (e) {
    e.preventDefault();

    $.ajax({
        // do your magic here. 
        // note that you can get the content of the editor with: $('#editor').cleanHtml();
    })
});

This way is hackish I agree so I don't recommend you go for it, just find other plugin then. Also please read PEP 8 carefully.

Hope it helps.