summernote img 태그 이미지 첨부 스프링
https://summernote.org/ 에가면 사용법등 잘설명되어 있어요.
저는 스프링에서 summernote를 사용하는 방법에대해서 정리할거에요.
일단 summernote를 다운로드 받으세요. 사이트에 가면 잘나와 있어요.
<link href="${pageContext.request.contextPath}/resources/editor/summernote.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/resources/editor/summernote.js"></script>
<!-- include summernote-ko-KR -->
<script src="${pageContext.request.contextPath}/resources/editor/lang/summernote-ko-KR.js"></script>
받으셨으면 페이지에 첨부를 해요.
페이지를 시작하는 부분에 $(document).ready(function() {});
아래코드를 첨부해요.
$('#summernote').summernote({
lang: 'ko-KR', // default: 'en-US'
height: 500, // set editor height
minHeight: 500, // set minimum height of editor
maxHeight: 500, // set maximum height of editor
focus: true, // set focus to editable area after initializing summe
callbacks: {
onImageUpload: function(files, editor, welEditable) {
for (var i = files.length - 1; i >= 0; i--) {
sendFile(files[i], this);
}
},
onChange: function(contents, $editable) {
console.log('onChange:', contents, $editable);
new_img_list=$(".note-editable .sn_insert_img");
if(old_img_list!='' &&new_img_list!='')
{
note_image_sync(old_img_list,new_img_list);
}
old_img_list= $(".note-editable .sn_insert_img");
},
onBlur: function() {
console.log('Editable area loses focus');
},
onFocus: function() {
console.log('Editable area is focused');
}
}
});
$("#summernote").summernote({
onMediaDelete : function($target, editor, $editable) {
alert($target.context.dataset.filename);
$target.remove();
}
});
섬머노트 페이지에 가면 설명이 잘되어 있어서 설명은 안하겠어요. 여기서 onImageUpload 부분을 구현해줘야 해요.
sendFile부분을 구현해야해요.
function sendFile(file, el) {
var form_data = new FormData();
form_data.append('file', file);
$.ajax({
data: form_data,
headers : {
'X-CSRF-TOKEN': $("#csrf_token").val()
},
type: "POST",
url: '/admin/chart/image_upload',
cache: false,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
async: false
}).done(function( msg ) {
if(msg.result=='IMAGE_OK')
{
var url = msg.url;
id = msg.id;
$(el).summernote('editor.insertImage', url,fun_summernote_imgcallback);
$('#imageBoard > ul').append('<li><img src="'+url+'" class="summernoteimg_obj" id="'+id+'" width="100%" height="100%"/></li>');
}
else
{
showmessage("알림","이미지 파일이 아닙니다.",2000,'');
}
});
}
저는 이미지 파일을 db에 보관을 해요.
image_upload부분은 이렇게 해요.
@ResponseBody
@RequestMapping(value ="/image_upload", method=RequestMethod.POST, produces = "application/json;charset=UTF-8")
public Map<String, String> update_file_upload(MultipartFile file,HttpServletRequest request)throws Exception{
Map<String, String[]> paramMap=request.getParameterMap();
Iterator keyData = paramMap.keySet().iterator();
CommonData dto = new CommonData();
while (keyData.hasNext()) {
String key = ((String)keyData.next());
String[] value = paramMap.get(key);
dto.put(key, value[0].toString());
smsp.print_String("key : " + key + ", value : " + value[0].toString());
}
MediaUtils MediaUtils = new MediaUtils();
String formatName = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1);
MediaType mType = MediaUtils.getMediaType(formatName);
BufferedImage resizeimg;
if(mType!=null)
{
BufferedImage srcImg = ImageIO.read(file.getInputStream());
/*
if(srcImg.getWidth()>1920) //사이즈 조절 할때
{
smsp.print_String("사이즈 조절 1920");
resizeimg = Scalr.resize(srcImg
, Scalr.Method.QUALITY
, Scalr.Mode.FIT_TO_WIDTH
, 1920
,Scalr.OP_ANTIALIAS);
ByteArrayOutputStream baos_re = new ByteArrayOutputStream();
boolean foundWriter_re = ImageIO.write(resizeimg, formatName.toLowerCase(), baos_re);
baos_re.flush();
byte[] imageInByte_re = baos_re.toByteArray();
dto.put("mt_contentlength",baos_re.toByteArray().length);
dto.put("mt_data", imageInByte_re);
baos_re.close();
}
else //사이즈 조절안할때.
*/
{
smsp.print_String("사이즈 조절안함. 1920");
dto.put("mt_contentlength",file.getBytes().length);
dto.put("mt_data", file.getBytes());
}
BufferedImage destImg =
Scalr.resize(srcImg,
Scalr.Method.BALANCED,
180,180
,Scalr.OP_ANTIALIAS);
ByteArrayOutputStream baos = new ByteArrayOutputStream();
boolean foundWriter = ImageIO.write(destImg, "png", baos);
baos.flush();
byte[] imageInByte = baos.toByteArray();
dto.put("mt_s_data", imageInByte);
baos.close();
}
Map<String, String> result = new HashMap<>();
result.put("result", "NOT_AN_IMAGE");
if(mType!=null)
{
dto.put("mt_filename",file.getOriginalFilename());
dto.put("mt_type",file.getContentType());
HttpSession session = request.getSession();
Member vo = (Member) session.getAttribute("login");
dto.put("mt_input_id", vo.idx);
dto.put("mt_update_id", vo.idx);
first_service.insert(dto, "File_UpDown_Mapper.insert_editor_image_upload");
int idx= first_service.listSearchCount(dto, "File_UpDown_Mapper.select_editor_image_upload");
result.put("result", "IMAGE_OK");
String url = "/editor/get_editor_image/?idx="+idx;
String id = ""+idx;
result.put("url", url);
result.put("id", id);
}
return result;
}
db에 바로 넣고 있어요.
db의 테이블은 이렇게 생겼어요.
CREATE TABLE `editor_image_table` (
`idx` int(11) NOT NULL AUTO_INCREMENT COMMENT '게시물 고유키값',
`mt_uuid` varchar(40) DEFAULT NULL,
`mt_contentlength` int(11) DEFAULT NULL COMMENT '파일사이즈.',
`mt_filename` varchar(100) DEFAULT NULL COMMENT '이름',
`mt_type` varchar(100) DEFAULT NULL COMMENT '파일타입',
`mt_data` longblob DEFAULT NULL COMMENT '파일내용',
`mt_s_data` longblob DEFAULT NULL COMMENT '축소파일내용',
`mt_input_wdate` datetime DEFAULT NULL COMMENT '입력일',
`mt_input_id` bigint(20) DEFAULT NULL COMMENT '입력ID',
`mt_update_wdate` datetime DEFAULT NULL COMMENT '최종수정일',
`mt_update_id` bigint(20) DEFAULT NULL COMMENT '최종수정ID',
PRIMARY KEY (`idx`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8 COMMENT='파일정보';
쿼리부분입니다.
<!-- 이미지파일 업로드 -->
<insert id="insert_editor_image_upload">
INSERT INTO editor_image_table (
mt_filename
, mt_type
, mt_data
<if test="mt_s_data != null">
, mt_s_data
</if>
<if test="uid != null">
, mt_uuid
</if>
, mt_contentlength
, mt_input_wdate
, mt_input_id
, mt_update_wdate
, mt_update_id
)
VALUES (
#{mt_filename}
, #{mt_type}
, #{mt_data}
<if test="mt_s_data != null">
, #{mt_s_data}
</if>
<if test="uid != null">
, #{uid}
</if>
, #{mt_contentlength}
, now()
, #{mt_input_id}
, now()
, #{mt_update_id}
)
</insert>
이상입니다.
