Text to Html Generator using Django

Lots of thing that you can create using django .I decided to bring lot of project build on django so,today i explain you to build Converter that convert text to Html format.
I explain each and every term step by step :-

1. First,Create djangoproject with command django-admin startproject projectname.

2. Inside main project create app with command python manage.py startapp blog.

3.To create Text editor there is something called ckeditor .so install this with command pip install django-ckeditor. for more detail 👉

4.Include blog and ckeditor inside setting.py file of main project.

INSTALLED_APPS = [
    'blog',
    'ckeditor',]

5.In model.py file of blog app

from django.db import models
from ckeditor.fields import RichTextField
# Create your models here.

class Post(models.Model):
    body=RichTextField(blank=True,null=True)

6.Now, Create forms.py inside blog app.

from django import forms
from .models import Post
from ckeditor.widgets import CKEditorWidget

class PostForm(forms.ModelForm):
    body = forms.CharField(widget=CKEditorWidget(),label="Text Editor")
    class Meta:
        model=Post
        fields=('body',)

7.In views.py file of blog app.

from django.shortcuts import render
from .models import Post
from blog.forms import PostForm

def home(request):
    form=PostForm()
    return render(request,'blog/home.html',{'form':form})

8.Now, create template folder inside blog app and inside template create blog and again inside blog create home.html file such that : blog/template/blog/home.html

home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TexttoHtml</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="#">TexttoHtml</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" 
        data-target="#navbarSupportedContent" 
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home </a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">About </a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
        </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>

9.At last define the url for all views.so inside urls.py of main project.

from django.contrib import admin
from django.urls import path,include
from blog import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('',views.home,name='home'),
]

For demo click me

Tags:How to create Text generator using django || Text to Html

generator using django.

Subscribe Us

Text to Html Generator using Django