Django CKEDITOR

Yeseul Han·2022년 8월 16일

장고 ckeditor에 관심을 갖게 된 계기

텍스트 에디터를 추가하고 싶었고,
그리고 장고에 django-ckeditor이라는게 있다는걸 알았고, 관련 튜토리얼 영상을 보던 중 너무너무너무 쉽게 텍스트 에디터를 붙이는 걸 봤기 때문이다.

텍스트 에디터 튜토리얼 영상ㄱㄱ

좌절

결론부터 말하자면 내가 원하는 대로 쉽게 되지는 않았다.
영상에서는 장고 템플릿 문법을 통해 텍스트 에디터를 붙였지만 실제로 나는 프론트와 백을 분리해서 작업을 했기 때문에 템플릿 문법을 쓸 수 없었다.

그래도!!

그래도 백엔드에(정확히 말하면 admin에) 요런 텍스트 에디터를 붙일 수 있었고, 후에 추가적으로 프론트 텍스트 에디터도 붙여서 연동되게 할 수 있었다.

진행방식

1. ckeditor 설치

터미널 창에 아래 명령어 실행

pip install django-ckeditor

2. setting.py installed_apps에 앱 등록 설치

INSTALLED_APPS = [
    'channels',
    'tournament',
    'search_app',
    'user',
    'article',
    'dm',
    'walk',
    'ckeditor', #<-요거
    'ckeditor_uploader',  #<-요거
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',
    'rest_framework',
    'rest_framework_simplejwt',
 ]

3. setting.py 이미지 올릴 path 설정

이미지 파일등 업로드도 할 것이기 때문에 uploader 패스를 설정해준다.

CKEDITOR_UPLOAD_PATH = 'uploads/'
CKEDITOR_IMAGE_BACKEND = 'pillow'

4. URL 설정

프로젝트 파일의 url에 ckeditor를 추가해주었다.

urlpatterns = [

    path('ckeditor/', include('ckeditor_uploader.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

5. models.py모델의 필드를 RichTextUploadingField로!

기존의 text 필드를 ckeditor_uploader에서 임포트한 RichTextUploadingField로 바꿨다. text필드에 태그가 들어가고 uploading 이미지도 자동으로 처리된다.

from ckeditor_uploader.fields import RichTextUploadingField


class WalkingMate(BaseModel):
    contents= RichTextUploadingField('내용', blank=True, null=True)

6. 일반 사용자 이미지 업로드 처리!

사실 장고ckeditor는 staff 권한이 있는 사람만 파일 업로드가 가능하게 되어 있다.
일반 유저가 이미지를 업로드 할 수 있게 하려면 venv 파일 안으로 들어가서 가상환경에 설치되어 있는 urls.py 파일을 수정해 줘야 한다.

아래는 venv/Lib/site-pakages/ckeditor_uploader/urls.py다..ㅇㅅ;ㅇ

from django.contrib.admin.views.decorators import staff_member_required
from django.urls import re_path
from django.views.decorators.cache import never_cache
# from django.conf.urls import url

from . import views


urlpatterns = [

    re_path(r'^upload/', views.upload, name='ckeditor_upload'),
    re_path(r'^browse/', never_cache(views.browse), name='ckeditor_browse'),
]