راهنمای کامل Django CKEditor : از نصب تا کانفیگ

فهرست مطالب

بخش 1: تنظیم مرحله برای Django CKEditor

1.1: Django CKEditor چیست؟

1.2: چه زمانی از Django CKEditor استفاده کنیم؟

بخش 2: ادغام CKEditor با پروژه جنگو شما

2.1: نصب Django CKEditor

2.2: پیکربندی CKEditor در جنگو

بخش 3: ویژگی های پیشرفته Django CKEditor

3.1: سفارشی کردن رابط CKEditor

3.2: آپلود و مدیریت فایل با CKEditor

3.3: پلاگین های CKEditor

بخش 4: پیاده سازی دنیای واقعی CKEditor جنگو

4.1: پیاده سازی یک ویرایشگر پست وبلاگ

4.2: ایجاد یک بخش نظرات متن غنی

بخش 5: عیب یابی Common Django CKEditor

5.1: رسیدگی به مسائل مربوط به فایل های استاتیک

5.2: پیکربندی آپلود تصویر

بخش 6: به حداکثر رساندن تجربه Django CKEditor شما

6.1: سفارشی سازی پیشرفته

بخش 1: تنظیم مرحله برای Django CKEditor

در عصر معاصر، جایی که داده ها نقش اصلی را در جنبه های مختلف زندگی ما ایفا می کنند، داشتن ظرفیت مدیریت موثر ورودی متنی به عنوان یک نیاز حیاتی در حوزه توسعه وب ظاهر می شود.

هنگام استفاده از جنگو، یک چارچوب وب بسیار تأثیرگذار پایتون، وجود یک ویرایشگر متن غنی انعطاف‌پذیر و سازگار می‌تواند هزینه‌های زمان را به میزان قابل‌توجهی کاهش دهد و تعامل یکپارچه را به کاربران ارائه دهد. چارچوب Django CKEditor نقش مهمی در این زمینه ایفا می کند.

1.1: Django CKEditor چیست؟

Django CKEditor یک ویرایشگر متن غنی قوی و رایگان است که به طور یکپارچه با چارچوب جنگو ادغام می شود.

برنامه جنگو CKEditor، یک ویرایشگر متنی WYSIWYG مبتنی بر مرورگر که به طور گسترده مورد استفاده قرار می گیرد، در پروژه های جنگو ادغام می کند و عملکرد آنها را افزایش می دهد.

می توان در مورد ویژگی های متمایزی که Django CKEditor را قابل توجه می کند پرس و جو کرد. علاوه بر قابلیت‌های اساسی ویرایش متن، CKEditor طیف گسترده‌ای از ویژگی‌های پیشرفته از جمله گزینه‌های قالب‌بندی متن مانند پررنگ، مورب و زیرخط، قابلیت تنظیم رنگ متن، تعبیه لینک‌ها، آپلود تصاویر و فایل‌ها، گنجاندن قطعه کد را ارائه می‌دهد. ، ایجاد جداول و چندین قابلیت دیگر.

رابط مرورگر وب طیف وسیعی از ویژگی‌های موجود در مایکروسافت ورد را ارائه می‌دهد، البته برای مطابقت با ترجیحات فردی و سبک نوشتن سفارشی شده است.

با این حال، مزایای Django CKEditor فراتر از مجموعه ویژگی های از پیش تعریف شده آن است. علاوه بر این، نحوه تعامل CKEditor با جنگو نیز یک جنبه مرتبط است که باید در نظر گرفته شود. CKEditor، به عنوان یک مؤلفه ادغام شده در چارچوب جنگو، روشی را ارائه می دهد که با قراردادها و اصول جنگو برای مدیریت محتوای غنی متن هماهنگ است.

به عنوان یک توسعه دهنده جنگو، شخص در محدوده ای از آشنایی قبلی با مفاهیم مختلف عمل می کند. فیلدهای CKEditor به شیوه‌ای مشابه سایر فیلدهای مدل جنگو تعریف می‌شوند و در نتیجه به طور یکپارچه آن را در فرم و اکوسیستم مدل جنگو ادغام می‌کنند.

