Для изменения пути сохранения изображений в CkEditor в Django, вам потребуется выполнить несколько шагов:
Шаг 1: Установка CkEditor
Вам необходимо установить пакет CkEditor для Django. Вы можете сделать это с помощью pip:
pip install django-ckeditor
Затем добавьте его в INSTALLED_APPS
в файле настроек Django:
INSTALLED_APPS = [ ... 'ckeditor', ... ]
Шаг 2: Создание модели, связанной с изображением
Для сохранения изображений в определенной папке вам необходимо создать модель и настроить соответствующее поле. Например, создайте модель Image
:
from django.db import models class Image(models.Model): image = models.ImageField(upload_to='images/')
В этом примере изображения будут сохраняться в папке media/images/
. Вы можете настроить путь сохранения по вашему усмотрению.
Шаг 3: Настройка CkEditor
Теперь вам нужно настроить CkEditor для использования модели Image
. Создайте файл ckeditor_config.js
в папке static/js/
, если его нет, и добавьте следующий код:
CKEDITOR.editorConfig = function(config) { ... config.filebrowserUploadUrl = '/ckeditor/upload_image/' ... };
Затем добавьте путь для загрузки изображения в файле urls.py
вашего проекта:
from django.urls import path from ckeditor_uploader import views urlpatterns = [ ... path('ckeditor/upload_image/', views.upload_image, name='ckeditor_upload_image'), ... ]
Создайте файл views.py
в приложении, в котором находится модель Image
, и добавьте следующий код:
from django.http import JsonResponse def upload_image(request): if request.method == 'POST': image = request.FILES.get('upload') instance = Image(image=image) instance.save() return JsonResponse({'url': instance.image.url})
Этот код реализует загрузку изображения и возвращает его URL в формате JSON.
Шаг 4: Подключение CkEditor к полю модели
Теперь подключите CkEditor к полю image
вашей модели. Добавьте в файл формы, связанный с моделью Image
, следующий код:
from django import forms from ckeditor_uploader.widgets import CKEditorUploadingWidget from .models import Image class ImageForm(forms.ModelForm): image = forms.ImageField(widget=CKEditorUploadingWidget()) class Meta: model = Image fields = '__all__'
Это создаст поле загрузки изображений CkEditor для вашей модели.
Шаг 5: Использование CkEditor в представлении
Теперь вы можете использовать CkEditor в представлении. Вам нужно сделать следующее:
- Создайте экземпляр формы ImageForm
в вашем представлении.
- Отрендерите поле изображения в шаблоне с помощью тега формы Django.
- Включите подключение CkEditor в вашем шаблоне.
Пример представления:
from django.shortcuts import render from .forms import ImageForm def upload_image(request): form = ImageForm(request.POST or None, request.FILES or None) if request.method == 'POST': if form.is_valid(): form.save() return render(request, 'upload_image.html', {'form': form})
Пример шаблона upload_image.html
:
<form method="post" enctype="multipart/form-data"> {% csrf_token %} {{ form.as_p }} <input type="submit" value="Upload"> </form> <script src="{% static 'js/ckeditor/ckeditor.js' %}"></script> <script> CKEDITOR.replace("id_image"); </script>
Важно убедиться, что в static/js/
находится директория ckeditor
, содержащая файлы скриптов CkEditor.
Теперь, при загрузке изображений с помощью CkEditor, они будут сохраняться в папке media/images/
и связываться с моделью Image
. Вам остается только настроить отображение этих изображений в вашем приложении.