html summernote 사용하여 값 조회 / 입력 / 파일 처리
DevOps/Web 2021. 12. 11. 00:49
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))참고
'DevOps > Web' 카테고리의 다른 글
| html bootstrap(부트스트랩) param(매개변수)를 포함한 modal confirm(확인창) 만들기 (0) | 2022.03.22 |
|---|---|
| javascript에서 여러 라인을 하나의 라인으로 처리 (Line continuation) (0) | 2021.12.11 |
| javascript에서 table의 <tr> <td> 값 조회/변경 (0) | 2021.12.11 |
| web page에 반응형 임베드 ( google ppt or 동영상 ) 넣기 (0) | 2021.09.09 |
| textarea에 text와 함께 image를 첨부하여 작성 ( div contentEditable 형태로 구현 ) (0) | 2021.07.30 |
