Django 텍스트에디터(ckeditor) #14

참고

https://opentutorials.org/module/4034/24908

글을 보여주거나 쓰는곳이 보기 불편합니다. 다른 블로그처럼 게시판에 다양한 형식으로 글을 작성할 수 있도록 텍스트편집기 기능을 넣어봅시다. 이후 이미지 파일 업로드도 해봅시다. 

ckeditor을 사용하여 간단하게 만들어 볼수 있습니다.

순서

cheditor 설치 및 등록->blog/models.py수정->mysite/settings.py 수정->templates수정

terminal창에서 

pip install django-ckeditor

mystie/settings.py에 등록

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    #블로그
    'blog',
    #커스텀유저
    'users',
    #소셜로그인 관련앱
    'django.contrib.sites',#사이트,url정보 관리 해주는 기능
    'allauth',#설치한앱
    'allauth.account',#소셜로그인한 계정관리
    'allauth.socialaccount',#소셜account 정보관리
    'allauth.socialaccount.providers.naver',#네이버 소셜로그인
    'allauth.socialaccount.providers.google',#구글 소셜로그인
    #텍스트에디터
    'ckeditor',
 
]

INSTALLED_APPS의 마지막줄에 'ckeditor' 를 추가해 주면됩니다.

blog/models.py 수정

from ckeditor.fields import RichTextField
 
 
text = RichTextField()

richtextfield를 import 시켜준뒤 text 필드를 바꾸어줍니다.

데이터베이스 적용

terminal창에 입력

python manage.py makemigrations
python manage.py migrate

마지막으로 html을 수정해줍니다.

blog/templates/blog/post_edit.html 수정

{% extends 'blog/base.html' %}
 
{% block content %}
    <h1>New post</h1>
    {{form.media}}
    <form method="POST" class="post-form">
        {% csrf_token %}
        {{ form.as_p}}
        <p></p>
        <button type="submit">발행</button>
    </form>
{% endblock %}

{{form.media}}를 넣어줍니다. ckeditor 관련 css,js를 불러오는걸로 보입니다.

보여주는 화면도 수정이 필요하다.

blog/templates/blog/post_detail.html수정

{% extends 'blog/base.html' %}
 
{% block content %}
    <div class="main">
        <a href ="{% url 'post:post_edit' pk=post.pk %}"><i class="fas fa-edit"></i></a>
            <div class="date">
                작성일 : {{ post.published_date }}
            </div>
        <a class="btn btn-default" href="{% url 'post:post_edit' pk=post.pk %}"><span class="glyphicon glyphicon-pencil"></span></a>
        <h1>{{ post.title }}</h1>
        {{ post.text|safe}}
        <p>작성자 : {{ post.author }}</p>
        <a href="{% url 'post:post_list'%}">-목록보기-</a>
    </div>
 
{% endblock %}

{{post.text}}에 | safe를 추가시켜 html코드로 인식될수 있도록 해준다.

이미지 업로드 하는 방법도 알아봅시다.

순서

settings.py 수정->urls.py 수정->models.py 수정->ckeditor_uploader/urls수정

mysite/settings.py 수정

# Application definition
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    #블로그
    'blog',
    #커스텀유저
    'users',
    #소셜로그인 관련앱
    'django.contrib.sites',#사이트,url정보 관리 해주는 기능
    'allauth',#설치한앱
    'allauth.account',#소셜로그인한 계정관리
    'allauth.socialaccount',#소셜account 정보관리
    'allauth.socialaccount.providers.naver',#네이버 소셜로그인
    'allauth.socialaccount.providers.google',#구글 소셜로그인
    #텍스트에디터
    'ckeditor',
    'ckeditor_uploader',
 
]
 
#Ckeditor 업로드 폴더 설정
CKEDITOR_UPLOAD_PATH='uploads/'
MEDIA_URL='media/'
MEDIA_ROOT='media/'

해당 부분만 추가해 줍니다.

'ckeditor_uploader',
 
#Ckeditor 업로드 폴더 설정
CKEDITOR_UPLOAD_PATH='uploads/'
MEDIA_URL='media/'
MEDIA_ROOT='media/'

업로드 경로와 업로드에 필요한 기능들을 추가해 줍니다.

업로드 urls도 추가해 봅시다.

mystie/urls.py 수정

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
 
 
urlpatterns = [
    path('admin/', admin.site.urls),
    path('accounts/',include('allauth.urls')),
    path('users/',include('users.urls')),
    path('', include('blog.urls')),
    path('ckeditor/',include('ckeditor_uploader.urls')),
  ]
 
urlpatterns+=static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

'ckeditor_uploader'가 url을 참조할 수 있도록 설정하는 부분

path('ckeditor/',include('ckeditor_uploader.urls')),

 MEDIA 경로를 참조

urlpatterns+=static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

blog/models.py 수정

text필드를 RichTextField에서 RichTextUploadingField 로 바꾸어 줍니다.

from ckeditor_uploader.fields import RichTextUploadingField
 
 
text = RichTextUploadingField()

import해준뒤 text부분을 수정해 줍니다.

데이터베이스 적용

terminal창에 입력

python manage.py makemigrations
python manage.py migrate

 

올리는 것은 이걸로 마무리 되지만 admin페이지에서는 사진이 잘 업로드 되나

일반사용자로 올릴려면 문제가 이미지를 불러오지 못한다.

이는 ckeditor에서는 파일 업로드에 대해 기본적으로 staff이상의 권한이 있는 경우에만 허용되기 때문이다. 이를 풀어주어야 일반 사용자도 이미지를 업로드 할 수 있다.

가상환경에 설치된 ckeditor_uploader에 urls파일을 수정해 주어야 합니다.

venv/Lib/site-packages/ckeditor_uploader/urls.py 수정

from __future__ import absolute_import
 
from django.conf.urls import url
from django.contrib.admin.views.decorators import staff_member_required
from django.views.decorators.cache import never_cache
 
from . import views
 
# urlpatterns = [
#     url(r"^upload/", staff_member_required(views.upload), name="ckeditor_upload"),
#     url(
#         r"^browse/",
#         never_cache(staff_member_required(views.browse)),
#         name="ckeditor_browse",
#     ),
# ]
urlpatterns = [
        url(r'^upload/', views.upload, name='ckeditor_upload'),
        url(r'^browse/', never_cache(views.browse), name='ckeditor_browse'),
    ]
 

위와 같이 윗부분을 주석처리하고 아래 staff_member_required부분을 제거한 코드를 작성하여줍니다.

이렇게 처리해 주면 일반사용자도 이미지를 올릴 수 있습니다.

이미지는 media/uploads/년/월/일/파일이름으로 저장되시는 것을 볼수 있습니다.

다음에는 권한에 따른 게시글 수정 삭제와 댓글기능을 구현해볼 예정입니다.

중간중간 디자인도 바뀔 예정입니다.