Skip to content

Commit df0cf0a

Browse files
agusmakmunagusmakmun
committed
release v1.0.3 - added preview demo
1 parent 60df0d5 commit df0cf0a

File tree

12 files changed

+194
-9
lines changed

12 files changed

+194
-9
lines changed

__screenshot/draceditor-preview.png renamed to __screenshot/draceditor-preview_backup.png

File renamed without changes.

‎__screenshot/draceditor_preview.png‎

190 KB
Loading

‎draceditor/__init__.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# -*- coding: utf-8 -*-
22

3-
__VERSION__ = '1.0.2'
3+
__VERSION__ = '1.0.3'
44
__AUTHOR__ = 'Agus Makmun (Summon Agus)'
55
__AUTHOR_EMAIL__ = '[email protected]'

‎draceditor/static/css/draceditor.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,22 @@
33
box-sizing: content-box;
44
}
55

6+
/* Scroll Bar */
7+
.section-draceditor ::-webkit-scrollbar-track {
8+
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
9+
border-radius: 10px;
10+
background-color: #F5F5F5;
11+
}
12+
.section-draceditor ::-webkit-scrollbar{
13+
width: 6px;
14+
background-color: #F5F5F5;
15+
}
16+
.section-draceditor ::-webkit-scrollbar-thumb {
17+
border-radius: 10px;
18+
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
19+
background-color: #555;
20+
}
21+
622
.main-draceditor {
723
max-width: 100%;
824
position: relative;

‎draceditor/static/js/draceditor.js‎

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
/**
2+
* Name : DracEditor v1.0.3
3+
* Created by : Agus Makmun (Summon Agus)
4+
* Release date : 30-Dec-2016
5+
* Official : https://dracos-linux.org
6+
* License : GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007
7+
* Repository : https://github.com/agusmakmun/dracos-markdown-editor
8+
**/
9+
110
(function ($) {
211
if (!$) {
312
$ = django.jQuery;
@@ -28,15 +37,17 @@
2837

2938
// Ace editor
3039
var editor = ace.edit('editor');
40+
var sessionEditor = editor.getSession();
3141
editor.setTheme('ace/theme/github');
32-
editor.getSession().setMode('ace/mode/markdown');
42+
sessionEditor.setMode('ace/mode/markdown');
43+
sessionEditor.setUseWrapMode(true);
3344
editor.$blockScrolling = Infinity; // prevents ace from logging annoying warnings
3445
editor.renderer.setScrollMargin(10, 10); // set padding
3546

3647
// Saving for the session.
3748
/*
38-
editor.getSession().on('change', function () {
39-
draceditor.val(editor.getSession().getValue());
49+
sessionEditor.on('change', function () {
50+
draceditor.val(sessionEditor.getValue());
4051
});*/
4152

4253
editor.setOptions({
@@ -51,7 +62,7 @@
5162
var emojiWordCompleter = {
5263
getCompletions: function(editor, session, pos, prefix, callback) {
5364
var wordList = emojis; // from `atwho/emojis.min.js`
54-
var obj = editor.getSession().getTokenAt(pos.row, pos.column.count);
65+
var obj = sessionEditor.getTokenAt(pos.row, pos.column.count);
5566
var curTokens = obj.value.split(/\s+/);
5667
var lastToken = curTokens[curTokens.length-1];
5768

@@ -69,7 +80,7 @@
6980
}
7081
var mentionWordCompleter = {
7182
getCompletions: function(editor, session, pos, prefix, callback) {
72-
var obj = editor.getSession().getTokenAt(pos.row, pos.column.count);
83+
var obj = sessionEditor.getTokenAt(pos.row, pos.column.count);
7384
var curTokens = obj.value.split(/\s+/);
7485
var lastToken = curTokens[curTokens.length-1];
7586

@@ -175,10 +186,23 @@
175186
return "<p>" + this.emoji(text) + "</p>\n";
176187
};
177188

189+
// Synchronize the scroll positions between the editor and preview.
190+
sessionEditor.on('changeScrollTop', function() {
191+
$('.markdown-preview').scrollTop(
192+
sessionEditor.getScrollTop()
193+
);
194+
});
195+
$('.markdown-preview').on('scroll', function () {
196+
sessionEditor.setScrollTop(
197+
$(this).scrollTop()
198+
);
199+
});
200+
178201
// update preview based on editor content
179202
var onRender = function(){
180-
// Release save session value to textarea (require for saving to database).
181-
draceditor.val(editor.getSession().getValue());
203+
204+
// Save session value to textarea (require for saving to database).
205+
draceditor.val(sessionEditor.getValue());
182206

183207
// Setup with marked js.
184208
marked.setOptions({

‎draceditor_demo/app/admin.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88

99

1010
class PostAdmin(admin.ModelAdmin):
11+
list_display = ['title', 'id']
1112
formfield_overrides = {
1213
DraceditorField: {'widget': AdminDraceditorWidget},
1314
models.TextField: {'widget': AdminDraceditorWidget},

‎draceditor_demo/app/forms.py‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
from django import forms
2+
3+
from draceditor.fields import DraceditorFormField
4+
from app.models import Post
5+
6+
7+
class SimpleForm(forms.Form):
8+
title = forms.CharField(widget=forms.TextInput())
9+
description = DraceditorFormField()
10+
11+
12+
class PostForm(forms.ModelForm):
13+
14+
class Meta:
15+
model = Post
16+
fields = '__all__'

‎draceditor_demo/app/templates/base.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
{% load staticfiles %}<!DOCTYPE html>
2+
<html lang="en-us">
3+
<head>
4+
<title>{% block title %}{% endblock %} :: DracEditor</title>
5+
6+
<link href="{% static 'plugins/css/ace.min.css' %}" type="text/css" media="all" rel="stylesheet" />
7+
<link href="{% static 'plugins/css/atwho.css' %}" type="text/css" media="all" rel="stylesheet" />
8+
<link href="{% static 'plugins/css/semantic.min.css' %}" type="text/css" media="all" rel="stylesheet" />
9+
<link href="{% static 'css/draceditor.css' %}" type="text/css" media="all" rel="stylesheet" />
10+
<style>
11+
.main-container {margin-top: 7em}
12+
</style>
13+
14+
<script type="text/javascript" src="{% static 'plugins/js/jquery.min.js' %}"></script>
15+
</head>
16+
<body>
17+
<header>
18+
<div class="ui fixed inverted menu">
19+
<div class="ui container">
20+
<div class="header item">DracEditor</div>
21+
<a class="item" href="https://github.com/agusmakmun/dracos-markdown-editor" target="_blank">
22+
<i class="github icon"></i> Github
23+
</a>
24+
<a class="item" href="https://dracos-linux.org"><i class="spy icon"></i> Dracos Linux</a>
25+
<div class="ui dropdown item" tabindex="0">Dropdown
26+
<i class="dropdown icon"></i>
27+
<div class="menu transition hidden" tabindex="-1">
28+
<div class="item">Action</div>
29+
<div class="item">Another Action</div>
30+
<div class="item">Something else here</div>
31+
<div class="divider"></div>
32+
<div class="item">Separated Link</div>
33+
<div class="divider"></div>
34+
<div class="item">One more separated link</div>
35+
</div>
36+
</div>
37+
<div class="right menu">
38+
<div class="item">
39+
<div class="ui transparent inverted icon input">
40+
<i class="search icon"></i>
41+
<input type="text" placeholder="Search">
42+
</div>
43+
</div>
44+
<a class="item">Link</a>
45+
</div>
46+
</div>
47+
</div>
48+
</header>
49+
50+
<div class="ui container main-container">
51+
<div class="ui segment">
52+
{% block content %}{% endblock %}
53+
</div>
54+
</div>
55+
56+
<script type="text/javascript" src="{% static 'plugins/js/ace.js' %}"></script>
57+
<script type="text/javascript" src="{% static 'plugins/js/semantic.min.js' %}"></script>
58+
<script type="text/javascript" src="{% static 'plugins/js/mode-markdown.js' %}"></script>
59+
<script type="text/javascript" src="{% static 'plugins/js/ext-language_tools.js' %}"></script>
60+
<script type="text/javascript" src="{% static 'plugins/js/theme-github.js' %}"></script>
61+
<script type="text/javascript" src="{% static 'plugins/js/marked.min.js' %}"></script>
62+
<script type="text/javascript" src="{% static 'plugins/js/highlight.min.js' %}"></script>
63+
<script type="text/javascript" src="{% static 'plugins/js/emojis.min.js' %}"></script>
64+
<script type="text/javascript" src="{% static 'js/draceditor.js' %}"></script>
65+
</body>
66+
</html>

‎draceditor_demo/app/templates/custom_form.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{% extends "base.html" %}
2+
{% block title %}{{ title }}{% endblock %}
3+
4+
{% block content %}
5+
<form class="ui form" method="post">{% csrf_token %}
6+
<div class="field">
7+
{{ form.title }}
8+
</div>
9+
<div class="field">
10+
{{ form.description }}
11+
</div>
12+
<div class="field">
13+
<div class="ui clearing segment">
14+
<button class="ui right floated positive button">
15+
<i class="save icon"></i> Save Post
16+
</button>
17+
</div>
18+
</div>
19+
</div>
20+
21+
<script>
22+
// just disable `two fields`
23+
$('.draceditor-toolbar').removeClass('two');
24+
$('form [name="title"]').attr({'placeholder': 'Post Title'});
25+
</script>
26+
{% endblock %}

‎draceditor_demo/app/urls.py‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
from django.conf.urls import url
2+
3+
from app.views import (simple_form_view, post_form_view)
4+
5+
urlpatterns = [
6+
url(r'^simple-form/$', simple_form_view, name='simple_form'),
7+
8+
# require to logged in
9+
url(r'^post-form/$', post_form_view, name='post_form'),
10+
]

0 commit comments

Comments
 (0)