markdown_editor ver1

dmoj/urls.py

@@ -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(),

judge/views/markdown_editor.py

@@ -0,0 +1,21 @@
+# from django.contrib.auth.decorators import login_required
+from django.views import View
+from django.utils.timezone import now
+from django.shortcuts import render
+from django.db.models import BooleanField, Value
+from django.middleware.csrf import get_token
+from .preview import BlogMarkdownPreviewView
+
+
+# __all__ = ["MarkdownEditor"]
+
+
+class MarkdownEditor(View):
+    def get(self, request):
+        return render(
+            request,
+            "markdown_editor/markdown_editor.html",
+            {
+                "title": ("Markdown Editor"),
+            },
+        )

templates/markdown_editor/markdown_editor.html

@@ -0,0 +1,60 @@
+{% extends "base.html" %}
+
+{% block media %}
+  <style>
+    main {
+      overflow: hidden;
+    }
+    .left-markdown{
+      float: left;
+      width: 47%;
+      height: 620px;
+      /* background-color: #acabab;  */
+      padding: 20px;
+    }
+    .right-markdown{
+      float: right;
+      width: 47%;
+      height: 620px;
+      background-color: #6b6b6b;
+      /* #f0f0f0;  */
+      padding: 20px;
+    }
+  </style>
+{% endblock %}
+
+{% block body %}
+  <script>
+    $(document).ready(function(){
+      $("#inputField").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)
+            // data sẽ là html nó render, thế vào phần bên phải
+          },
+          error: function(error) {
+            alert(error);
+            console.log(error.message)
+          }
+        })
+      });
+    });
+  </script>
+  <div class="left-markdown">
+    <form id="post-form" method="POST" >
+      {% csrf_token %}
+      <textarea  id="inputField" cols="105" rows="40" value=" "></textarea>
+    </form>
+  </div>
+  <div class="right-markdown" id="display"></div>
+{% endblock %}
+