mirror of https://github.com/Hopiu/django-markdownx.git synced 2026-03-16 21:40:24 +00:00

django-markdownx is a Markdown editor built for Django

Find a file

Adrian e070093a57 Readme update		2014-12-10 23:19:57 +01:00
markdownx	Path fix by argaen	2014-12-10 22:27:25 +01:00
.gitignore	Setuptools related	2014-11-03 10:00:53 +01:00
LICENSE	Initial commit	2014-11-01 15:15:37 +01:00
MANIFEST.in	v0.2.9	2014-11-12 16:04:21 +01:00
README.md	Readme update	2014-12-10 23:19:57 +01:00
setup.py	Path fix by argaen	2014-12-10 22:27:25 +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 (using Bootstrap for layout and styling):

Quick Start

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

Add markdownx to your INSTALLED_APPS.

#settings.py
INSTALLED_APPS = (
    [...]
    'markdownx',

Add url pattern to your urls.py.

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

Use MarkdownxInput widget in your forms.py.

#forms.py
from django import forms
from markdownx.widgets import MarkdownxInput

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

Copy included markdownx.js to your STATIC_ROOT folder.
```
 python manage.py collectstatic
```

Include the form's required media in the template using {{ form.media }}.

<form method="POST" action="">{% csrf_token %}
	[...]
</form>
{{ form.media }}

Include jQuery in base.html file.

<head>
	[...]
	<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
</head>

Customization

Settings

Place settings in your settings.py to override default values:

#settings.py
MARKDOWNX_MARKDOWN_KWARGS = dict()
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, i.e.: (500,0), property will figure out proper height 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>
    {{ markdownx_editor }}
    <h6>{% trans "Preview" %}</h6>
    <div id="markdownx_preview"></div>
</div>

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>
        {{ markdownx_editor }}
    </div>
    <div class="col-sm-6">
        <h6>{% trans "Preview" %}</h6>
        <div id="markdownx_preview"></div>
    </div>
</div>

Dependencies

jQuery – AJAX upload and JS functionality

TODO

custom URL upload link
custom media path function
python 3 compatibility
tests

Changelog

v0.4.2

Path fix by argaen

v0.4.1

Better editor height updates
Refresh preview on image upload
Small JS code fixes

v0.4.0

editor auto height

v0.3.1

JS event fix

v0.3.0

version bump

v0.2.9

Removed any inlcuded css
Removed JS markdown compiler (full python support now with Markdown lib)

v0.2.0

Allow to paste tabs using Tab button

v0.1.4

package data fix

v0.1.3

README.md fix on PyPi

v0.1.2

critical setuptools fix

v0.1.1

change context name editor to markdownx_editor for better consistency

v0.1.0

init

Notes

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

README.md Unescape Escape