Skip to content

Summernote #

Find similar titles

4회 업데이트 됨.

Edit
  • 최초 작성자
    leh
  • 최근 업데이트
    shlee

Structured data

Category
Programming

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

0.0.1_20240214_1_v81