1.2: چه زمانی از Django CKEditor استفاده کنیم؟

بنابراین، چه زمانی می خواهید از Django CKEditor در پروژه جنگو خود استفاده کنید؟ پاسخ این است، هر زمان که بخواهید به کاربران خود توانایی وارد کردن داده های متن غنی را بدهید. بیایید چند نمونه را مرور کنیم:

پلتفرم های وبلاگ نویسی:

CKEditor یک انتخاب ایده آل برای نوشتن مقالات وبلاگ است. این پلتفرم طیف متنوعی از ویژگی‌های ویرایش متن را به نویسندگان ارائه می‌دهد که می‌توان از آنها برای نوشتن و قالب‌بندی مقالاتشان استفاده کرد. استفاده از CKEditor گنجاندن یکپارچه سرفصل‌ها، فهرست‌ها، پیوندها و حتی جاسازی ویدیوها را تسهیل می‌کند.

سیستم های مدیریت محتوا (CMS):

 برای مدیریت موثر محتوا، هر سیستم مدیریت محتوا (CMS) نیاز به استفاده از ویرایشگر متن دارد. جنگو CKEditor چه برای ویرایش محتوای صفحه وب باشد و چه برای تهیه پیش نویس الگوهای ایمیل، فرآیندی یکپارچه و بی دردسر را تسهیل می کند.

انجمن‌ها و سیستم‌های اظهار نظر:

CKEditor می‌تواند مزایای قابل توجهی را برای وب‌سایت‌هایی فراهم کند که پلتفرم‌های محتوای تولید شده توسط کاربر، مانند انجمن‌ها یا سیستم‌های نظردهی را در خود جای داده‌اند.

گنجاندن نظرات متن غنی در رابط کاربری تجربه کلی کاربر را افزایش می دهد. این ویژگی به کاربران امکان می‌دهد تا با اعمال گزینه‌های قالب‌بندی مانند پررنگ کردن، بر نکات مهم تأکید کنند.

علاوه بر این، افراد این فرصت را دارند که قابلیت اطمینان اظهارات خود را با ترکیب لینک هایی که به منابع مربوطه هدایت می شوند، تقویت کنند. علاوه بر این، عملکرد سیستم با توانایی آن در ترکیب قطعات کد در قالبی قابل درک بصری بیشتر شده است.

با تکمیل مقدمات اولیه، ما به کاوش در قلمرو Django CKEditor ادامه خواهیم داد. این سفر با نصب و ادغام Django CKEditor در پروژه جنگو شما آغاز می شود و به دنبال آن کاوش در عملکردهای پیشرفته آن می گذرد. آماده شوید تا قابلیت های مدیریت متن جنگو خود را به سرعت بالا تغییر دهید!

بخش 2: ادغام CKEditor با پروژه Django  شما

با دستیابی به درک کامل از عملکردهای ارائه شده توسط Django CKEditor و سناریوهای متنوعی که می توان از آن استفاده کرد، به احتمال زیاد میل شدیدی برای ادغام آن در پروژه جنگو ایجاد کرد. نصب و پیکربندی سیستم ساده است و از طریق یک سری مراحل بدون عارضه قابل انجام است.

2.1: نصب Django CKEditor

برای شروع استفاده از Django CKEditor، ابتدا باید آن را نصب کنیم. این کار را می توان به راحتی از طریق مدیر بسته پایتون یعنی pip انجام داد. ترمینال یا خط فرمان خود را باز کنید و دستور زیر را اجرا کنید:

pip install django-ckeditor

این دستور بسته Django CKEditor را واکشی می کند و آن را در محیط پایتون شما نصب می کند. می توانید نصب را با اجرای زیر تأیید کنید:

pip freeze | grep django-ckeditor

اگر نصب با موفقیت انجام شد، باید django-ckeditor و نسخه آن را در خروجی مشاهده کنید.

