2017-04-23 12:52:52 +00:00
<!DOCTYPE html>
<!-- [if IE 8]><html class="no - js lt - ie9" lang="en" > <![endif] -->
<!-- [if gt IE 8]><! --> < html class = "no-js" lang = "en" > <!-- <![endif] -->
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2017-04-25 13:57:17 +00:00
< title > Example — Django Markdownx 2.0.16 documentation< / title >
2017-04-23 12:52:52 +00:00
< link rel = "stylesheet" href = "_static/css/theme.css" type = "text/css" / >
< link rel = "index" title = "Index"
href="genindex.html"/>
< link rel = "search" title = "Search" href = "search.html" / >
2017-04-25 13:57:17 +00:00
< link rel = "top" title = "Django Markdownx 2.0.16 documentation" href = "index.html" / >
2017-04-23 12:52:52 +00:00
< link rel = "next" title = "Customization" href = "customization.html" / >
< link rel = "prev" title = "Getting Started" href = "getting_started.html" / >
< script src = "_static/js/modernizr.min.js" > < / script >
< / head >
< body class = "wy-body-for-nav" role = "document" >
< div class = "wy-grid-for-nav" >
< nav data-toggle = "wy-nav-shift" class = "wy-nav-side" >
< div class = "wy-side-scroll" >
< div class = "wy-side-nav-search" >
< a href = "index.html" class = "icon icon-home" > Django Markdownx
< / a >
< div class = "version" >
2.0
< / div >
< div role = "search" >
< form id = "rtd-search-form" class = "wy-form" action = "search.html" method = "get" >
< input type = "text" name = "q" placeholder = "Search docs" / >
< input type = "hidden" name = "check_keywords" value = "yes" / >
< input type = "hidden" name = "area" value = "default" / >
< / form >
< / div >
< / div >
< div class = "wy-menu wy-menu-vertical" data-spy = "affix" role = "navigation" aria-label = "main navigation" >
< ul class = "current" >
< li class = "toctree-l1" > < a class = "reference internal" href = "installation.html" > Installation< / a > < / li >
< li class = "toctree-l1" > < a class = "reference internal" href = "getting_started.html" > Getting Started< / a > < / li >
< li class = "toctree-l1 current" > < a class = "current reference internal" href = "#" > Example< / a > < ul >
< li class = "toctree-l2" > < a class = "reference internal" href = "#model" > Model< / a > < / li >
< li class = "toctree-l2" > < a class = "reference internal" href = "#form" > Form< / a > < / li >
2017-04-25 00:17:10 +00:00
< li class = "toctree-l2" > < a class = "reference internal" href = "#django-admin" > Django Admin< / a > < / li >
< li class = "toctree-l2" > < a class = "reference internal" href = "#advanced" > Advanced< / a > < ul >
< li class = "toctree-l3" > < a class = "reference internal" href = "#template-customization" > Template customization< / a > < / li >
2017-04-23 12:52:52 +00:00
< li class = "toctree-l3" > < a class = "reference internal" href = "#field-customization" > Field customization< / a > < / li >
2017-04-25 00:17:10 +00:00
< li class = "toctree-l3" > < a class = "reference internal" href = "#custom-image-tags" > Custom image tags< / a > < / li >
2017-04-23 12:52:52 +00:00
< / ul >
< / li >
< / ul >
< / li >
< li class = "toctree-l1" > < a class = "reference internal" href = "customization.html" > Customization< / a > < / li >
< li class = "toctree-l1" > < a class = "reference internal" href = "translation.html" > Translation< / a > < / li >
< li class = "toctree-l1" > < a class = "reference internal" href = "js/js.html" > JavaScript< / a > < / li >
< li class = "toctree-l1" > < a class = "reference internal" href = "markdownx/markdownx.html" > MarkdownX Modules< / a > < / li >
2017-04-25 00:17:10 +00:00
< li class = "toctree-l1" > < a class = "reference internal" href = "contribution.html" > Contributions< / a > < / li >
2017-04-23 12:52:52 +00:00
< li class = "toctree-l1" > < a class = "reference internal" href = "license.html" > License< / a > < / li >
< / ul >
< / div >
< / div >
< / nav >
< section data-toggle = "wy-nav-shift" class = "wy-nav-content-wrap" >
< nav class = "wy-nav-top" role = "navigation" aria-label = "top navigation" >
< i data-toggle = "wy-nav-top" class = "fa fa-bars" > < / i >
< a href = "index.html" > Django Markdownx< / a >
< / nav >
< div class = "wy-nav-content" >
< div class = "rst-content" >
< div role = "navigation" aria-label = "breadcrumbs navigation" >
< ul class = "wy-breadcrumbs" >
< li > < a href = "index.html" > Docs< / a > » < / li >
< li > Example< / li >
< li class = "wy-breadcrumbs-aside" >
< a href = "_sources/example.rst.txt" rel = "nofollow" > View page source< / a >
< / li >
< / ul >
< hr / >
< / div >
< div role = "main" class = "document" itemscope = "itemscope" itemtype = "http://schema.org/Article" >
< div itemprop = "articleBody" >
< div class = "section" id = "example" >
< h1 > Example< a class = "headerlink" href = "#example" title = "Permalink to this headline" > ¶< / a > < / h1 >
2017-04-25 00:17:10 +00:00
< p > Have you:< / p >
< ul class = "simple" >
< li > successfully < a class = "reference internal" href = "installation.html" > < span class = "doc" > installed MarkdownX< / span > < / a > ?< / li >
< li > followed the instructions on how to < a class = "reference internal" href = "getting_started.html" > < span class = "doc" > get started< / span > < / a > ?< / li >
< / ul >
< p > If so, you are set for the next step. Here you can find comprehensive examples of how to use different < strong > MarkdownX< / strong >
features to your advantage.< / p >
2017-04-23 12:52:52 +00:00
< div class = "section" id = "model" >
< h2 > Model< a class = "headerlink" href = "#model" title = "Permalink to this headline" > ¶< / a > < / h2 >
2017-04-25 00:17:10 +00:00
< p > This is how you implement a < strong > MarkdownX< / strong > field in your models. In your < span class = "guilabel" > app/models.py< / span > :< / p >
2017-04-23 12:52:52 +00:00
< div class = "highlight-python" > < table class = "highlighttable" > < tr > < td class = "linenos" > < div class = "linenodiv" > < pre > 1
2
3
4< / pre > < / div > < / td > < td class = "code" > < div class = "highlight" > < pre > < span > < / span > < span class = "kn" > from< / span > < span class = "nn" > markdownx.models< / span > < span class = "kn" > import< / span > < span class = "n" > MarkdownxField< / span >
< span class = "k" > class< / span > < span class = "nc" > MyModel< / span > < span class = "p" > (< / span > < span class = "n" > models< / span > < span class = "o" > .< / span > < span class = "n" > Model< / span > < span class = "p" > ):< / span >
< span class = "n" > myfield< / span > < span class = "o" > =< / span > < span class = "n" > MarkdownxField< / span > < span class = "p" > ()< / span >
< / pre > < / div >
< / td > < / tr > < / table > < / div >
2017-04-25 00:17:10 +00:00
< p > ... and then, include the form media in the relevant template using < code class = "docutils literal" > < span class = "pre" > {{< / span > < span class = "pre" > form.media< / span > < span class = "pre" > }}< / span > < / code > , like so:< / p >
2017-04-23 12:52:52 +00:00
< div class = "highlight-html" > < div class = "highlight" > < pre > < span > < / span > < span class = "p" > < < / span > < span class = "nt" > form< / span > < span class = "na" > method< / span > < span class = "o" > =< / span > < span class = "s" > " POST" < / span > < span class = "na" > action< / span > < span class = "o" > =< / span > < span class = "s" > " " < / span > < span class = "p" > > < / span > {% csrf_token %}
{{ form }}
< span class = "p" > < /< / span > < span class = "nt" > form< / span > < span class = "p" > > < / span >
{{ form.media }}
< / pre > < / div >
< / div >
2017-04-25 00:17:10 +00:00
< div class = "admonition note" >
< p class = "first admonition-title" > Note< / p >
< p class = "last" > The field extends Django’ s own < a class = "reference external" href = "https://docs.djangoproject.com/en/dev/ref/models/fields/#django.db.models.TextField" > TextField< / a > and is saved in the database accordingly.< / p >
< / div >
2017-04-23 12:52:52 +00:00
< / div >
< div class = "section" id = "form" >
< h2 > Form< a class = "headerlink" href = "#form" title = "Permalink to this headline" > ¶< / a > < / h2 >
2017-04-25 00:17:10 +00:00
< p > You can also implement < strong > MarkdownX< / strong > through the forms. This will be done in your < span class = "guilabel" > app/forms.py< / span > as follows:< / p >
2017-04-23 12:52:52 +00:00
< div class = "highlight-python" > < table class = "highlighttable" > < tr > < td class = "linenos" > < div class = "linenodiv" > < pre > 1
2
3
4< / pre > < / div > < / td > < td class = "code" > < div class = "highlight" > < pre > < span > < / span > < span class = "kn" > from< / span > < span class = "nn" > markdownx.fields< / span > < span class = "kn" > import< / span > < span class = "n" > MarkdownxFormField< / span >
< span class = "k" > class< / span > < span class = "nc" > MyForm< / span > < span class = "p" > (< / span > < span class = "n" > forms< / span > < span class = "o" > .< / span > < span class = "n" > Form< / span > < span class = "p" > ):< / span >
< span class = "n" > myfield< / span > < span class = "o" > =< / span > < span class = "n" > MarkdownxFormField< / span > < span class = "p" > ()< / span >
< / pre > < / div >
< / td > < / tr > < / table > < / div >
< p > ... and then, include a form’ s required media in the template using < code class = "docutils literal" > < span class = "pre" > {{< / span > < span class = "pre" > form.media< / span > < span class = "pre" > }}< / span > < / code > :< / p >
< div class = "highlight-html" > < div class = "highlight" > < pre > < span > < / span > < span class = "p" > < < / span > < span class = "nt" > form< / span > < span class = "na" > method< / span > < span class = "o" > =< / span > < span class = "s" > " POST" < / span > < span class = "na" > action< / span > < span class = "o" > =< / span > < span class = "s" > " " < / span > < span class = "p" > > < / span > {% csrf_token %}
{{ form }}
< span class = "p" > < /< / span > < span class = "nt" > form< / span > < span class = "p" > > < / span >
{{ form.media }}
< / pre > < / div >
< / div >
< / div >
< div class = "section" id = "django-admin" >
< h2 > Django Admin< a class = "headerlink" href = "#django-admin" title = "Permalink to this headline" > ¶< / a > < / h2 >
< p > When using included < code class = "docutils literal" > < span class = "pre" > MarkdowxModel< / span > < / code > class in your models, just use < code class = "docutils literal" > < span class = "pre" > MarkdownxModelAdmin< / span > < / code > in
2017-04-25 00:17:10 +00:00
your < span class = "guilabel" > app/admin.py< / span > as follows:< / p >
2017-04-23 12:52:52 +00:00
< div class = "highlight-python" > < table class = "highlighttable" > < tr > < td class = "linenos" > < div class = "linenodiv" > < pre > 1
2
3
4
5
6< / pre > < / div > < / td > < td class = "code" > < div class = "highlight" > < pre > < span > < / span > < span class = "kn" > from< / span > < span class = "nn" > django.contrib< / span > < span class = "kn" > import< / span > < span class = "n" > admin< / span >
< span class = "kn" > from< / span > < span class = "nn" > markdownx.admin< / span > < span class = "kn" > import< / span > < span class = "n" > MarkdownxModelAdmin< / span >
< span class = "kn" > from< / span > < span class = "nn" > .models< / span > < span class = "kn" > import< / span > < span class = "n" > MyModel< / span >
< span class = "n" > admin< / span > < span class = "o" > .< / span > < span class = "n" > site< / span > < span class = "o" > .< / span > < span class = "n" > register< / span > < span class = "p" > (< / span > < span class = "n" > MyModel< / span > < span class = "p" > ,< / span > < span class = "n" > MarkdownxModelAdmin< / span > < span class = "p" > )< / span >
< / pre > < / div >
< / td > < / tr > < / table > < / div >
2017-04-25 00:17:10 +00:00
< / div >
< div class = "section" id = "advanced" >
< h2 > Advanced< a class = "headerlink" href = "#advanced" title = "Permalink to this headline" > ¶< / a > < / h2 >
< div class = "section" id = "template-customization" >
< h3 > Template customization< a class = "headerlink" href = "#template-customization" title = "Permalink to this headline" > ¶< / a > < / h3 >
< p > The default widget is as seen < a class = "reference external" href = "https://github.com/neutronX/django-markdownx/blob/master/markdownx/templates/markdownx/widget.html" > here< / a > .< / p >
< p > If you would like to customise this; for instance, using < a class = "reference external" href = "https://getbootstrap.com" > Bootstrap< / a > to implement
side-by-side panes (as seen in < a class = "reference internal" href = "index.html" > < span class = "doc" > preview animation< / span > < / a > ), you should override the default template by creating
your own template and saving it under < code class = "docutils literal" > < span class = "pre" > markdownx/widget.html< / span > < / code > (Django 1.11+) or < code class = "docutils literal" > < span class = "pre" > markdownx/widget2.html< / span > < / code > (Django
1.10 and below) in your project’ s < span class = "guilabel" > TEMPLATE_DIRS< / span > .< / p >
< p > Here is an example of the contents:< / p >
< div class = "highlight-html" > < div class = "highlight" > < pre > < span > < / span > < span class = "p" > < < / span > < span class = "nt" > div< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " markdownx row" < / span > < span class = "p" > > < / span >
< span class = "p" > < < / span > < span class = "nt" > div< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " col-md-6" < / span > < span class = "p" > > < / span >
{{ markdownx_editor }}
< span class = "p" > < /< / span > < span class = "nt" > div< / span > < span class = "p" > > < / span >
< span class = "p" > < < / span > < span class = "nt" > div< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " col-md-6" < / span > < span class = "p" > > < / span >
< span class = "p" > < < / span > < span class = "nt" > div< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " markdownx-preview" < / span > < span class = "p" > > < /< / span > < span class = "nt" > div< / span > < span class = "p" > > < / span >
< span class = "p" > < /< / span > < span class = "nt" > div< / span > < span class = "p" > > < / span >
< span class = "p" > < /< / span > < span class = "nt" > div< / span > < span class = "p" > > < / span >
< / pre > < / div >
< / div >
< / div >
2017-04-23 12:52:52 +00:00
< div class = "section" id = "field-customization" >
< h3 > Field customization< a class = "headerlink" href = "#field-customization" title = "Permalink to this headline" > ¶< / a > < / h3 >
< p > We have ensured that < strong > MarkdownX< / strong > is fully extensible and provides a high degree of flexibility in development.< / p >
2017-04-25 00:17:10 +00:00
< p > There are times that you may wish to Markdownify a different type of field, or utilize your own customized widget. To
2017-04-23 12:52:52 +00:00
accommodate this, we have provided the tools to apply < strong > MarkdownX< / strong > infrastructure to other fields through < em > Widgets< / em > .< / p >
< p > For instance, to apply < strong > MarkdownX< / strong > to < code class = "docutils literal" > < span class = "pre" > TextField< / span > < / code > instances in your Django Admins, you can override the default
widget in the Admins module in < span class = "guilabel" > admin.py< / span > of your Django App as follows:< / p >
< div class = "highlight-python" > < table class = "highlighttable" > < tr > < td class = "linenos" > < div class = "linenodiv" > < pre > 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15< / pre > < / div > < / td > < td class = "code" > < div class = "highlight" > < pre > < span > < / span > < span class = "kn" > from< / span > < span class = "nn" > django.db< / span > < span class = "kn" > import< / span > < span class = "n" > models< / span >
< span class = "kn" > from< / span > < span class = "nn" > django.contrib< / span > < span class = "kn" > import< / span > < span class = "n" > admin< / span >
< span class = "kn" > from< / span > < span class = "nn" > markdownx.widgets< / span > < span class = "kn" > import< / span > < span class = "n" > AdminMarkdownxWidget< / span >
< span class = "kn" > from< / span > < span class = "nn" > .models< / span > < span class = "kn" > import< / span > < span class = "n" > MyModel< / span >
< span class = "k" > class< / span > < span class = "nc" > MyModelAdmin< / span > < span class = "p" > (< / span > < span class = "n" > admin< / span > < span class = "o" > .< / span > < span class = "n" > ModelAdmin< / span > < span class = "p" > ):< / span >
< span class = "n" > formfield_overrides< / span > < span class = "o" > =< / span > < span class = "p" > {< / span >
< span class = "n" > models< / span > < span class = "o" > .< / span > < span class = "n" > TextField< / span > < span class = "p" > :< / span > < span class = "p" > {< / span > < span class = "s1" > ' widget' < / span > < span class = "p" > :< / span > < span class = "n" > AdminMarkdownxWidget< / span > < span class = "p" > },< / span >
< span class = "p" > }< / span >
< span class = "n" > admin< / span > < span class = "o" > .< / span > < span class = "n" > site< / span > < span class = "o" > .< / span > < span class = "n" > register< / span > < span class = "p" > (< / span > < span class = "n" > MyModel< / span > < span class = "p" > ,< / span > < span class = "n" > MyModelAdmin< / span > < span class = "p" > )< / span >
< / pre > < / div >
< / td > < / tr > < / table > < / div >
< / div >
2017-04-25 00:17:10 +00:00
< div class = "section" id = "custom-image-tags" >
< h3 > Custom image tags< a class = "headerlink" href = "#custom-image-tags" title = "Permalink to this headline" > ¶< / a > < / h3 >
< p > Markdown uses < code class = "docutils literal" > < span class = "pre" > ![]()< / span > < / code > tag by default to insert uploaded image file. This generates a simple (X)HTML < code class = "docutils literal" > < span class = "pre" > < image> < / span > < / code > tag.
If you wish to have more control and use your own HTML tags, you may create a custom < code class = "docutils literal" > < span class = "pre" > form_valid()< / span > < / code > function in
< code class = "docutils literal" > < span class = "pre" > ImageUploadView< / span > < / code > class, as highlighted < a class = "reference external" href = "https://github.com/neutronX/django-markdownx/blob/master/markdownx/views.py#L55-L82" > here< / a > .< / p >
< / div >
2017-04-23 12:52:52 +00:00
< / div >
< / div >
< / div >
< div class = "articleComments" >
< / div >
< / div >
< footer >
< div class = "rst-footer-buttons" role = "navigation" aria-label = "footer navigation" >
< a href = "customization.html" class = "btn btn-neutral float-right" title = "Customization" accesskey = "n" rel = "next" > Next < span class = "fa fa-arrow-circle-right" > < / span > < / a >
< a href = "getting_started.html" class = "btn btn-neutral" title = "Getting Started" accesskey = "p" rel = "prev" > < span class = "fa fa-arrow-circle-left" > < / span > Previous< / a >
< / div >
< hr / >
< div role = "contentinfo" >
< p >
© Copyright 2017 - Adi, Pouria Hadjibagheri.
< / p >
< / div >
Built with < a href = "http://sphinx-doc.org/" > Sphinx< / a > using a < a href = "https://github.com/snide/sphinx_rtd_theme" > theme< / a > provided by < a href = "https://readthedocs.org" > Read the Docs< / a > .
< / footer >
< / div >
< / div >
< / section >
< / div >
< script type = "text/javascript" >
var DOCUMENTATION_OPTIONS = {
URL_ROOT:'./',
2017-04-25 13:57:17 +00:00
VERSION:'2.0.16',
2017-04-23 12:52:52 +00:00
COLLAPSE_INDEX:false,
FILE_SUFFIX:'.html',
HAS_SOURCE: true,
SOURCELINK_SUFFIX: '.txt'
};
< / script >
< script type = "text/javascript" src = "_static/jquery.js" > < / script >
< script type = "text/javascript" src = "_static/underscore.js" > < / script >
< script type = "text/javascript" src = "_static/doctools.js" > < / script >
< script type = "text/javascript" src = "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" > < / script >
< script type = "text/javascript" src = "_static/js/theme.js" > < / script >
< script type = "text/javascript" >
jQuery(function () {
SphinxRtdTheme.StickyNav.enable();
});
< / script >
< / body >
< / html >
