Simply integrate Summernote editor with Django project.
JavaScript Python HTML CSS
Latest commit 0b77fa5 Dec 5, 2016 @lqez lqez committed on GitHub Merge pull request #172 from hyesun03/feature/readme
Add about admin in


Build Status Codecov

Summernote is a simple WYSIWYG editor.

django-summernote allows you to embed Summernote into Django very handy. Support admin mixins and widgets.



  1. Install django-summernote to your python environment.

     pip install django-summernote
  2. Add django_summernote to INSTALLED_APP in

     INSTALLED_APPS += ('django_summernote', )
  3. Add django_summernote.urls to

     urlpatterns = [
         url(r'^summernote/', include('django_summernote.urls')),
  4. Be sure to set proper MEDIA_URL for attachments.

  5. Run database migration for preparing attachment model.

     python migrate



from django_summernote.admin import SummernoteModelAdmin
from .models import SomeModel

# Apply summernote to all TextField in model.
class SomeModelAdmin(SummernoteModelAdmin):  # instead of ModelAdmin
    ..., SomeModelAdmin)

Or, in forms,

from django_summernote.widgets import SummernoteWidget, SummernoteInplaceWidget

# Apply summernote to specific fields.
class SomeForm(forms.Form):
    foo = forms.CharField(widget=SummernoteWidget())  # instead of forms.Textarea

# If you don't like <iframe>, then use inplace widget
# Or if you're using django-crispy-forms, please use this.
class AnotherForm(forms.Form):
    bar = forms.CharField(widget=SummernoteInplaceWidget())

And for ModelForm,

class FormFromSomeModel(forms.ModelForm):
    class Meta:
        model = SomeModel
        widgets = {
            'foo': SummernoteWidget(),
            'bar': SummernoteInplaceWidget(),

Last, please don't forget to use safe templatetag while displaying in templates.

{{ foobar|safe }}


Support customization via settings. Put SUMMERNOTE_CONFIG into your settings file.


    # Using SummernoteWidget - iframe mode
    'iframe': True,  # or set False to use SummernoteInplaceWidget - no iframe mode

    # Using Summernote Air-mode
    'airMode': False,

    # Use native HTML tags (`<b>`, `<i>`, ...) instead of style attributes
    # (Firefox, Chrome only)
    'styleWithTags': True,

    # Set text direction : 'left to right' is default.
    'direction': 'ltr',

    # Change editor size
    'width': '100%',
    'height': '480',

    # Use proper language setting automatically (default)
    'lang': None,

    # Or, set editor language/locale forcely
    'lang': 'ko-KR',

    # Customize toolbar buttons
    'toolbar': [
        ['style', ['style']],
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['para', ['ul', 'ol', 'height']],
        ['insert', ['link']],

    # Need authentication while uploading attachments.
    'attachment_require_authentication': True,

    # Set `upload_to` function for attachments.
    'attachment_upload_to': my_custom_upload_to_func(),

    # Set custom storage class for attachments.
    'attachment_storage_class': '',

    # Set custom model for attachments (default: 'django_summernote.Attachment')
    'attachment_model': 'my.custom.attachment.model', # must inherit 'django_summernote.AbstractAttachment'

    # Set common css/js media files
    'external_css': (                                             
    'external_js': (                                              
    'internal_css': (
    'internal_js': (

    # You can add custom css/js for SummernoteWidget.
    'css': (
    'js': (

    # And also for SummernoteInplaceWidget.
    # !!! Be sure to put {{ }} in template before initiate summernote.
    'css_for_inplace': (
    'js_for_inplace': (

    # You can disable file upload feature.
    'disable_upload': False,

    # Codemirror as codeview
    'codemirror': {
            # Please visit
            'theme': 'monokai',


Or, you can styling editor via attributes of the widget. These adhoc styling will override settings from SUMMERNOTE_CONFIG.

# Apply adhoc style via attributes
class SomeForm(forms.Form):
    foo = forms.CharField(widget=SummernoteWidget(attrs={'width': '50%', 'height': '400px'}))

You can also pass additional parameters to custom Attachment model by adding attributes to SummernoteWidget or SummernoteInplaceWidget, any attribute starting with data- will be pass to the save(...) method of custom Attachment model as **kwargs.

# Pass additional parameters to Attachment via attributes
class SomeForm(forms.Form):
    foo = forms.CharField(widget=SummernoteWidget(attrs={'data-user-id': 123456, 'data-device': 'iphone'}))


Park Hyunwoo(@lqez)


  • jaeyoung : Debugging on Django 1.4
  • kroisse : Fixing problem on importing module


django-summernote is distributed under MIT license.

And also uses below libraries.