Online Markdown Editor using Django
Last Updated :
06 Feb, 2024
In this article, we will guide you through the process of creating an Online Markdown Editor using Django. This powerful tool allows users to seamlessly convert HTML code into a polished web output. By simply entering your HTML code into the input field, our Online Markdown Editor will instantly generate the corresponding output, making the process of creating and visualizing web forms a breeze.
Why Use an Online Markdown Editor?
An Online Markdown Editor proves to be a valuable asset for developers and web designers alike. It simplifies the task of converting HTML code into a presentable web form, eliminating the need for manual rendering and reducing the likelihood of errors. With this tool, users can focus on their HTML content, confident that the Online Markdown Editor will handle the transformation seamlessly.
Online Markdown Editor using Django
To install Django follow these steps.
Starting the Project Folder
To start the project use this command
django-admin startproject core
cd core
To start the app use this command
python manage.py startapp home
Now add this app to the ‘settings.py’
INSTALLED_APPS = [
"django.contrib.admin",
"django.contrib.auth",
"django.contrib.contenttypes",
"django.contrib.sessions",
"django.contrib.messages",
"django.contrib.staticfiles",
"home",
]
File Structure
Setting Necessary Files
models.py : This Django code defines a model called `Edit_Doc` with title and content fields, allowing the creation of documents with specified titles and associated text content.
Python3
from django.db import models
# Create your models here.
class Edit_Doc(models.Model):
title = models.CharField(max_length=255)
content = models.TextField()
views.py : First install the markdown library using the command , pip install markdown. This Django view, `markdown_editor`, processes form submissions from an Online Markdown Editor, converting Markdown content to HTML using the `markdown` library. It renders a preview with the title and HTML content..
Python3
from django.shortcuts import render
# markdown_editor_app/views.py
from django.shortcuts import render
from .forms import Edit_Doc_Form
import markdown
def markdown_editor(request):
if request.method == 'POST':
form = Edit_Doc_Form(request.POST)
if form.is_valid():
title = form.cleaned_data['title']
content = form.cleaned_data['content']
html_content = markdown.markdown(content)
return render(request, 'preview.html', {'title': title, 'html_content': html_content})
else:
form = Edit_Doc_Form()
return render(request, 'md_editor.html', {'form': form})
forms.py : The Django form `Edit_Doc_Form` is created with fields for title (max length: 255) and content (text area), designed for capturing input in the Online Markdown Editor.
Python3
# markdown_editor_app/forms.py
from django import forms
class Edit_Doc_Form(forms.Form):
title = forms.CharField(max_length=255)
content = forms.CharField(widget=forms.Textarea)
md_editor_app/urls.py : This Django `urls.py` establishes a URL pattern for the 'markdown_editor' view, accessible at '/markdown_editor/'.
Python3
# markdown_editor_app/urls.py
from django.urls import path
from .views import markdown_editor
urlpatterns = [
path('markdown_editor/', markdown_editor, name='markdown_editor'),
]
md_editor_project/urls.py : In this Django `urls.py` configuration, the admin site is mapped to '/admin/', and the URLs from the 'md_editor_app' are included, allowing the app's functionality to be accessed from the root path.
Python3
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path("admin/", admin.site.urls),
path('', include('md_editor_app.urls')),
]
Creating GUI
md_editor.html : This HTML template for the Markdown Editor features a clean and user-friendly design. The form includes fields for title and content, with a 'Preview' button. The styling provides a pleasant editing experience with a centered layout, responsive design, and subtle box-shadow effects.
HTML
<!-- markdown_editor_app/templates/markdown_editor.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown Editor</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.editor-container {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
color: #333;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
label {
margin-bottom: 8px;
}
input, textarea {
padding: 8px;
margin-bottom: 16px;
width: 100%;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="editor-container">
<h2>Markdown Editor</h2>
<form method="post">
{% csrf_token %}
<label for="{{ form.title.id_for_label }}" >Title:</label>
{{ form.title }}
<label for="{{ form.content.id_for_label }}">Content:</label>
{{ form.content }}
<button type="submit">Preview</button>
</form>
</div>
</body>
</html>
preview.html : This HTML template, 'preview.html', renders a preview of the Markdown content along with the provided title. The design is clean and centered, featuring a 'Download as PDF' button. It includes minimal styling for readability and a responsive layout.
HTML
<!-- markdown_editor_app/templates/preview.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ title }} - Preview</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.preview-container {
text-align: center;
}
h2 {
color: #333;
margin-top: 0;
}
button {
padding: 10px;
margin-top: 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="preview-container">
<h2>{{ title }}</h2>
<br><br>
{{ html_content|safe }}
</div>
</body>
</html>
Deployment of the Project
Run these commands to apply the migrations:
python3 manage.py makemigrations
python3 manage.py migrate
Run the server with the help of following command:
python3 manage.py runserver
Output :
Similar Reads
Task Pomodoro Timer using Django
This article explores the development of a Task Pomodoro Timer using Django. Users can set, stop, pause, and delete time intervals for tasks. To engage these features, signing up and logging in are mandatory. The timer offers customization options, allowing users to set seconds, hours, minutes, and
12 min read
Note-taking App using Django
In this article, we will explore a note-making app. In this article, we will create a note-making app using Django. We will also use the Django authentication system. Users need to create an account on the web to access the note-making app. After that, users will have access to the note-making app.
8 min read
Python | Sessions framework using django
Django sessions let us store data for each user across different pages, even if they’re not logged in. The data is saved on the server and a small cookie (sessionid) is used to keep track of the user.A session stores information about a site visitor for the duration of their visit (and optionally be
3 min read
Recipe Meal Planner using Django
We will create the Recipe Meal Planner using Django step-by-step. Generally, we will implement the CRUD (Create, Read, Update, Delete) operations, allowing users to add the recipe name, day, and the recipe itself. Additionally, we will establish a login system, requiring users to register and log in
8 min read
Adding WYSIWYG editor to Django Project
Often, to manage content efficiently we use WYSIWYG (What You See Is What You Get) editor which stores our content in html and is also helpful to upload images, creating links, lists and works almost like Wordpress editor. This article is in continuation of Blog CMS Project in Django. Check this out
3 min read
ToDo webapp using Django
Our task is to create a simple ToDo app using Django that allows users to add, view, and delete notes. We will build this by setting up a Django project, creating a Todo model, designing forms and views to handle user input, and creating templates to display the tasks. Step-by-step, we'll implement
4 min read
Online Survey Tool using Django
In this article, we'll help you make an Online Survey Tool using Django. In our tool, only admin users can create forms to keep things in control and ensure quality. But, we've also made it so that authenticated users can fill out surveys. If you're not logged in, you can't submit a survey anonymous
6 min read
Portfolio Showcase using Django
In this article, we will create a Portfolio Showcase using Django. For creating the portfolio showcase, we will use HTML and CSS for the frontend. Additionally, in this article, we will demonstrate how to create a form in which you need to submit some details. When you fill out the form and submit i
8 min read
E-book Library using Django
In this article, we will demonstrate how to build an E-book Library using Django. We have incorporated the functionality of login and registration, ensuring that users must first log in and register to access and read books. Additionally, after logging in, users gain the capability to both read and
15+ min read
Image Gallery GUI using Django
Image Gallery GUI using Django is a web application that allows users to view and manage a collection of images stored in a database through a user-friendly graphical interface. Here are the step-by-step instructions to implement the Image Gallery GUI.Create Django Project and AppPrerequisites: Djan
3 min read