Flask 에서 CKEditor 파일첨부 연동

간단하게 적용할 수 있는 wysiwyg 에디터인 CKEditor 를 설치하였다.
기본 파일 첨부 플러그인은 URL 을 입력하는 방식으로 서버와 연동되있지 않다. 그러므로 추가적인 업로드 기능 구현을 통해 손쉽게 업로드 할 수 잇다.
 
기본적인 설치 및 다운로드는 아래의 링크에서 가능하다.
 
우선 업로드 되는 파일을 처리하기 위한 서비스가 필요하다. 이 포스트에서는 CKEditor의 업로드 플러그인을 구현하는 것으로 서버에 저장하거나 다른 파일 저장 서비스에 올리는 것은 생략하였다.
파일 업로드가 가능한 서비스로는 AWS S3 를 추천한다. S3 에 파일을 업로드 하는 것은 아래 포스트를 참조하면 된다.
 

서버 /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

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

<textarea name="editor1" id="editor1" rows="10" cols="80">
// 초기에 에디터 창에 입력될 값
</textarea>

<script>

CKEDITOR.replace( 'editor1', {
    // 업로드할 서버의 주소를 적어주면 된다.
    filebrowserUploadUrl: '업로드할 주소'
 });
                    
</script>

[출처] https://mapository.tistory.com/m/entry/Flask-에서-CKEditor-파일첨부-연동

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
57 [python 인공지능] Deploy ML models with FastAPI, Docker, and Heroku | Tutorial 졸리운_곰 2025.07.08 467
56 [python 인공지능] [VSCode] VSCode에서 ipynb 파일을 HTML(PDF 등..)로 졸리운_곰 2025.05.27 289
55 [Python 인공지능] [파이썬을 이용한 한글 NLP] 03. 간단한 키워드 추출기 졸리운_곰 2025.01.29 458
54 [Python 인공지능] [ 한글 키워드 시각화 ] 파이썬 python 텍스트 마이닝 한글 ( 워드 클라우드 WordCloud, squrify 트리맵으로 빅데이터 마스터) file 졸리운_곰 2025.01.29 398
53 [Python 인공지능] 기계 학습의 A to Z : IPython notebook과 scikit-learn을 활용한 기계 학습 file 졸리운_곰 2024.08.10 523
52 [python] 인공지능 python : 한글 문서 자동 요약 - lexrank 졸리운_곰 2023.07.06 404
51 [python] 인공지능 katiehouse / django-scikit-learn-tutorial file 졸리운_곰 2023.06.03 664
50 [python] [Anaconda]가상환경 설치,삭제 file 졸리운_곰 2022.12.03 405
49 [python][머신러닝] Scikit-learn Tutorial: Machine Learning in Python file 졸리운_곰 2022.11.29 497
48 [python] 파이썬(sklearn) 사이킷런(sklearn) 기초 졸리운_곰 2022.08.20 321
47 [python] scikit-learn이란 file 졸리운_곰 2022.08.20 455
46 [anaconde3][python] Create environment for tensorflow 1.4 in Anaconda 3 졸리운_곰 2022.07.02 563
45 [python][인공지능] [TensorFlow] Anaconda 가상환경 이용하여 TensorFlow GPU 설치 졸리운_곰 2022.01.20 438
44 [Python 인공지능] TextRank 를 이용한 키워드 추출과 핵심 문장 추출 (구현과 실험) file 졸리운_곰 2021.11.22 597
43 [python][인공지능] FLASK를 이용하여 PYTHON에서 PYTORCH를 REST API로 배포하기 졸리운_곰 2021.03.20 364
42 [python 파이썬] Creating REST API for TensorFlow models file 졸리운_곰 2021.02.01 488
41 [python 파이썬 인공지능] Keras 모델을 REST API로 배포해보기 file 졸리운_곰 2021.02.01 411
40 [파이썬 머신러닝] Scikit-learn 기초 졸리운_곰 2020.01.31 579
39 파이썬으로 간단한 뉴럴 네트워크 만들기 How to Create a Simple Neural Network in Python file 졸리운_곰 2020.01.29 22636
38 Keras를 활용한 주식 가격 예측 file 졸리운_곰 2019.02.25 983
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED