如何在 Django 中新增文字編輯器欄位?


許多線上考試網站使用文字編輯器進行文字輸入、圖片上傳等操作。Quill 文字編輯器非常流行,它還提供了一個模型欄位,可以直接儲存到資料庫中。因此,您無需進行任何額外的配置即可將資料儲存到資料庫中。

在本文中,我們將瞭解如何在 Django 中建立文字編輯器欄位。

首先,建立一個 Django 專案和一個應用。進行一些基本設定,例如包含應用的urls。在專案和應用的同一級別建立media資料夾。

settings.py中,新增 -

INSTALLED_APPS = [ 'myapp.apps.MyappConfig', #django app
' django_quill' #module name]
.
.
.
.
..
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

安裝django_quill包 -

pip install django_quill

示例

在應用的urls.py中,新增以下內容 -

from django.urls import path
from . import views
urlpatterns = [
   path('', views.home,name="home"),
]
urlpatterns += static(settings.MEDIA_URL,
                           document_root=settings.MEDIA_ROOT)

在這裡,我們只是將主檢視設定在 url 和 media 資料夾 url 上。

現在,在應用目錄中建立一個templates資料夾,並在其中建立home.html檔案。在home.html中新增以下行 -

<!DOCTYPE html>
<html>
   <head>
   {{ form.media }}
      {% include 'django_quill/media.html' %}
      <title>
         TUT
      </title>
   </head>
   <body>
      <form role="form" method="POST">
         <legend>Form Title</legend>
         {% csrf_token %}
      {{form}}
         <button type="submit" class="btn btnprimary">Submit</button>
      </form>
</html>

在這裡,我們渲染了從後端傳送的表單。

views.py中,新增以下行 -

from django.shortcuts import render
from django import forms
from .models import another_model

class NewForm(forms.ModelForm):
   class Meta:
      model=another_model
      fields="__all__"

def home(request):
   if request.method =="POST":
      form=NewForm(request.POST)
      if form.is_valid():
         form.save()
   form=NewForm()
   return render(request,'home.html',{"form":form})

在這裡,我們建立了一個表單,然後使用 home 檢視渲染它。為了處理 POST 檢視,我們驗證了表單資料,然後儲存它。

models.py中,新增以下行 -

from django.db import models
from django_quill.fields import QuillField

class another_model(models.Model):
   name = models.CharField(max_length=200)
   place = models.CharField(max_length=100)
   animal = models.CharField(max_length=100)
   thing = models.CharField(max_length=100)
   content = QuillField(blank=True)

在這裡,我們建立了一個模型,並在其中建立了文字編輯器欄位,該欄位將儲存文字編輯器的資料。

輸出

更新於: 2021年8月26日

1K+ 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.