اکنون، اجازه دهید Django CKEditor را به پروژه جنگو خود بیاوریم.

2.2: پیکربندی CKEditor در جنگو

برای پیکربندی Django CKEditor، باید چند به روز رسانی در تنظیمات پروژه جنگو خود انجام دهید.

مرحله 1: INSTALLED_APPS را به‌روزرسانی کنید

ابتدا، «ckeditor» را به INSTALLED_APPS خود در فایل تنظیمات پروژه جنگو (settings.py) اضافه کنید. این مرحله به جنگو می گوید که می خواهید از برنامه CKEditor استفاده کنید. در اینجا باید به نظر برسد:

INSTALLED_APPS = [
    # other apps...
    'ckeditor',
]

مرحله 2: CKEDITOR_UPLOAD_PATH را تعریف کنید

برای اینکه CKEditor بارگذاری فایل (مانند تصاویر) را مدیریت کند، باید یک CKEDITOR_UPLOAD_PATH در فایل تنظیمات خود تعریف کنید.

این تنظیم مسیر نسبی را در MEDIA_ROOT شما که در آن CKEditor باید فایل‌ها را آپلود کند، مشخص می‌کند.

CKEDITOR_UPLOAD_PATH = "uploads/"

در این مثال، فایل های آپلود شده در پوشه “uploads” واقع در MEDIA_ROOT شما ذخیره می شوند.

مرحله 3: پیکربندی URL را به روز کنید

در نهایت، باید URL های CKEditor را به پیکربندی URL پروژه خود اضافه کنید. فایل root urls.py خود را به صورت زیر به روز کنید:

from django.urls import path, include

urlpatterns = [
    # other urls...
    path('ckeditor/', include('ckeditor_uploader.urls')),
]

این کد شامل پیکربندی‌های URL CKEditor هر زمان که کاربر به آدرس اینترنتی که با «/ckeditor/» شروع می‌شود می‌رود.

با این تغییرات، شما با موفقیت Django CKEditor را در پروژه جنگو خود ادغام کرده اید! اما، برای استفاده کامل از قدرت CKEditor، باید به شخصی سازی عملکرد و ظاهر آن بپردازید، که در بخش بعدی به آن خواهیم پرداخت.

بخش 3: ویژگی های پیشرفته Django CKEditor

Django CKEditor چیزی بیش از یک ویرایشگر متن غنی است – ویژگی‌های پیشرفته و قابلیت شخصی‌سازی آن، آن را به ابزاری قدرتمند تبدیل می‌کند که می‌تواند برنامه جنگو شما را تا حد زیادی بهبود بخشد. بیایید برخی از این قابلیت ها را بررسی کنیم.

3.1: سفارشی کردن رابط CKEditor

CKEditor دارای یک رابط انعطاف پذیر است که می تواند مطابق با نیازهای برنامه شما سفارشی شود. می توانید نوار ابزار را پیکربندی کنید، پوسته ویرایشگر، زبان، عرض، ارتفاع و موارد دیگر را تغییر دهید. این کار از طریق تنظیم CKEDITOR_CONFIGS در فایل settings.py شما انجام می شود.

به عنوان مثال، برای سفارشی کردن نوار ابزار، ممکن است تنظیمات خود را به صورت زیر تعریف کنید:

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'Custom',
        'toolbar_Custom': [
            ['Bold', 'Italic'],
            ['NumberedList', 'BulletedList'],
            ['Link', 'Unlink'],
            ['RemoveFormat', 'Source']
        ]
    }
}

در این مثال، نوار ابزار “Custom” فقط از ویژگی های “Bold”، “Italic”، “NumberedList”، “BulletedList”، “Link”، “Unlink”، “RemoveFormat” و “Source” تشکیل شده است.

به طور مشابه، می‌توانید پوست، زبان، عرض و ارتفاع را در میان ویژگی‌های دیگر، بر اساس نیاز خود تنظیم کنید.

3.2: آپلود و مدیریت فایل با CKEditor

