mirror of https://github.com/Hopiu/django-markdownx.git synced 2026-03-28 02:40:22 +00:00

django-markdownx is a Markdown editor built for Django

Find a file

Adrian c8500e3bab README update		2014-11-02 00:24:25 +01:00
markdownx	Init	2014-11-01 22:02:31 +01:00
LICENSE	Initial commit	2014-11-01 15:15:37 +01:00
README.md	README update	2014-11-02 00:24:25 +01:00
setup.py	README update, setup.py fix for virtualbox	2014-11-02 00:08:20 +01:00

README.md

django-markdownx

Django Markdownx is a markdown editor built for Django.

It is simply an extension of the Django's Textarea widget made for editing Markdown with a live preview. It also supports uploading images with drag&drop functionality and auto tag insertion. Preview pane is rendered with Marked – JS Markdown compiler.

Quick Start

Install django-markdownx package
```
pip install django-markdownx
```

Add markdownx to your INSTALLED_APPS

INSTALLED_APPS = (
    [...]
    'markdownx',

Add url pattern to your urls.py

urlpatterns = [
   	[...]
    url(r'^markdownx/', include('markdownx.urls')),
]

Use MarkdownxInput widget in your forms.py

from django import forms
from markdownx.widgets import MarkdownxInput

class MyForm(forms.ModelForm):
   	content = forms.CharField(widget=MarkdownxInput)

Use manage.py collectstatic

Use manage.py collectstatic to copy files:
```
 static/css/markdownx.css
 static/js/markdown.js
```

Include jquery and marked.js files

<head>
	[...]
	<script src="{{ STATIC_URL }}js/jquery.js"></script>
	<script src="{{ STATIC_URL }}js/marked.js"></script>
</head>

Settings

#settings.py
MARKDOWNX_MEDIA_PATH = 'markdownx/' # subdirectory, where images will be stored in MEDIA_ROOT folder
MARKDOWNX_MAX_UPLOAD_SIZE = 52428800 # 50MB
MARKDOWNX_CONTENT_TYPES = ['image/jpeg', 'image/png']
MARKDOWNX_IMAGE_SIZE = {'size': (500, 500), 'quality': 90,}

MARKDOWNX_IMAGE_SIZE dict properties:

size – (width, height). When 0 used, property will figure out proper value by itself
quality – default: None – image quality, from 0 (full compression) to 100 (no compression)
crop – default: False – if True use size to crop final image
upscale – default: False – if image dimensions are smaller than those in size upscale image to size dimensions

Template

Default template looks like:

<div id="markdownx">
    <h6>{% trans "Editor" %}</h6>
    {{ editor }}
    <h6>{% trans "Preview" %}</h6>
    <div id="markdownx_preview"></div>
</div>

It is easy customizable, i.e. when you want to use Bootstrap 3 and "real" side-by-side panes. Just place templates/markdownx/widget.html file with:

<div class="row" id="markdownx">
    <div class="col-sm-6">
        <h6>{% trans "Editor" %}</h6>
        {{ editor }}
    </div>
    <div class="col-sm-6">
        <h6>{% trans "Preview" %}</h6>
        <div id="markdownx_preview"></div>
    </div>
</div>

Dependencies

Pillow – for image manipulations on upload
jQuery – AJAX upload and JS functionality
Marked.js – markdown compiler

TODO

use whatever JS markdown compiler
custom URL upload link
tests

Changelog

v0.1.0

init

Notes

django-markdownx was inspired by great django-images and django-bootstrap-markdown packages.

README.md Unescape Escape