Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

django

Django Froala Editor

Getting started

Install the package with pip:

pip install django-froala-editor

If the plugin is not up to date in pypi use this:

pip install https://github.com/froala/django-froala-editor/archive/master.zip

Alternatively, you can add the directory froala_editor from this repository to your Python path.

  1. Add froala_editor to INSTALLED_APPS in settings.py.

  2. Add the following line to urlpatterns in your application's urls.py.

      from django.urls import path, include 
      urlpatterns = [
      # ... other url patterns
      path('froala_editor/', include('froala_editor.urls')),
      ]
 

Skip this url inclusion if you don't want image and file upload inside the editor. Images from URLs can still be embedded.

Usage

from django.db import models
  from froala_editor.fields import FroalaField
  
  class Page(models.Model):
    content = FroalaField()
  

FroalaField uses froala_editor.widgets.FroalaEditor as its widget. You may directly use this widget with any of your forms.py:

from django import forms
  from froala_editor.widgets import FroalaEditor
  
  class PageForm(forms.ModelForm):
    content = forms.CharField(widget=FroalaEditor)
  

Usage outside admin

When used outside the Django admin, include the media files in the template manually. Inside the <head> section or before the form is rendered, include:

{{ form.media }}
  

Options

Froala Editor provides several options for customizing the editor. See https://froala.com/wysiwyg-editor/docs for all available options. You can provide a dictionary of these options as FROALA_EDITOR_OPTIONS setting in settings.py. These options would then be used for all instances of the WYSIWYG editor in the project.

Options for individual field can also be provided via FroalaField or FroalaEditor class. This overrides any options set via FROALA_EDITOR_OPTIONS:

from django.db import models
  from froala_editor.fields import FroalaField
  
  class Page(models.Model):
    content = FroalaField(options={
      'toolbarInline': True,
    })
   
  
from django import forms
  from froala_editor.widgets import FroalaEditor
  
  class PageForm(forms.ModelForm):
    content = forms.TextField(widget=FroalaEditor(options={
      'toolbarInline': True,
    }))
  

Theme

You may provide the name of the theme to be used as theme argument to FroalaField or FroalaEditor.

from django.db import models
  from froala_editor.fields import FroalaField
  
  class Page(models.Model):
    content = FroalaField(theme='dark')
  

FROALA_EDITOR_THEME can be set in settings.py making all instances of the editor to use a theme. However, theme argument in FroalaField and FroalaEditor overrides FROALA_EDITOR_THEME. Using a theme named 'dark' would require the existence of the file froala_editor/static/froala_editor/css/themes/dark.min.css. Available themes are: 'dark', 'gray' and 'red'.


Plugins

Froala Editor comes with the plugins: block style, text & background colors, font size, font family, insert video, insert table, media manager, lists and file upload. By default, all plugins are enabled by default in this package. See https://froala.com/wysiwyg-editor/docs/plugins for all available plugins.

FROALA_EDITOR_PLUGINS can be set in settings.py to tell which plugins should all instances of Froala Editor be using. By default, it is

FROALA_EDITOR_PLUGINS = ('align', 'char_counter', 'code_beautifier' ,'code_view', 'colors', 'draggable', 'emoticons',
          'entities', 'file', 'font_family', 'font_size', 'fullscreen', 'image_manager', 'image', 'inline_style',
          'line_breaker', 'link', 'lists', 'paragraph_format', 'paragraph_style', 'quick_insert', 'quote', 'save', 'table',
          'url', 'video')
  

The usage of plugins argument with FroalaEditor or FroalaField overrides this for that particular instance.

from django.db import models
  from froala_editor.fields import FroalaField
  
  class Page(models.Model):
    content = FroalaField(plugins=('font_size', 'font_family'))
  

Third party integrations

FROALA_EDITOR_THIRD_PARTY setting can be used to configure third party integrations. Aviary Image Editor and Web SpellChecker are available for now. To enable, in settings.py:

FRAOLA_EDITOR_THIRD_PARTY = ('image_aviary', 'spell_checker')
  

Similar to plugin configuration, this can also be overridden on ForalaEditor and FroalaField.

Use your key for Web SpellChecker with serviceId in your project setings.


Image upload

FroalaEditor and FroalaField optionally take in a boolean value for image_upload argument to enable or disable image uploads. Image uploads are enabled by default if the urls of this package are included in your urls.py.

You can use FROALA_UPLOAD_PATH setting in settings.py to change the path where uploaded files are stored within the MEDIA_ROOT. By default, uploads/froala_editor/images is used for storing uploaded images.


Other Settings

USE_FROALA_EDITOR
default: True
If set to False in your Django settings disables Froala editor and uses a TextArea instead.
FROALA_STORAGE_BACKEND Allows to change the location for the storage used for uploaded images and files through settings. When nothing is provided it uses default_storage, otherwise it uses this backend. Using this you can specify a different storage backend like S3 only for Froala.
FROALA_JS_COOKIE
default: False.
If FROALA_JS_COOKIE is set to True, it assumes js-cookie is installed and included to get the CSRF token using js-cookie.

Release

To publish to PyPi, run the following command: bash python setup.py sdist upload -r pypi

Do you think we can improve this article? Let us know.

Ready to dive in? Explore our plans

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1625884929" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1220032296" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1627842887" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>