added feature dractags & demo

agusmakmun · Jan 1, 2017 · 9372327 · 9372327
1 parent bc1b072
commit 9372327
Show file tree

Hide file tree

Showing 7 changed files with 145 additions and 14 deletions.
diff --git a/README.rst b/README.rst
@@ -114,9 +114,9 @@ Setting Configurations ``settings.py``
         'markdown.extensions.fenced_code',
 
         # Custom markdown extensions.
-        'draceditor.utils.extensions.urlize',
-        'draceditor.utils.extensions.mention', # require for mention
-        'draceditor.utils.extensions.emoji',   # require for emoji
+        'draceditor.extensions.urlize',
+        'draceditor.extensions.mention', # require for mention
+        'draceditor.extensions.emoji',   # require for emoji
     ]
 
     # Markdown Extensions Configs
@@ -174,6 +174,36 @@ Usage
     admin.site.register(YourModel, YourModelAdmin)
 
 
+**Template**
+
+Simply safe the markdown content as html ouput with loading the templatetags from ``draceditor/templatetags/dractags.py``.
+
+::
+
+    {% load dractags %}
+    {{ field_name|safe_markdown }}
+
+    # example
+    {{ post.description|safe_markdown }}
+
+
+Test Draceditor from this Repository
+-------------------------------------
+
+I assume you already setup with virtual enviroment (virtualenv).
+
+::
+
+    $ git clone https://github.com/agusmakmun/dracos-markdown-editor.git
+    $ cd dracos-markdown-editor/ && python setup.py install
+    $ cd draceditor_demo/
+    $ python manage.py makemigrations && python manage.py migrate
+    $ python manage.py runserver
+
+
+And let checkout at http://127.0.0.1:8000/simple-form/ to your browser.
+
+
 Draceditor Commands Refference
 --------------------------------
 

diff --git a/draceditor/templatetags/__init__.py b/draceditor/templatetags/__init__.py
diff --git a/draceditor/templatetags/dractags.py b/draceditor/templatetags/dractags.py
@@ -0,0 +1,21 @@
+from django import template
+from django.utils.safestring import mark_safe
+
+from ..utils import markdownify
+
+register = template.Library()
+
+
+@register.filter
+def safe_markdown(field_name):
+    """
+    Safe the markdown text as html ouput.
+
+    Usage:
+        {% load dractags %}
+        {{ field_name|safe_markdown }}
+
+    Example:
+        {{ post.description|safe_markdown }}
+    """
+    return mark_safe(markdownify(field_name))
diff --git a/draceditor_demo/app/templates/base.html b/draceditor_demo/app/templates/base.html
@@ -4,7 +4,6 @@
   <title>{% block title %}{% endblock %} :: DracEditor</title>
 
   <link href="{% static 'plugins/css/ace.min.css' %}" type="text/css" media="all" rel="stylesheet" />
-  <link href="{% static 'plugins/css/atwho.css' %}" type="text/css" media="all" rel="stylesheet" />
   <link href="{% static 'plugins/css/semantic.min.css' %}" type="text/css" media="all" rel="stylesheet" />
   <link href="{% static 'css/draceditor.css' %}" type="text/css" media="all" rel="stylesheet" />
   <style>
@@ -22,16 +21,12 @@
           <i class="github icon"></i> Github
         </a>
         <a class="item" href="https://dracos-linux.org"><i class="spy icon"></i> Dracos Linux</a>
-        <div class="ui dropdown item" tabindex="0">Dropdown
+        <div class="ui dropdown item" tabindex="0">Choice Demo
           <i class="dropdown icon"></i>
           <div class="menu transition hidden" tabindex="-1">
-            <div class="item">Action</div>
-            <div class="item">Another Action</div>
-            <div class="item">Something else here</div>
-            <div class="divider"></div>
-            <div class="item">Separated Link</div>
-            <div class="divider"></div>
-            <div class="item">One more separated link</div>
+            <a href="{% url 'simple_form' %}" class="item">Simple Form</a>
+            <a href="{% url 'post_form' %}" class="item">Post Form</a>
+            <a href="{% url 'test_markdownify' %}" class="item">Test Markdownify</a>
           </div>
         </div>
         <div class="right menu">
@@ -58,7 +53,6 @@
   <script type="text/javascript" src="{% static 'plugins/js/mode-markdown.js' %}"></script>
   <script type="text/javascript" src="{% static 'plugins/js/ext-language_tools.js' %}"></script>
   <script type="text/javascript" src="{% static 'plugins/js/theme-github.js' %}"></script>
