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
Recipe Meal Planner using Django
In this article, 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 re
9 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
Django is a high-level Python Web framework-based web framework that allows rapid development and clean, pragmatic design. today we will create a todo app to understand the basics of Django. In this web app, one can create notes like Google Keep or Evernote. Basic setupCreate a virtual environment,
3 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
Image Gallery GUI using Django
Django, a powerful web framework for Python, makes it relatively easy to create a robust and user-friendly Image Gallery Graphical User Interface (GUI) for your web application. In this article, we'll guide you through the process of building an Image Gallery GUI using Django. Image Gallery GUI usin
4 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
Language Learning App using Django
In this article, we will guide you through creating a language-learning application using Django in Python. Language Learning App Using DjangoBelow, is the step-by-step Implementation of a language learning app using Django in Python: Starting the Project FolderTo start the project use this command
15 min read
How to create a form using Django Forms ?
Django forms are an advanced set of HTML forms that can be created using python and support all features of HTML forms in a pythonic way. This post revolves around how to create a basic form using various Form Fields and attributes. Creating a form in Django is completely similar to creating a model
3 min read