회사 작업 중 에디터 기능을 추가해달라는 요청이 있어 Summernote를 적용하기로 결정했다.
2. 파일을 CSS/JS를 관리하는 각각의 폴더에 넣어준 후, head안에서 불러온다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/assets/css/summernote-lite.min.css" />
<script type="text/javascript" src="/assets/js/summernote-lite.min.js"></script>
</head>
</html>
3. Summernote를 사용할 적절한 곳에 배치한다.
<body>
<!-- div안에 넣거나 -->
<div id="summernote">Hello Summernote</div>
<!-- form을 활용할 수도 있습니다. -->
<form method="post">
<textarea id="summernote" name="content"></textarea>
</form>
</body>
4. JQuery를 사용해 Summernote를 활성화 시킨다.
<script type="text/javascript">
jQuery(document).ready(function() {
$('#summernote').summernote({
lang : 'ko-KR', // default: 'en-US'
height: 300, // set editor height
minHeight: null, // set minimum height of editor
maxHeight: null, // set maximum height of editor
focus: true, // set focus to editable area after initializing summernote
toolbar: [
['fontname', ['fontname']],
['fontsize', ['fontsize']],
['style', ['bold', 'italic', 'underline', 'clear']],
['color', ['color']],
['para', ['paragraph']],
['insert', ['picture', 'link', 'video']],
['view', ['codeview']]
],
fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica neue', 'Helvetica', 'Impact', 'Lucida Grande', 'Tahoma', 'Times New Roman', 'Verdana', 'Tahoma', 'Courier New', '맑은 고딕', '굴림', '돋움'],
fontNamesIgnoreCheck: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica neue', 'Helvetica', 'Impact', 'Lucida Grande', 'Tahoma', 'Times New Roman', 'Verdana', 'Tahoma', 'Courier New', '맑은 고딕', '굴림', '돋움'],
});
});
</script>
5. Summernote에 기존 데이터를 불러올 때
$('#summernote').summernote('pasteHTML', data);pasteHTML을 사용하여 내용을 불러와야 Summernote에서 사용가능 한 수정 가능한 형태로 값이 들어간다.
6. Summernote를 이용해 미리보기/수정 없이 내용만 볼 수 있게 뿌릴 때
$("#content").html(data.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g,'"').replace(/(/g,'(').replace(/)/g,')').replace(/#/g,'#'));태그를 제거해주는 작업을 하지 않으면 태그 채로 올라가게되므로 꼭 필요한 작업이다.
7. 마치며..
Summernote 홈페이지에 이 페이지에 사용된 것보다 다양한 옵션이 있으니 필요한 것에 맞춰서 값을 넣으면 된다.
또한, 작은 용량의 이미지는 굳이 DB에 저장하거나 하는 방법이 아니라고 하더라도
Summernote에서 기본으로 제공하는 base64를 통해 무리없이 들어간다.
그러나 데이터의 양이 많아지거나 이미지가 너무 큰 경우를 위해서 후 처리가 필요할 수 있다.