-  <script type="text/javascript" src="{% static 'plugins/js/marked.min.js' %}"></script>
   <script type="text/javascript" src="{% static 'plugins/js/highlight.min.js' %}"></script>
   <script type="text/javascript" src="{% static 'plugins/js/emojis.min.js' %}"></script>
   <script type="text/javascript" src="{% static 'js/draceditor.js' %}"></script>

diff --git a/draceditor_demo/app/templates/test_markdownify.html b/draceditor_demo/app/templates/test_markdownify.html
@@ -0,0 +1,63 @@
+{% load staticfiles %}
+{% load dractags %}
+<!DOCTYPE html>
+<html lang="en-us">
+<head>
+  <title>Test Markdonify :: DracEditor</title>
+  <link href="{% static 'plugins/css/ace.min.css' %}" type="text/css" media="all" rel="stylesheet" />
+  <link href="{% static 'plugins/css/semantic.min.css' %}" type="text/css" media="all" rel="stylesheet" />
+  <style>
+    .main-container {margin-top: 7em}
+  </style>
+
+  <script type="text/javascript" src="{% static 'plugins/js/jquery.min.js' %}"></script>
+</head>
+<body>
+  <header>
+    <div class="ui fixed inverted menu">
+      <div class="ui container">
+        <div class="header item">DracEditor</div>
+        <a class="item" href="https://github.com/agusmakmun/dracos-markdown-editor" target="_blank">
+          <i class="github icon"></i> Github
+        </a>
+        <a class="item" href="https://dracos-linux.org"><i class="spy icon"></i> Dracos Linux</a>
+        <div class="ui dropdown item" tabindex="0">Choice Demo
+          <i class="dropdown icon"></i>
+          <div class="menu transition hidden" tabindex="-1">
+            <a href="{% url 'simple_form' %}" class="item">Simple Form</a>
+            <a href="{% url 'post_form' %}" class="item">Post Form (login require)</a>
+            <a href="{% url 'test_markdownify' %}" class="item">Test Markdownify</a>
+          </div>
+        </div>
+        <div class="right menu">
+          <div class="item">
+            <div class="ui transparent inverted icon input">
+              <i class="search icon"></i>
+              <input type="text" placeholder="Search">
+            </div>
+          </div>
+          <a class="item">Link</a>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <div class="ui container main-container">
+    <div class="ui segment">
+      <h1>Title: {{ post.title }}</h1>
+      <p><b>Description:</b></p>
+      <hr />
+      {{ post.description|safe_markdown }}
+    </div>
+  </div>
+
+  <script type="text/javascript" src="{% static 'plugins/js/semantic.min.js' %}"></script>
+  <script type="text/javascript" src="{% static 'plugins/js/highlight.min.js' %}"></script>
+  <script>
+    $('pre').each(function(i, block){
+        hljs.highlightBlock(block);
+    });
+    $('.ui.dropdown').dropdown();
+  </script>
+</body>
+</html>
diff --git a/draceditor_demo/app/urls.py b/draceditor_demo/app/urls.py
@@ -1,10 +1,17 @@
 from django.conf.urls import url
 
-from app.views import (simple_form_view, post_form_view)
+from app.views import (
+    simple_form_view,
+    post_form_view,
+    test_markdownify
+)
 
 urlpatterns = [
     url(r'^simple-form/$', simple_form_view, name='simple_form'),
 
     # require to logged in
     url(r'^post-form/$', post_form_view, name='post_form'),
+
+    # test markdownify
+    url(r'^test-markdownify/$', test_markdownify, name='test_markdownify'),
 ]
diff --git a/draceditor_demo/app/views.py b/draceditor_demo/app/views.py
@@ -3,6 +3,7 @@
 from django.contrib.auth.decorators import login_required
 
 from app.forms import (SimpleForm, PostForm)
+from app.models import Post
 
 
 def simple_form_view(request):
@@ -24,3 +25,18 @@ def post_form_view(request):
         form = PostForm()
         context = {'form': form, 'title': 'Post Form'}
     return render(request, 'custom_form.html', context)
+
+
+def test_markdownify(request):
+    post = Post.objects.last()
+
+    if post is not None:
+        context = {'post': post}
+    else:
+        context = {
+            'post': {
+                'title': 'Fake Post',
+                'description': """It **working**! :smile: [Python Learning](https://python.web.id)"""
+            }
+        }
+    return render(request, 'test_markdownify.html', context)