Django Froala WYSIWYG Editor

Name: froala/django-froala-editor
Brand: froala/django-froala-editor
SKU: project/froala/django-froala-editor
Rating: 4.52 (278 reviews)

django-froala-editor package helps integrate Froala WYSIWYG HTML editor with Django.

Getting started

Install the package:

pip install django-froala-editor

if not update in pypi use this

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

Add the directory froala_editor from this repo to your Python path.

Add froala_editor to INSTALLED_APPS in settings.py.
Add the following line to urlpatterns in your application's urls.py.

from froala_editor import views

In your urlpatterns array add

path('froala_editor/',include('froala_editor.urls'))

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

To add third-party plugins

In froala_editor\widgets.py add

'froala_editor/js/third_party/embedly.min.js',
'froala_editor/js/third_party/spell_checker.min.js',
'froala_editor/js/third_party/font_awesome.min.js',
'froala_editor/js/third_party/image_tui.min.js'

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, the media files are to be manually included in the template. Inside the <head> section or before the form is rendered, include:

{{ form.media }}

Usage with virtual environment

To use Froala Editor in virtual environment, see https://tutorial.djangogirls.org/en/django_installation/ for how to setup virtual environment & to start your application in virtual environment.

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 SCAYT 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 SCAYT Web SpellChecker with SCAYT_CUSTOMER_ID 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 Falsein your Django settings disables Froala editor and uses a TextArea instead.

FROALA_STORAGE_BACKEND
This allows for the storage used for uploaded images and files to be changed through settings. If 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 set to True, it assumes js-cookie is installed and included to get the CSRF token using js-cookie.

Release

To publish to PyPi, the following command should be run:

python setup.py sdist upload -r pypi

License

This package is available under BSD License. However, in order to use Froala WYSIWYG HTML Editor plugin you should purchase a license for it.

See https://froala.com/wysiwyg-editor/pricing for licensing the Froala Editor.

If you bought a license and got your key, the easiest way to implement it is to put it into the FROALA_EDITOR_OPTIONS setting in settings.py:

FROALA_EDITOR_OPTIONS = {
  'key': '<our key goes here>',
  # other options
  # ...
}

Project Name	Stars	Repos Using This	Packages Using This	Most Recent Commit	Total Releases	Latest Release	Open Issues	License	Language
Awesome Wagtail	1,803			2 months ago			1
A curated list of awesome packages, articles, and other cool resources from the Wagtail community.
Django Summernote	934	226	1	9 months ago	73	October 14, 2021	61	mit	Python
Simply integrate Summernote editor with Django project.
Booktype	840			2 years ago			6	agpl-3.0	JavaScript
Booktype is a free, open source platform that produces beautiful, engaging books formatted for print, Amazon, iBooks and almost any ereader within minutes.
Django Markdownx	784	116	5	6 days ago	53	January 03, 2022	48	other	Python
Comprehensive Markdown plugin built for Django
Django Markdown Editor	726	20	3	12 days ago	51	March 31, 2022	34	gpl-3.0	JavaScript
Awesome Django Markdown Editor, supported for Bootstrap & Semantic-UI
Django Wysiwyg	468	149	5	7 years ago	14	August 17, 2016	17	mit	HTML
A Django application for making Django textareas rich text editors. Certainly as a template tag and possibly as a form widget.
Django Mdeditor	407	21		a year ago	19	January 05, 2022	23	gpl-3.0	Python
Django-mdeditor is Markdown Editor plugin application for django base on Editor.md.
Django Concurrency	388	18	2	a year ago	23	February 25, 2022	6	mit	Python
Optimistic lock implementation for Django. Prevents users from doing concurrent editing.
Django Widgy	328			2 years ago			66	other	JavaScript
A CMS framework for Django built on a heterogenous tree editor.
Django Json Widget	281	9	11	2 years ago	8	February 17, 2021	16	mit	Python
An alternative widget that makes it easy to edit the new Django's field JSONField (PostgreSQL specific model fields)

Django Froala Editor