Markdown Editor (#85)

This commit is contained in:
Bao Le 2023-10-03 02:30:46 +08:00 committed by GitHub
parent 21905fd1db
commit 067214b587
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 174 additions and 0 deletions

View file

@ -44,6 +44,7 @@ from judge.views import (
language,
license,
mailgun,
markdown_editor,
notification,
organization,
preview,
@ -405,6 +406,11 @@ urlpatterns = [
]
),
),
url(
r"^markdown_editor/",
markdown_editor.MarkdownEditor.as_view(),
name="markdown_editor",
),
url(
r"^submission_source_file/(?P<filename>(\w|\.)+)",
submission.SubmissionSourceFileView.as_view(),

View file

@ -0,0 +1,14 @@
from django.views import View
from django.shortcuts import render
from django.utils.translation import gettext_lazy as _
class MarkdownEditor(View):
def get(self, request):
return render(
request,
"markdown_editor/markdown_editor.html",
{
"title": _("Markdown Editor"),
},
)

View file

@ -130,6 +130,18 @@ msgstr "Thể thức"
msgid "Rating"
msgstr ""
#: templates/markdown_editor/markdown_editor.html:107
msgid "Insert Image"
msgstr "Chèn hình ảnh"
#: templates/markdown_editor/markdown_editor.html:110
msgid "From the web"
msgstr "Từ web"
#: templates/markdown_editor/markdown_editor.html:116
msgid "From your computer"
msgstr "Từ máy tính của bạn"
#: judge/admin/contest.py:201
msgid "Access"
msgstr "Truy cập"
@ -6255,3 +6267,4 @@ msgstr "Chọn tất cả"
#~ msgid "Hard"
#~ msgstr "Khó"

View file

@ -39,6 +39,12 @@ msgstr "Đăng ký tên"
msgid "Report"
msgstr "Báo cáo"
msgid "Insert Image"
msgstr "Chèn hình ảnh"
msgid "Save"
msgstr "Lưu"
msgid "2sat"
msgstr ""
@ -593,3 +599,4 @@ msgstr ""
msgid "z-function"
msgstr ""

View file

@ -0,0 +1,134 @@
{% extends "base.html" %}
{% block media %}
<style>
main {
overflow: hidden;
}
#content {
width: 100%;
}
#content.wrapper {
padding: 0;
}
.form-area {
float: left;
width: 47%;
height: 100%
}
.wmd-preview{
float: right;
margin-top: 0;
}
.width-controller{
width: 51%;
}
.wmd-input {
height: calc(100vh - 114px);
}
.right-markdown{
height: calc(100vh - 69px);
overflow-y: scroll;
}
</style>
{% endblock %}
{% block js_media %}
<script>
$(document).ready(function(){
$("#wmd-input-id_body").on("keyup", function() {
const csrfToken = "{{ csrf_token }}";
$.ajax({
url: "{{url('blog_preview')}}",
type: 'POST',
headers: {
'X-CSRFToken': csrfToken, // Include the CSRF token in the headers
},
data: {
preview: $(this).val()
},
success: function(data) {
$('#display').html(data)
},
error: function(error) {
alert(error);
console.log(error.message)
}
})
});
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const leftDiv = document.getElementById("wmd-input-id_body");
const rightDiv = document.getElementById("display");
leftDiv.addEventListener("scroll", function() {
rightDiv.scrollTop = leftDiv.scrollTop;
});
rightDiv.addEventListener("scroll", function() {
leftDiv.scrollTop = rightDiv.scrollTop;
});
});
</script>
<script src="{{ static('pagedown/Markdown.Converter.js') }}"></script>
<script src="{{ static('pagedown-extra/pagedown/Markdown.Converter.js') }}"></script>
<script src="{{ static('pagedown/Markdown.Sanitizer.js') }}"></script>
<script src="{{ static('pagedown/Markdown.Editor.js') }}"></script>
<script src="{{ static('pagedown-extra/Markdown.Extra.js') }}"></script>
<script src="{{ static('pagedown_init.js') }}"></script>
<script src="{{ static('mathjax3_config.js') }}"></script>
<script src="http://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
<script src="{{ static('pagedown_math.js') }}"></script>
{% endblock %}
{% block title_row %}
{% endblock %}
{% block body %}
<div id="new-comment" class="form-area" style="">
<input type="hidden" name="parent" id="id_parent">
<div class="comment-post-wrapper">
<div id="comment-form-body"><div class="wmd-wrapper image-upload-enabled">
<div class="wmd-panel">
<div id="wmd-button-bar-id_body"></div>
<textarea id="wmd-input-id_body" class="wmd-input" name="body" required=""></textarea>
</div>
<div id="id_body-preview" data-preview-url="{{url('comment_preview')}}" data-textarea-id="wmd-input-id_body" data-timeout="1000" class="wmd-panel wmd-preview dmmd-preview dmmd-no-button">
<div class="dmmd-preview-update"><i class="fa fa-refresh"></i> {{_('Update Preview')}}</div>
<div class="dmmd-preview-content content-description"></div>
</div>
<div class="pagedown-image-upload">
<h2>{{_('Insert Image')}}</h2>
<div class="form-row">
<div>
<label class="label">{{_('From the web')}}</label>
<input class="url-input" type="text" placeholder="http://">
</div>
</div>
<div class="form-row">
<div>
<label class="label">{{_('From your computer')}}</label>
<input class="file-input" type="file" name="image" id="file" data-action="/pagedown/image-upload/" accept="image/*">
</div>
</div>
<div class="submit-row">
<div class="submit-loading"></div>
<input class="submit-input show" type="submit" value="{{_('Save')}}" name="_addanother">
<p class="deletelink-box"><a href="#" class="close-image-upload deletelink">{{_('Cancel')}}</a></p>
</div>
</div>
</div></div>
</div>
</div>
<div id="id_body-preview" data-preview-url="{{url('comment_preview')}}" data-textarea-id="wmd-input-id_body" data-timeout="1000" class="width-controller wmd-panel wmd-preview dmmd-preview dmmd-no-button dmmd-preview-has-content">
<div class="right-markdown dmmd-preview-content content-description" id="display"></div>
</div>
{% endblock %}