티스토리 뷰

project/academy

웹에디터 Summernote 써머노트 사용하기 : 기본 사용법

daeuun 2021. 7. 29. 02:55

summernote는

bootstrap4버전과 css를 수정하기 편한 라이트 버전이 있다. 

부트스트랩을 사용하지 않는 lite버전으로 summernote를 사용해보자.

 

어려울까봐 걱정했는데 생각보다 사용법이 쉬워서 금방 적용할 수 있었다!

 

 

1. 다운로드

Download compiled 버튼을 눌러서 다운로드 받는다.

 

 

 

 

 

2. 프로젝트에 파일 배치하기

 

다운로드 받은 dist의 압축 풀면 다음과 같은 파일 구조가 나온다.

 

 

사용할 프로젝트의 resources폴더에 폴더 이름을 summernote로 지정하고,

  • font폴더
  • lang폴더의 KR파일
  • summernote-lite.css
  • summernote-lite.js

네종류의 파일을 붙여넣는다.

 

적용결과

 

 

3-1. 헤더에 라이브러리 추가하기

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-lite.css" rel="stylesheet"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-lite.js"></script>

 

3-2. html

<!-- form 태그 안에 textarea로 사용하는 경우-->
<form method="post">
	<textarea id="summernote" name="editordata"></textarea>
</form>
  
<!-- div에 에디터를 사용하는 경우 -->
<div id="summernote">Hello Summernote</div>

 

3-3. Script

summernote를 불러오는 기본 script구문

<script> 
	$(document).ready(function() { 
    	$('#summernote').summernote(); 
	}); 
</script>

 

 

최종 통합 코드

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-lite.css" rel="stylesheet"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-lite.js"></script>
</head>
<body>
    <!-- form 태그 안에 textarea로 사용하는 경우-->
    <form method="post">
        <textarea id="summernote" name="editordata"></textarea>
    </form>
    
    <!-- div에 에디터를 사용하는 경우 -->
    <div id="summernote">Hello Summernote</div>

    <script>
        $(document).ready(function() {
           
            $('#summernote').summernote({
                height: 300,                 // 에디터 높이
                focus: true,                  // 에디터 로딩후 포커스를 맞출지 여부
                lang: "ko-KR",					// 한글 설정
                placeholder: '글 내용을 입력해주세요.'	//placeholder 설정
            });
        });
    </script>
</body>
</html>
반응형

'project > academy' 카테고리의 다른 글

계층형 게시판(댓글) 쿼리문 CONNECT BY & ORDER SIBLINGS BY  (0) 2021.08.03
[Javascript] 별점 선택 기능  (0) 2021.07.29
[javascript] 탭메뉴 구현하기  (0) 2021.07.26
파이널 프로젝트 프롤로그  (0) 2021.07.25
세미프로젝트 프롤로그  (0) 2021.07.21
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함