نکته‌های جنگویی - ویرایشگر ckeditor

در ادامه‌ی نکته‌های جنگویی در این قسمت به سراغ اضافه کردن یه ویرایشگر به‌جای TextArea میریم.

برای استفاده از ویرایشگر ckeditor اول باید کتابخونه‌اش رو نصب کنیم:

 pip3 install django-ckeditor

بعد از نصب به INSTALLED_APPS اضافه‌ش میکنم:

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

    # My Django apps
    'stories.apps.StoriesConfig',

    # Thord-Party apps
    'crispy_forms',
    'ckeditor',
]

در پایین صفحه‌ی تنظیمات، تنظیمات مربوط به ckeditor اضافه میکنم:

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')


# CKEDITOR
CKEDITOR_UPLOAD_PATH = "uploads/"
CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'full',
    },
}

چون ممکنه حین نوشتن متن، تصاویری رو هم به متن اضافه کنیم نیازه که تنظیمات مربوط به media رو هم اضافه کنیم. به A/urls.py میرم و url مربوط به ckeditor رو اضافه می‌کنم:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),

    # Third-Party urls
    path('ckeditor/', include('ckeditor_uploader.urls')),

    # My apps urls
    path('', include('stories.urls')),
]

حالا به stories/models.py میرم و فیلد RichTextUploadingField رو به مدلم اضافه میکنم و به‌جای TextField قرارش میدم:

from django.db import models
from django.contrib.auth.models import User
from ckeditor_uploader.fields import RichTextUploadingField

class Story(models.Model):
	user = models.ForeignKey(User, on_delete=models.CASCADE, related_name='user_stories')
	title = models.CharField(max_length=100)
	slug = models.SlugField(max_length=100, unique=True)
	body = RichTextUploadingField()
	created = models.DateTimeField(auto_now_add=True)
	updated = models.DateTimeField(auto_now=True)
	status = models.BooleanField(default=True)


	class Meta:
		verbose_name_plural = 'stories'
		ordering = ('-created', )
		
	def __str__(self):
		return self.title

حالا انتظار میره که با اجرا کردن پروژه، در پنل اضافه کردن داستان، فرمی مشابه تصویر این پست داشته باشید.

از این ویرایشگر در فایل add.html هم می‌تونید استفاده کنید که اگر مطلب قبل رو خونده باشید، با یک کم دستکاری و آزمون خطا می‌تونید ازش استفاده کنید، این نکته‌ای بود که خودم حین دستکاری یادش گرفتم =)

 

پ.ن. ۱: پایه‌ی مطالب.

پ.ن. ۲: لینک django ckeditor که می‌تونید برید و کامل در موردش بخونید.

و به پایان این مطلب رسیدیم./