- 전체
- Python 일반
- Python 수학
- Python 그래픽
- Python 자료구조
- Python 인공지능
- Python 인터넷
- Python SAGE
- wxPython
- TkInter
- iPython
- wxPython
- pyQT
- Jython
- django
- flask
- blender python scripting
- python for minecraft
- Python 데이터 분석
- Python RPA
- cython
- PyCharm
- pySide
- kivy (python)
flask Flask 에서 CKEditor 파일첨부 연동
2020.11.26 16:13
Flask 에서 CKEditor 파일첨부 연동
간단하게 적용할 수 있는 wysiwyg 에디터인 CKEditor 를 설치하였다.
기본 파일 첨부 플러그인은 URL 을 입력하는 방식으로 서버와 연동되있지 않다. 그러므로 추가적인 업로드 기능 구현을 통해 손쉽게 업로드 할 수 잇다.
기본적인 설치 및 다운로드는 아래의 링크에서 가능하다.
우선 업로드 되는 파일을 처리하기 위한 서비스가 필요하다. 이 포스트에서는 CKEditor의 업로드 플러그인을 구현하는 것으로 서버에 저장하거나 다른 파일 저장 서비스에 올리는 것은 생략하였다.
파일 업로드가 가능한 서비스로는 AWS S3 를 추천한다. S3 에 파일을 업로드 하는 것은 아래 포스트를 참조하면 된다.
http://mapository.tistory.com/entry/Python-boto%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-Amazone-S3-%EC%97%90-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C-%ED%95%98%EA%B8%B0
서버 /attach 에 라우팅된 API, POST 방식으로 이루어진다.
def post(self, post_id):
# 첨부파일 처리
files = request.files['upload']
# 첨부파일을 서버/저장소에 올린후 경로를 리턴
# path = 파일 저장경로
CKEditorFuncNum = request.args.get('CKEditorFuncNum');
script = """<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction(%s, '%s', '%s');</script>""" \
% (CKEditorFuncNum, path, 'Done')
response = make_response(script)
response.headers['content-type'] = 'text/html'
return response
결과값으로 script를 구성하는 HTML을 리턴하게 되는데 파일 업로드 후, "<script ~~ " 이런식의 결과 값이 나오게 되는 경우 리턴 문자열의 따옴표를 주의해야 한다. 리턴하는 파라미터는 총 3개인데
1. CKEditorFuncNum : CKEditor의 포스트 내부에서 사용하는 값으로 인자 그대로 넘겨주면 된다.
2. path : 업로드된 파일의 URL
3. msg : 완료시에 표시될 메세지, 완료되면 alert 창으로 해당 메세지를 출력한다.
(CKEditorFuncNum, path, msg)
다음은 클라이언트 구현부분인데, 초기설정과 별다를 바 없이 filebrowserUploadUrl 의 값에 업로드 할 서비스 url 을 적어주면 된다. 여기서는 '/attach' 로 예를 들었다.
클라이언트 html
<textarea name="editor1" id="editor1" rows="10" cols="80"> // 초기에 에디터 창에 입력될 값 </textarea> <script> CKEDITOR.replace( 'editor1', { // 업로드할 서버의 주소를 적어주면 된다. filebrowserUploadUrl: '업로드할 주소' }); </script>
[출처] https://mapository.tistory.com/m/entry/Flask-에서-CKEditor-파일첨부-연동
본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
댓글 0
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 2 | (Python) Jupyter Notebook 내에서만 환경 변수 설정 방법 | 졸리운_곰 | 2023.07.06 | 646 |
| 1 |
주피터 노트북(Jupyter Notebook) 시작 폴더 변경
| 졸리운_곰 | 2020.05.09 | 2512 |

