Skip to main content

A Django app that allows the easy addition of Stack Overflow's 'PageDown' markdown editor to a django form field

Project description

Django Pagedown

Add Stack Overflow's "Pagedown" Markdown editor to your Django Admin or custom form.

Screenshot of Django Admin with Pagedown initialised

Requirements

Version >= 2.0.0 of django-pagedown requires Django 2.1.0 or above (previous versions should support Django all the way back to around 1.1).

Installation

  1. Get the code: pip install django-pagedown
  2. Add pagedown.apps.PagedownConfig to your INSTALLED_APPS in settings.py
  3. Configure and collect the static files: python manage.py collectstatic

Usage

The widget can be used both inside the django admin or independendly.

Inside the Django Admin:

If you want to use the pagedown editor in a django admin field, there are numerous possible approaches:

  • To use it in all TextField's in your admin form:

    from django.contrib import admin
    from django.db import models
    
    from pagedown.widgets import AdminPagedownWidget
    
    
    class AlbumAdmin(admin.ModelAdmin):
        formfield_overrides = {
            models.TextField: {'widget': AdminPagedownWidget },
        }
    
  • To only use it on particular fields, first create a form (in forms.py):

    from django import forms
    
    from pagedown.widgets import AdminPagedownWidget
    
    from music.models import Album
    
    class AlbumForm(forms.ModelForm):
        name = forms.CharField(widget=AdminPagedownWidget())
        description = forms.CharField(widget=AdminPagedownWidget())
    
        class Meta:
            model = Album
            fields = "__all__"
    

    and in your admin.py:

    from django.contrib import admin
    
    from forms import FooModelForm
    from models import FooModel
    
    @admin.register(FooModel)
    class FooModelAdmin(admin.ModelAdmin):
        form = FooModelForm
        fields = "__all__"
    

Outside the Django Admin:

To use the widget outside of the django admin, first create a form similar to the above but using the basic PagedownWidget:

from django import forms

from pagedown.widgets import PagedownWidget

from music.models import Album


class AlbumForm(forms.ModelForm):
    name = forms.CharField(widget=PagedownWidget())
    description = forms.CharField(widget=PagedownWidget())

    class Meta:
        model = Album
        fields = ["name", "description"]

Then define your urls/views:

from django.views.generic import FormView
from django.conf.urls import patterns, url

from music.forms import AlbumForm

urlpatterns = patterns('',
    url(r'^$', FormView.as_view(template_name="baz.html",
                                form_class=AlbumForm)),)

then create the template and load the javascipt and css required to create the editor:

<html>
    <head>
        {{ form.media }}
    </head>
    <body>
        <form ...>
            {{ form }}
        </form>
    </body>
</html>

Customizing the Widget

If you want to customize the widget, the easiest way is to simply extend it:

from pagedown.widgets import PagedownWidget


class MyNewWidget(PagedownWidget):
    template_name = '/custom/template.html'

    class Media:
        css = {
            'all': ('custom/stylesheets.css',)
        }
        js = ('custom/javascript.js',)

Rendering Markdown

contrib.markdown was deprecated in Django 1.5 meaning you can no longer use the markdown filter in your template by default.

@wkcd has a good example of how to overcome by installing django-markdown-deux:

{% extends 'base.html' %}
{% load markdown_deux_tags %}

...
<p>{{ entry.body|markdown }}</p>
...

Image Uploads

You can enable image uploads, allowing your users to upload new images to the server and have them automatically inserted into the Pagedown widget (instead of just adding image URLs):

Screenshot of Django Admin with image upload enabled

To do so:

  1. Make sure you have set a MEDIA_URL and MEDIA_ROOT so that uploads will be propertly saved
  2. Add PAGEDOWN_IMAGE_UPLOAD_ENABLED=True to your settings
  3. Include the pagedown paths in your urls.py so that the upload endpoint is available
 # ...
 urlpatterns = [
     path('', include('pagedown.urls')),
     # ...
 ]

This will add the URL /pagedown/image-upload/ endpoint to your project. You can see the default view that handles the upload here

The following options are available via your settings to tweak how the image upload works:

  • PAGEDOWN_IMAGE_UPLOAD_PATH can be used to change the path within your media root (default is pagedown-uploads)
  • PAGEDOWN_IMAGE_UPLOAD_EXTENSIONS can be used to limit the extensions allowed for upload (default is jpg, jpeg, png, webp)
  • PAGEDOWN_IMAGE_UPLOAD_UNIQUE can be used to ensure all uploads are stored in a uniquely named subfolder, e.g. f748e009-c3cb-40f3-abf2-d103ab0ad259/my-file.png (default is False)

Check out the pagedown_init.js script to see how the upload is being performed on the client side.

Example

You can see a fully-fledged example of the widget in django-pagedown-example

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

django-pagedown-2.2.1.tar.gz (88.1 kB view details)

Uploaded Source

Built Distribution

django_pagedown-2.2.1-py3-none-any.whl (93.0 kB view details)

Uploaded Python 3

File details

Details for the file django-pagedown-2.2.1.tar.gz.

File metadata

  • Download URL: django-pagedown-2.2.1.tar.gz
  • Upload date:
  • Size: 88.1 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/3.2.0 pkginfo/1.6.1 requests/2.24.0 setuptools/50.3.2 requests-toolbelt/0.9.1 tqdm/4.51.0 CPython/3.9.6

File hashes

Hashes for django-pagedown-2.2.1.tar.gz
Algorithm Hash digest
SHA256 2e6373a3f1ec1886ec0bdd16a0db1d5f5d14437a0fdddefa7fba905cef50d6e8
MD5 6e30653cc78e9e4a6bae37089dd7f0eb
BLAKE2b-256 c57f2f12e1ac2a50ba7d2a82ca10efd2c127345bb93af68d65b1b9808b257f29

See more details on using hashes here.

File details

Details for the file django_pagedown-2.2.1-py3-none-any.whl.

File metadata

  • Download URL: django_pagedown-2.2.1-py3-none-any.whl
  • Upload date:
  • Size: 93.0 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/3.2.0 pkginfo/1.6.1 requests/2.24.0 setuptools/50.3.2 requests-toolbelt/0.9.1 tqdm/4.51.0 CPython/3.9.6

File hashes

Hashes for django_pagedown-2.2.1-py3-none-any.whl
Algorithm Hash digest
SHA256 9b4204d65334d0add1d3daf2533d91f96b62a11fe89c5e2ca93a31fbd4b38aeb
MD5 6ce5e0a91aefdc1a78e4254d3b267059
BLAKE2b-256 c2dfd58ab4412d47f9516a9d22976a1ee17ce85f48d8e2a4eeb6fd0331f701b7

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page