Have you ever wondered to write just simple text in a text editor and got a html code for it something similar to text to html converter. It would be amazing that you can write an HTML code without actually writing it. Being a part of the technical field we have to learn a programming language, its syntax, its function and so on, which is not enough in this competitive era where learning one programming language is not enough. So it would be awesome to lighten the burden of at least one language where you don’t need to learn programming language and get a code for it. Yes you are getting it correct, we are talking about text to html converters.
In this blog, we are going to create a text to html converter using a django template, it is going to be really cool. We are going to use django for the template and text editor, and javascript for converting the text.
Let’s learn how to create your very own text to html converter.
Text to HTML convertor using Python Django
Step 1. Create Django Project
The first step is to create a django project folder, an app folder in that folder and install django-ckeditor.
- Create a Django project.
django admin startproject blog_text_to_html
- Create app in that django-project.
python manage.py startapp texteditor
- Install django-ckeditor, ckeditor provides a text editor in django.
pip install ckeditor
4. Add your app name in installed apps.
Settings.py
INSTALLED_APPS = [ 'texteditor', 'ckeditor', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', ]
Step 2. Add files and Folder to the Django Project
We need to create a template folder in the django folder and a urls.py file in the app folder.
- Create a new folder in the django folder(here, blog_text_to_html folder) save it with the name template.
- Add the path for this template folder in blog_text_to_html > settings.py .
Settings.py
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR,'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
3. Create a new file in the app folder(here, text editor) save it with the name urls.py .
4. Add path for this url.py file in blog_text_to_html > urls.py .
Urls.py
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path('admin/', admin.site.urls),
path('',include('texteditor.urls'))
]
Step3. Create Text to Html convertor
For creating text to html converters we have to create a class model named Editor in which we are going to have our text editor template. After the model we need to create a form of that model.
1. Create a model for Editor in texteditor(your_app_name) > models.py .
Models.py
from django.db import models from ckeditor.fields import RichTextField class Editor(models.Model): body=RichTextField(blank=True,null=True)
2. Create a form for the model in texteditor > forms.py .
Forms.py
from django import forms from .models import Editor from ckeditor.widgets import CKEditorWidget class EditorForm(forms.ModelForm): body = forms.CharField(widget=CKEditorWidget(),label="Text Editor") class Meta: model=Editor fields="__all__"
3. Create html file in template>index.html .
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text to html editor</title>
<!-- ++++++++++++++++++++ boostrap cdn ++++++++++++++++++++++++ -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<style>
#cke_id_body {
width: inherit !important;
}
.htmleditor p {
font-weight: 900;
font-size: 20px;
}
.texteditor p label {
font-weight: 800;
font-size: 18px;
}
#htmldata {
font-weight: 600;
}
</style>
<body>
<!-- ----------------------Navbar start -------------------- -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Text to Html Convertor</a>
</nav>
<!-- ---------------------------Navbar Ends---------------------------- -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-6">
<div class="texteditor">
{{form.media}}
{{form.as_p}}
</div>
<input type="submit" class="btn btn-info" onclick="TextConvert()">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-6">
<div class="htmleditor">
<p>HTML Editor</p>
<div class="form-group">
<textarea class="form-control " rows="16" id='htmldata'>
</textarea>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
function TextConvert() {
var x = CKEDITOR.instances['id_body'].getData();
var y = document.getElementById('htmldata');
y.innerHTML = x;
}
</script>
<!-- ++++++++++++++++++++ boostrap cdn ++++++++++++++++++++++++ -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
4. Create a path for the index html page in texteditor > urls.py .
Urls.py
from django.urls import path,include
from . import views
urlpatterns = [
path('',views.index,name='index')
]
5. Create a function for the index page in texteditor > views.py .
Views.py
from django.shortcuts import render
from .models import Editor
from .forms import EditorForm
def index(request):
form=EditorForm()
return render(request,'index.html',{'form':form})
Output :-
Quick Revision
- Create your django project folder.
- Create an app folder in the django project folder.
- Install django-ckeditor.
- Add template folder in the django folder and provide its path in django_folder > settings.py .
- Add file named as urls.py in the app folder and provide its path in django_project > urls.py.
- Create a model for Editor class in app_folder > models.py.
- Create a form for the model in app_folder > forms.py.
- Write html code for the converter in django_project > template > index.html.
- Add path of index html page in app_folder > urls.py.
- Create function for the index html page in app_folder >views.py.
