WYSIWYG의 소개 및 적용
=> 개념 : 게시판 개념 중 하나, 글을 쓸때 풍부하게 하는 기능
=> 오픈소스 사용
링크 : https://github.com/yabwe/medium-editor
위와 같은 식으로 작동하는 것이 WYSIWYG 이다.
우리가 만드는 프로그램에 적용하기
=> articleapp의 forms.py에 적용할 것이다.
(위와 같은 오픈소스 페이지에서 어느 클래스를 가져와서 사용해야 위젯이 적용되는지를 알려준다. 그것을 토대로 아래와 같이 장고 forms.py에 적용한다.)
(또한 위와 같이 링크를 html 파일에 넣어주고 두번째 사진과 같이 미디엄 에디터를 선언하기위한 스크립트 코드도 모두 아래와 같이 articleapp의 create.html에 삽입하여 준다.)
서버 실행
위와 같이 글씨를 드래그 하면 설정관련한 창이 나온다.
하지만
위와 같이 엔터를 누르고 다시 입력 시 content 창이 늘어나지 않고 아래로 글씨만 나오는 모습. 이것을 해결하자
forms.py 수정
(블러된 부분을 추가하였다.
설명 : 추가적으로 스타일을 정해주는 것인데, 위의 content 필드가 만들어 질때 attrs 즉 atrributes에서의 class 와 style을 미리 설정해주는 것이라고 볼 수 있다. 높이가 자동으로 되도록 수정
bootstrap에 있는 텍스트 좌측 정렬도 이용하여 추가 함.)
(정상적으로 적용되었다.)
직접 쓰고 이미지 추가해보기
(실행은 잘 되나 내용이 위처럼 태그에 감싸져 있는 것을 볼 수 있다.
이유 : 그대로 content를 detail 페이지에 뿌려줘서 그렇다.
그래서 아래와 같이 detail.html을 수정하였다.)
(safe 필터를 추가하였다. 일반적인 내용만 나온다. 아래 참고)
- 추가적으로 p태그를 div로 바꾸고 왼쪽 정렬 하였다.
위 상태에서 update를 누르면 아래와 같이 내용이 태그로 감싸져 있다.
위는 update 시에 나오므로 updateview에 대해서 수정을 해줘야한다.
그리고 위 Project 메뉴에서 꼭 Project를 고르지 않아도 되도록 수정
수정하기
(앞서 create.html 에서와 동일하게 링크과 스크립트 코드를 위와 같이 삽입한다.updateview 에서도 WYSIWYG 적용)
- forms.py에 코드 추가
(설명 : project 필드를 설정한다.
project 선택은 foreign key를 고를 내용인데, 그것을 사용하는 필드가 ModelChoiceField 이다. 이 안에 필수적으로 넣어줘야 하는게 있는데 그것이
queryset이며 이는 무엇을 보여줄지 이며 지금 이 경우에는 project 관련 오브젝트를 모두 보여줘야 하므로 Project.object.all()을 사용하였고,
또한 이 프로젝트를 고르지 않아도 되게 하려고
required 를 False 값으로 설정 하였다.)
- 실행결과
(프로젝트를 따로 선택하지 않아도 정상적으로 제출되는 것을 확인 할 수 있다.)