ادغام آپلود و مدیریت فایل، که شامل آپلود تصاویر است، یک جزء اساسی در اکثر رابط های ویرایش متن جامع است. نرم افزار CKEditor یک ویژگی قدرتمند مرور و آپلود فایل را ارائه می دهد که می تواند در تنظیمات جنگو برنامه شما سفارشی شود.

عملکرد اصلی آپلود فایل را می توان با گنجاندن «ckeditor_uploader» در INSTALLED_APPS خود و تعریف یک مسیر URL برای آن، همانطور که در بخش قبل انجام دادیم، فعال کرد. با این حال، ممکن است بخواهید این قابلیت را بیشتر سفارشی کنید.

می‌توانید انواع فایل‌های قابل آپلود را محدود کنید و همچنین نحوه نام‌گذاری و ساختار این فایل‌ها را با استفاده از CKEDITOR_UPLOAD_SLUGIFY_FILENAME و CKEDITOR_FILENAME_GENERATOR تعریف کنید.

3.3: پلاگین های CKEditor

نرم افزار CKEditor به طور هدفمند توسعه یافته است تا ترکیب ویژگی های تکمیلی را با استفاده از افزونه ها تسهیل کند. این افزونه‌ها توانایی افزایش عملکرد ویرایشگر شما را از طریق معرفی ویژگی‌های تکمیلی، مانند ادغام یک دکمه جدید، پانل یا عملکرد گسترده دارند.

به منظور ترکیب یک افزونه، مرحله اولیه مستلزم ادغام فایل های افزونه در پروژه شما و به دنبال آن گنجاندن افزونه در پیکربندی CKEditor شما است. برای گنجاندن افزونه «codesnippet»، CKEDITOR_CONFIGS باید به روش زیر اصلاح شود:

CKEDITOR_CONFIGS = {
    'default': {
        'extraPlugins': ','.join(['codesnippet']),
    }
}

عملکرد پیشنهادی نوار ابزار CKEditor را با ترکیب یک دکمه “codesnippet” بهبود می بخشد. این دکمه به کاربران این امکان را می دهد که به طور یکپارچه قطعات کد را در محتوای خود وارد کنند و در عین حال از برجسته سازی نحو بهره مند شوند.

همانطور که نشان داده شد، Django CKEditor طیف گسترده‌ای از قابلیت‌ها را به نمایش می‌گذارد که امکانات سفارشی‌سازی متعدد و عملکردهای قوی را ارائه می‌دهد. با سرمایه گذاری برای سفارشی کردن پیکربندی، می توان قابلیت های ویرایش محتوای یک برنامه جنگو را به میزان قابل توجهی افزایش داد.

بخش 4: پیاده سازی دنیای واقعی Django CKEditor

به دست آوردن درک جامع از قابلیت های Django CKEditor یک کار اولیه ضروری است. با این حال، در کاربرد عملی این دانش در موقعیت‌های دنیای واقعی است که کارایی و پتانسیل واقعی Django CKEditor آشکار می‌شود. این بخش ادغام CKEditor را در دو سناریو عملی بررسی می کند: ویرایشگر پست وبلاگ و بخش نظرات.

4.1: پیاده سازی یک ویرایشگر پست وبلاگ

بیایید با ایجاد یک ویرایشگر متن غنی برای پست های وبلاگ شروع کنیم.

ابتدا، در models.py خود، یک مدل پست وبلاگ را تعریف کنید:

from django.db import models
from ckeditor.fields import RichTextField

class BlogPost(models.Model):
    title = models.CharField(max_length=200)
    content = RichTextField(blank=True, null=True)

در اینجا، RichTextField یک فیلد ارائه شده توسط CKEditor است که نشان دهنده یک ویرایشگر متن غنی در پنل مدیریت جنگو است.

در مرحله بعد، بیایید مطمئن شویم که مدل BlogPost در فایل admin.py شما ثبت شده است تا در ادمین جنگو ظاهر شود:

from django.contrib import admin
from .models import BlogPost

