วิธีติดตั้งและใช้งาน django-summernote
django-summernote เป็นแอปพลิเคชันของ Django ที่ช่วยให้คุณเพิ่มฟังก์ชันการแก้ไขข้อความแบบ WYSIWYG (What You See Is What You Get)
django-summernote เป็นแอปพลิเคชันของ Django ที่ช่วยให้คุณเพิ่มฟังก์ชันการแก้ไขข้อความแบบ WYSIWYG (What You See Is What You Get) เข้าไปในโปรเจกต์ Django ของคุณได้อย่างง่ายดาย ทำให้ผู้ใช้สามารถสร้างเนื้อหาที่มีรูปแบบที่สวยงามและหลากหลายได้โดยไม่ต้องมีความรู้ด้าน HTML หรือ CSS มากนัก
ขั้นตอนการติดตั้งและใช้งาน
1. ติดตั้ง Package
pip install django-summernote
2. เพิ่ม App เข้าไปใน Settings
แก้ไขไฟล์ settings.py ของโครงการ Django เพิ่ม 'django_summernote' เข้าไปใน INSTALLED_APPS:
INSTALLED_APPS = [
# ...
'django_summernote',
]
3. รันคำสั่ง Migration
python manage.py migrate
คำสั่งนี้จะสร้างตารางในฐานข้อมูลที่จำเป็นสำหรับการจัดเก็บข้อมูลที่เกี่ยวข้องกับ Summernote
4. เพิ่ม URL Pattern
แก้ไขไฟล์ urls.py ของโครงการ Django เพิ่ม URL pattern สำหรับ Summernote:
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('summernote/', include('django_summernote.urls')),5. สร้าง Model
สร้าง Model ในแอปพลิเคชันของคุณ โดยเพิ่มฟิลด์ SummernoteTextField เพื่อเก็บเนื้อหาที่แก้ไขด้วย Summernote:
from django.db import models
from django_summernote.fields import SummernoteTextField
class MyModel(models.Model):
content = SummernoteTextField()
6. สร้าง Form
สร้าง Form เพื่อแสดงฟิลด์ Summernote ในแบบฟอร์ม:
from django import forms
from django_summernote.widgets import SummernoteWidget
class MyForm(forms.ModelForm):
class Meta:
model = MyModel
fields = '__all__'
widgets = {
'content': SummernoteWidget(),
}
7. แสดงใน Template
ใน template ให้เรียกใช้ฟอร์มที่สร้างขึ้น:
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Submit</button>
</form>
การปรับแต่ง
- กำหนดค่า: คุณสามารถกำหนดค่าต่างๆ ของ Summernote ได้โดยดูในเอกสารประกอบอย่างละเอียด
- เพิ่มฟังก์ชัน: Summernote รองรับการเพิ่มฟังก์ชันเสริมต่างๆ เช่น การอัปโหลดรูปภาพ, การฝังวิดีโอ เป็นต้น
ตัวอย่างการใช้งานขั้นสูง
- การอัปโหลดรูปภาพ: กำหนดค่า
attachment_file_pathในsettings.pyเพื่อระบุพาธที่จะเก็บไฟล์ที่อัปโหลด - การปรับแต่ง Toolbar: กำหนดค่า
summernoteในsettings.pyเพื่อกำหนดปุ่มที่ต้องการแสดงใน Toolbar - การแปลภาษา: Summernote รองรับการแปลภาษาหลายภาษา
ข้อดีของ django-summernote
- ใช้งานง่าย: มีอินเทอร์เฟซที่ใช้งานง่าย ผู้ใช้ทั่วไปสามารถใช้งานได้
- ปรับแต่งได้สูง: สามารถปรับแต่งฟังก์ชันและรูปแบบได้ตามต้องการ
- รองรับการอัปโหลดไฟล์: สามารถอัปโหลดรูปภาพและไฟล์อื่นๆ ได้
- มีเอกสารประกอบที่ครบถ้วน: ช่วยให้การใช้งานง่ายขึ้น
ข้อควรระวัง
- ความเข้ากันได้: ตรวจสอบให้แน่ใจว่าเวอร์ชันของ Django และ django-summernote เข้ากันได้
- การกำหนดค่า: การกำหนดค่าอาจแตกต่างกันไปขึ้นอยู่กับเวอร์ชันและความต้องการของคุณ
สำหรับข้อมูลเพิ่มเติมและตัวอย่างที่หลากหลาย สามารถศึกษาได้จากเอกสารประกอบอย่างเป็นทางการของ django-summernote: [ลิงก์ไปยังเอกสารประกอบ django-summernote]
