html summernote 사용하여 값 조회 / 입력 / 파일 처리

html

<textarea id="textarea_summernote" name="textarea_summernote">
  textarea 내용 입력
</textarea>

javascript

html에서 생성한 textarea_summernote textarea를 summernote()를 사용하여 초기화 진행

이미지 파일 처리를 위해 onImageUpload 함수 등록

uploadSummernoteImageFile 함수에서 첨부한 파일 정보를 ajax를 이용하여 flask로 전달하여 저장소에 저장

setSummernoteValue 함수는 Summernote에 값을 추가하는 예시

// summernote 초기화
$(function () {
    // Summernote
    $('#textarea_summernote').summernote({
        callbacks : {
            // 이미지 첨부하는 부분
            onImageUpload : function(files){
                uploadSummernoteImageFile(files[0],this);
            },
            onPaste : function(e) {
                var clipboardData = e.originalEvent.clipboardData;

                if(clipboardData && clipboardData.items && clipboardData.items.length){
                    var item = clipboardData.items[0];
                    if(item.kind === 'file' && item.type.indexOf('image/') !== -1){
                        e.preventDefault();
                    }
                }
            }
        }
    });  
});


// summernote - 이미지 파일 업로드
function uploadSummernoteImageFile(file, editor){

    // 프로젝트 코드
    var project_code = 'test'
    
    var data = new FormData();
    data.append('file',file);
    data.append('project_code', project_code);

    //file 정보를 python으로 전달
    $.ajax({
        data: data,
        type : "POST",
        url : "/test/uploadSummernoteImageFile",
        contentType : false,
        processData : false,
        success : function(data){
            alert('File Upload Success')
            $(editor).summernote('insertImage', data.filepath);
        }
    });
}


function setSummernoteValue(value) {

    // value가 문자열인 경우
    $('#textarea_summernote').summernote('insertText', value);
    
    // value가 html 태크 형태인 경우
    $('#textarea_summernote').summernote('pasteHTML', value);
}

python

프로젝트 코드(또는 메뉴등의 그룹)별 파일을 저장하기 위해 폴더에 서비스 코드 추가

파일명이 겹치지 않도록 파일명 앞에 현시간을 추가

@project_blueprint.route('test/uploadSummernoteImageFile', methods =['POST'])
@login_required
def project_test_uploadSummernoteImageFile():

    try :
        file = request.files['file']
        project_code = request.form['project_code']
        default_path = 'test/img/'

        host_path = default_path + project_code + '/'
        if not os.path.exists(host_path):
            os.mkdir(host_path)

        now_date = datetime.datetime.now()
        prefix_date = now_date.strftime('%Y%m%d_%H%M%S_')

        img_name = host_path + prefix_date + file.filename
        file.save(img_name)

        return jsonify(filepath = img_name[3:])

    except (RuntimeError, TypeError, NameError, SQLAlchemyError) as e:
        print("#### img upload Failed !! " + str(e))

        return jsonify(message=str(e))

참고

https://summernote.org/deep-dive/#pastehtml