Summernote #

Summernote란? #

• Summernote는 웹 에디터이다.
• 수많은 웹 에디터 중 오픈 소스이고,
  HTML5 기반의 깔끔한 UI와 여러 기능이 구현되어있다.

사용법 #

Summernote 공식 홈페이지 #

Summernote

• 공식 홈페이지로 들어가 summernote를 다운로드 해야한다.

Summernote에서는 bootstrap에 기반을 둔 버전,
독립적으로 사용할 수 있는 Lite 버전이 있다.

Lite 버전은 기존 프로젝트에 있는 CSS와 충돌 가능성이 적다는 장점이 있다.

JS 및 CSS 추가 #

• Summernote Lite version

  #!javascript
  <!-- jQuery 라이브러리 -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  
  <!-- Summernote JS, CSS -->
  <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18
  /dist/summernote.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18
  /dist/summernote.min.js"></script>
  

• Summernote Bootstrap version

  #!javascript
  <!-- jQuery,Bootstrap 3 or 4 or 5 라이브러리 -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap
  /3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap
  /3.4.1/js/bootstrap.min.js"></script>
  
  <!-- Summernote JS, CSS -->
  <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18
  /dist/summernote.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18
  /dist/summernote.min.js"></script>
  

HTML 작성 #

• form 안에서 에디터를 사용하는 경우

  #!javascript
  <form method="post" >
      <textarea id="summernote" name="editordata">
  

• div에 에디터를 사용하는 경우 Hello Summernote

Summernote 실행 #

아래 script 작성 #!javascript $(document).ready(function() { $('#summernote').summernote(); });

Summernote 옵션 #

• 사용자 정의 툴바, 팝오버

  • 툴바에 들어가는 도구 모음을 수정할 수 있습니다.

    $('#summernote').summernote({
        toolbar: [
        //글씨체 굵게, 기울임, 밑줄, 지우기
        ['style', ['bold', 'italic', 'underline', 'clear']],
        //글씨 취소선, 위에, 아래
        ['font', ['strikethrough', 'superscript', 'subscript']],
        //글씨 사이즈 
        ['fontsize', ['fontsize']],
        //색상 
        ['color', ['color']], 
        //정렬 
        ['para', ['ul', 'ol', 'paragraph']], 
        //줄 높이 
        ['height', ['height']] ],
        height: 300, // 에디터 높이 
        minHeight: null, // 최소 높이 
        maxHeight: null, // 최대 높이 
        lang: "ko-KR", //한글 설정 
        placeholder: '최대 2048자까지 쓸 수 있습니다' //placeholder 설정 
    })
    

이 밖에도 많은 옵션들이 있다. 참고 링크 : Summernote Options