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