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!

score 2 · Answer 1 · answered Aug 12 '13 at 17:17

I don't know enough about Django but I wrote the editor you're referring to, so here's a suggestion. Assuming the other answer on this page is correct and you can't generate a div directly, you can generate a text area using whatever Django templates you would normally do, then assign two events: 1) page onload event that would copy the textarea contents into the div, something like

$('#editor').html($('#textarea').val())

2) form onsubmit event that would reverse copy the current div contents into the textarea before it gets submitted

$('#textarea').val($('#editor').html())

Thanks for the reply, I am sure your solution works but to avoid unnecessary hacking, I switched to another text editor. — user2673038, Aug 19 '13 at 15:53

score 2 · Answer 2 · answered Sep 21 '13 at 04:48

2

Take a look at this. Summernote is a simple WYSIWYG editor based on Twitter's Bootstrap. django-summernote plugin allows you to embed Summernote into your Django admin page very handy.

https://github.com/lqez/django-summernote

answered Sep 21 '13 at 04:48

Hacker Wins

1,289
9
20

score 1 · Accepted Answer · answered Aug 11 '13 at 23:04

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.

Great thanks. It's good to know that there is no way to get it to work natively. I will try your hack and then switch to another text editor if needed. Thanks again, way to go! — user2673038, Aug 12 '13 at 11:53
What's wrong with the solution you provided above? I saw that render the field separately had also be mentioned in the django document. https://docs.djangoproject.com/en/1.8/topics/forms/ — haudoing, May 13 '15 at 06:30
@haudoing you do realise there are many differences between current Django 1.8 and Django 1.5-1.6 at the time I wrote the answer 2 years ago, right? — Hieu Nguyen, May 13 '15 at 07:42
@HieuNguyen Ah... that's why. Anyway, so this answer can be an option too. — haudoing, May 13 '15 at 08:55

score 0 · Answer 4 · answered Aug 27 '13 at 17:18

0

Take a look at this repo: https://github.com/rochapps/django-secure-input I think it solves most of your problems.

answered Aug 27 '13 at 17:18

Victor Rocha

23
5

Using Bootstrap wysiwyg text editor in Django Form

4 Answers4