admin.site.register(BlogPost)

اکنون، هنگامی که به پنل مدیریت جنگو خود می روید و یک پست وبلاگ جدید اضافه می کنید، یک ویرایشگر متن غنی را می بینید که در آن می توانید محتوای خود را ایجاد و قالب بندی کنید.

4.2: ایجاد یک بخش نظرات متن غنی

بخش نظرات متن غنی به کاربران این امکان را می دهد که خود را به طور کامل تر بیان کنند، از جمله مواردی مانند متن پررنگ، افزودن لینک ها یا حتی اضافه کردن تصاویر.

ابتدا بیایید یک مدل نظر ایجاد کنیم:

from django.db import models
from ckeditor.fields import RichTextField

class Comment(models.Model):
    post = models.ForeignKey(BlogPost, on_delete=models.CASCADE, related_name='comments')
    author = models.CharField(max_length=200)
    text = RichTextField(blank=True, null=True)

سپس، می توانید یک فرم جنگو برای نظر ایجاد کنید:

from django import forms
from .models import Comment

class CommentForm(forms.ModelForm):
    class Meta:
        model = Comment
        fields = ('author', 'text',)

اکنون، در دیدگاه های خود، می توانید CommentForm را به قالب منتقل کنید:

from django.shortcuts import render
from .models import BlogPost
from .forms import CommentForm

def blog_post_detail(request, pk):
    post = BlogPost.objects.get(pk=pk)
    form = CommentForm()
    return render(request, 'blog/post_detail.html', {'post': post, 'form': form})

و در نهایت، می توانید فرم را در قالب post_detail.html خود قرار دهید:

<h2>{{ post.title }}</h2>
<p>{{ post.content | safe }}</p>

<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Add comment</button>
</form>

اکنون، شما یک فرم نظر متنی غنی در هر صفحه پست وبلاگ دارید. تطبیق پذیری CKEditor امکان استفاده از آن را در زمینه های مختلف عملی فراهم می کند و تعاملات کاربر را در برنامه های جنگو شما افزایش می دهد.

بخش 5: عیب یابی مشکلات رایج CKEditor جنگو

مشابه سایر ابزارهای توسعه، Django CKEditor مجموعه ای از چالش های خود را ارائه می دهد. با این وجود، این مسائل را می توان به طور موثر از طریق استفاده از تکنیک های عیب یابی آگاهانه حل کرد. این بخش در درجه اول به مشکلات رایجی می‌پردازد که توسعه‌دهندگان ممکن است در هنگام استفاده از Django CKEditor با تأکید خاصی بر فایل‌های ثابت و آپلود تصویر با آن مواجه شوند.

5.1: رسیدگی به مسائل مربوط به فایل های استاتیک

یک مشکل معمولی که ممکن است با آن مواجه شوید مربوط به بارگیری صحیح فایل های استاتیک Django CKEditor است. این مشکل معمولاً به صورت شکستگی رابط ویرایشگر یا ظاهر شدن یک ناحیه متن ساده به جای ویرایشگر متن غنی ظاهر می شود.

در اینجا یک چک لیست ساده عیب یابی وجود دارد:

1.اطمینان حاصل کنید که Django CKEditor به INSTALLED_APPS در فایل تنظیمات شما اضافه شده است:

INSTALLED_APPS = [
    ...
    'ckeditor',
]

2. تنظیمات فایل های ثابت خود را بررسی کنید: مطمئن شوید که STATIC_URL به درستی در فایل تنظیمات شما تعریف شده است.

3. دستور مدیریت collectstatic را اجرا کنید: این دستور فایل‌های استاتیک را از هر یک از برنامه‌های کاربردی شما (و از مکان‌های دیگری که ممکن است مشخص کنید) را در دایرکتوری کپی می‌کند که می‌تواند به عنوان فایل‌های استاتیک ارائه شود.

python manage.py collectstatic

