Rich web editor widgets in the Django Admin
Project description
Django-editor-widgets
This package provides some custom widgets to use monaco or tinymce editors in django admin.
remark: From version 4.0 static files for tinymce and monaco editors are removed.
Installation
To install the package by pip
run following command
# From Github (latest updates)
$ pip install git+https://github.com/giorgi94/django-editor-widgets.git
# Or
$ pip install django-editor-widgets
Usage
To start using the package in your project, you need to open settings.py
file and add following lines
# settings.py
from pathlib import Path
# import configurations for editor
from djangoeditorwidgets.config import init_web_editor_config
# set base dir by Path instead of os.path
BASE_DIR = Path(__file__).resolve().parent.parent
# Application definition
INSTALLED_APPS = [
...
'djangoeditorwidgets',
...
]
MEDIA_URL = "/media/"
MEDIA_ROOT = BASE_DIR / "media"
STATIC_URL = "/static/"
STATIC_ROOT = BASE_DIR / "static"
WEB_EDITOR_DOWNLOAD, WEB_EDITOR_CONFIG = init_web_editor_config(
# set the directory where files are downloaded
BASE_DIR / "static_cdn",
# set static url prefix
STATIC_URL
)
In current version uses Path
instead of os.path
to manage files and directories. If needed configuration parameters can be written manually
from os.path import join
WEB_EDITOR_DOWNLOAD = {
"to": BASE_DIR / "static_cdn",
"tinymce": {
"url": "https://download.tiny.cloud/tinymce/community/tinymce_5.10.3.zip",
"target": "tinymce/js/tinymce",
},
"monaco": {
"url": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.32.1.tgz",
"target": "package/min",
},
}
WEB_EDITOR_CONFIG = {
"tinymce": {
"js": [
join(STATIC_URL, "tinymce/tinymce.min.js"),
join(STATIC_URL, "djangoeditorwidgets/tinymce/tinymce.config.js"),
join(STATIC_URL, "djangoeditorwidgets/tinymce/tinymce.init.js"),
],
"css": {
"all": [
join(STATIC_URL, "djangoeditorwidgets/tinymce/tinymce.custom.css"),
]
},
},
"monaco": {
"js": [
join(STATIC_URL, "monaco/vs/loader.js"),
join(STATIC_URL, "djangoeditorwidgets/monaco/monaco.config.js"),
],
"css": {
"all": [
join(STATIC_URL, "djangoeditorwidgets/monaco/monaco.custom.css"),
]
},
},
}
Commands
Static files are removed from the package, instead it provides management command to download and extract files to given location
$ python manage.py download_editpr_scripts
TinyMCE
To use tinymce editor in admin, we need to change default widget in the form with TinymceWidget
# forms.py
from django import forms
from djangoeditorwidgets.widgets import TinymceWidget
from .models import TextModel
class TextModelForm(forms.ModelForm):
class Meta:
model = TextModel
fields = '__all__'
widgets = {
'text': TinymceWidget(name="default")
}
By name
argument we can modify selector and can define multiple configs for tinymce editor.
Monaco Editor
In lastest verions of sqlite3
and mariadb
we now have json field
, it is more limited compared to postgresql
but can handle json validation and parsing
# models.py
import json
from django.db import models
class JSONModel(models.Model):
title = models.CharField(max_length=50)
text = models.JSONField(null=True)
def __str__(self):
return self.title
# forms.py
from django import forms
from djangoeditorwidgets.widgets import MonacoEditorWidget
from .models import JSONModel
class JsonModelForm(forms.ModelForm):
class Meta:
model = JSONModel
fields = "__all__"
widgets = {
"text": MonacoEditorWidget(name="default", language="json", wordwrap=True)
}
Remark
Unlike other django package which are for Rich web editors, this package allows developer to fully use capablities and custom plugins for the web editor, like tinymce or monaco, since configurations doesn't go through django settings.
Project details
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for django-editor-widgets-4.0.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | 9e6ebede51ad61fddad5e871f4c2ce905a718da62d1730e91e4430a0011a23bc |
|
MD5 | bda24eab481202a21f3d86a4b0b5823b |
|
BLAKE2b-256 | fa254efe312f07f202331b942a392d7ec1f2471361b228fade89edb814746aa0 |
Hashes for django_editor_widgets-4.0-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | c9cdfb3d687ac35b0ee25a8fb2c559cc0cbee49a4ec6bfc09093ca7b140dec5f |
|
MD5 | a0e5137ab277004b19c49081e7ba5ad7 |
|
BLAKE2b-256 | a838441588e45e92819c355077f68750f05a01ea8a0d10d59ceb599d2a71dcf8 |