Hopiu/django-markdownx
1
0
Fork 0
mirror of https://github.com/Hopiu/django-markdownx.git synced 2026-04-20 13:10:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
django-markdownx is a Markdown editor built for Django
4 commits 6 branches 30 tags 13 MiB
Python 39.4%
TypeScript 27.5%
JavaScript 25.5%
CSS 6.3%
HTML 1.3%
Find a file
Adrian 5e7aace837 README update
2014-11-01 23:13: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-01 23:13:25 +01:00
setup.py README update, setup.py 2014-11-01 23:09:46 +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

1. Install django-markdownx package:

pip install django-markdownx

2. Add markdownx to your INSTALLED_APPS:

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

3. Add url pattern to your urls.py

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

4. 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)

5. Use manage.py collectstatic

Use manage.py collectstatic to copy files:

static/css/markdownx.css
static/js/markdown.js

6. Include jquery and marked.js file

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

Settings

Alter default SETTINGS as needed

Include variables if you want change defaults:

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,}

Note on MARKDOWNX_IMAGE_SIZE:

MARKDOWNX_IMAGE_SIZE object 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

Override default template (i.e. if you want to use Bootstrap)

Default html:

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

When you want to use Bootstrap 3 and "real" side-by-side panes, 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>

TODO

  • use whatever JS markdown compiler

Changelog

v0.1.0

  • init