Hướng dẫn django template convert string to html - mẫu django chuyển đổi chuỗi thành html

Bạn đã bao giờ tự hỏi để viết văn bản đơn giản trong trình soạn thảo văn bản và có mã HTML cho nó một cái gì đó tương tự như trình chuyển đổi văn bản sang HTML. Thật đáng kinh ngạc khi bạn có thể viết mã HTML mà không thực sự viết nó. Là một phần của lĩnh vực kỹ thuật, chúng ta phải học một ngôn ngữ lập trình, cú pháp, chức năng của nó, v.v., điều này không đủ trong kỷ nguyên cạnh tranh này, nơi việc học một ngôn ngữ lập trình là không đủ. Vì vậy, thật tuyệt vời khi làm sáng tỏ gánh nặng của ít nhất một ngôn ngữ mà bạn không cần phải học ngôn ngữ lập trình và lấy mã cho nó. Vâng, bạn đang làm cho nó chính xác, chúng tôi đang nói về các bộ chuyển đổi văn bản cho HTML.

Trong blog này, chúng tôi sẽ tạo một văn bản cho bộ chuyển đổi HTML bằng cách sử dụng mẫu Django, nó sẽ thực sự tuyệt vời. Chúng tôi sẽ sử dụng Django cho trình soạn thảo mẫu và văn bản và JavaScript để chuyển đổi văn bản.

Hãy cùng học cách tạo văn bản của riêng bạn thành bộ chuyển đổi HTML.

Văn bản chuyển đổi HTML bằng Python Django

Bước 1. Tạo dự án Django

Bước đầu tiên là tạo một thư mục dự án Django, một thư mục ứng dụng trong thư mục đó và cài đặt Django-ckeditor.

1. Tạo một dự án Django. project.

django admin startproject blog_text_to_html

1. Tạo ứng dụng trong dự án Django đó. in that django-project.

python manage.py startapp texteditor

1. Cài đặt Django-ckeditor, CKeditor cung cấp một trình soạn thảo văn bản trong Django.ckeditor provides a text editor in django.

pip install ckeditor

4. Thêm tên ứng dụng của bạn trong các ứng dụng đã cài đặt.

Settings.py

INSTALLED_APPS = [
    'texteditor',
    'ckeditor',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

Bước 2. Thêm tệp và thư mục vào dự án Django

Chúng ta cần tạo một thư mục mẫu trong thư mục django và tệp urls.py trong thư mục ứng dụng.

1. Tạo một thư mục mới trong thư mục Django (tại đây, thư mục blog_TEXT_TO_HTML) Lưu nó với mẫu tên.new folder in the django folder(here, blog_text_to_html folder) save it with the name template.
2. Thêm đường dẫn cho thư mục mẫu này trong blog_TEXT_TO_HTML> Cài đặt.py.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. Tạo một tệp mới trong thư mục ứng dụng (ở đây, trình soạn thảo văn bản) Lưu nó bằng tên URLS.PY. new file in the app folder(here, text editor) save it with the name urls.py .

4. Thêm đường dẫn cho tệp url.py này trong blog_text_to_html> urls.py.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'))
]

Bước 3. Tạo văn bản thành HTML Convertor

Để tạo văn bản cho các bộ chuyển đổi HTML, chúng tôi phải tạo một mô hình lớp có tên là trình soạn thảo trong đó chúng tôi sẽ có mẫu trình soạn thảo văn bản của chúng tôi. Sau mô hình, chúng ta cần tạo một hình thức của mô hình đó.1. Tạo một mô hình cho Trình chỉnh sửa trong Texteditor (your_app_name)> model.py & nbsp ;.
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. Tạo một biểu mẫu cho mô hình trong texteditor> forms.py.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. Tạo tệp HTML trong mẫu> index.html.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. Tạo một đường dẫn cho trang HTML chỉ mục trong texteditor> urls.py. texteditor > urls.py .

Urls.py

from django.urls import path,include
from . import views
urlpatterns = [
    path('',views.index,name='index')
]

5. Tạo một chức năng cho trang chỉ mục trong Textitor> ViewS.Py & nbsp ;.texteditor > views.py .

Views.py

python manage.py startapp texteditor

Đầu ra:-

Sửa đổi nhanh chóng

1. Tạo thư mục dự án Django của bạn.
2. Tạo một thư mục ứng dụng trong thư mục dự án Django.
3. Cài đặt Django-ckeditor.
4. Thêm thư mục mẫu trong thư mục django và cung cấp đường dẫn của nó trong & nbsp; django_folder> settings.py.django_folder > settings.py .
5. & nbsp; Thêm tệp có tên là urls.py trong thư mục ứng dụng và cung cấp đường dẫn của nó trong & nbsp; django_project> urls.py. django_project > urls.py.
6. Tạo một mô hình cho lớp Trình chỉnh sửa trong app_folder> model.py.app_folder > models.py.
7. Tạo một biểu mẫu cho mô hình trong app_folder> forms.py. app_folder > forms.py.
8. Viết mã HTML cho bộ chuyển đổi trong django_project> mẫu> index.html.django_project > template > index.html.
9. Thêm đường dẫn của trang HTML trong app_folder> urls.py.app_folder > urls.py.
10. Tạo chức năng cho trang HTML chỉ mục trong App_Folder> ViewS.Py.app_folder >views.py.

Liên kết GitHub:-

https://github.com/jaya2320/Text-to-Html-convertor