RealMan's development log
Summernote[썸머노트] 웹 에디터 사용방법 본문
Summernote란?
Summernote는 jQuery와 Bootstrap 기반으로 만들어진 오픈소스 프로젝트이다. 그렇기에 아무 사이트에서 가져다 쓰면 CSS 충돌이 일어날 가능성이 크므로 주의하여 사용해야 한다. 이 글에서는 Bootstrap4에 기반을 둔 버전과는 독립적으로 사용가능한 라이트 버전을 사용해 보려고한다. ( 라이트 버전은 CSS가 겹치지 않아 개인적으로 생각하는 Summernote의 강점이 아닐까 싶다)
다운로드
우선 링크에 접속해 무료 소스를 다운로드 한다.
1. 압축해제
2. font폴더, summernote-lite.css, summernote-lite.js 복사
3. lang - summernote-ko-KR.js 복사
디렉토리 구조
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>SummerNoteExample</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- 서머노트를 위해 추가해야할 부분 -->
<script src="./summernote-lite.js"></script>
<script src="./summernote-ko-KR.js"></script>
<link rel="stylesheet" href="./summernote-lite.css">
</head>
<body>
<div class="container">
<textarea class="summernote" name="editordata"></textarea>
</div>
<script>
$('.summernote').summernote({
height: 450,
lang: "ko-KR"
});
</script>
</body>
</html>
결과