4. پیکربندی سرور خود را بررسی کنید: مطمئن شوید که سرور وب شما به درستی فایل های استاتیک را ارائه می کند. این می تواند بر اساس راه اندازی سرور شما و اینکه آیا در یک محیط توسعه یا تولید هستید متفاوت باشد.

5.2: پیکربندی آپلود تصویر

پیکربندی آپلود تصاویر با Django CKEditor ممکن است در ابتدا دلهره آور به نظر برسد، اما زمانی که فرآیند را درک کنید، کاملاً ساده است. یک مشکل رایج این است که تصاویر به درستی آپلود یا نمایش داده نمی شوند. در اینجا نحوه رسیدگی به آن آمده است:

کتابخانه Pillow را نصب کنید: کتابخانه Pillow یک پیش نیاز برای مدیریت آپلود تصاویر در جنگو است. آن را با استفاده از pip نصب کنید:

pip install pillow

تنظیمات آپلود CKEditor را پیکربندی کنید: موارد زیر را به فایل تنظیمات خود اضافه کنید:

CKEDITOR_UPLOAD_PATH = "uploads/"
CKEDITOR_IMAGE_BACKEND = "pillow"

فیلد مدل خود را بررسی کنید: مطمئن شوید که از RichTextUploadingField به جای RichTextField استفاده می کنید:

from ckeditor_uploader.fields import RichTextUploadingField

class BlogPost(models.Model):
    content = RichTextUploadingField()

به‌روزرسانی پیکربندی URL: فایل urls.py شما باید شامل URLهای آپلودکننده CKEditor باشد:

from django.urls import path, include

urlpatterns = [
    ...
    path('ckeditor/', include('ckeditor_uploader.urls')),
]

با این مراحل، شما باید بتوانید اکثر مشکلات مربوط به فایل های ثابت و آپلود تصاویر را در Django CKEditor حل کنید. به یاد داشته باشید، هر چالشی که با آن مواجه می شوید، فرصتی است برای کسب اطلاعات بیشتر در مورد ابزارهایی که با آنها کار می کنید.

بخش 6: به حداکثر رساندن تجربه Django CKEditor شما

هنگامی که به درک چگونگی ترکیب CKEditor در یک پروژه جنگو مجهز شد، پرسش بعدی مطرح می‌شود: چگونه می‌توان محدودیت‌های آن را گسترش داد؟ چه استراتژی هایی را می توان برای افزایش سفارشی سازی سرویس به منظور پاسخگویی بهتر به نیازهای کاربران به کار گرفت؟ هدف این بخش ارائه دیدگاه‌هایی در مورد پرسش‌های فوق‌الذکر، کاوش بیشتر در گزینه‌های سفارشی‌سازی پیشرفته و هدایت خوانندگان به سمت منابعی است که روند یادگیری مداوم آنها را در Django CKEditor تسهیل می‌کند.

6.1: سفارشی سازی پیشرفته

انعطاف پذیری CKEditor در پیکربندی آن نهفته است. به عنوان مثال، می توانید عملکرد پیش فرض نوار ابزار را تغییر دهید یا ابزارک های سفارشی را پیاده سازی کنید. در اینجا یک مثال است:

سفارشی کردن نوار ابزار CKEditor

می‌توانید با تغییر تنظیمات CKEDITOR_CONFIGS در فایل تنظیمات جنگو، نوار ابزار را مطابق با نیازهای خود تغییر دهید. در اینجا یک مثال ساده از نحوه افزودن، حذف یا تنظیم مجدد ویژگی ها در نوار ابزار آورده شده است:

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'Custom',  # use your custom toolbar
        'toolbar_Custom': [   # define your custom toolbar
            ['Bold', 'Italic', 'Underline'],
            ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote'],
            ['Image', 'Link', 'Unlink', 'Anchor'],
            ['Source']
        ],
        'width': 'auto',
        'height': '400px',
    }
}

این تنها یک خراش در سطح امکانات سفارشی سازی است. برای جزئیات بیشتر می توانید اسناد پیکربندی CKEditor را بررسی کنید.

منبع مطلب