lang/front

Summernote WISWIG Editor

C/H 2018. 7. 12. 08:30

Installation

Get Summernote에서 다운로드 하거나 github.com/summernote/summernoet Project master.zip을 다운로드 한다.

Require

HTML5 doctype 이어야 한다. 

<!DOCTYPE html>
<html lang="en">
...
</html>

Include CSS, JS

CDN을 이용해서 설치 가능하다.

<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<!-- include summernote css/js -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>

Enable

<div id="summernote">Hello Summernote</div>
<div class="summernote">Hello Summernote</div>

<form method="post">
    <textarea id="description" name="description" summernote=""></textarea>
</form>        

$(document).ready(function() {
    $('#summernote').summernote();
    $('.summernote').summernote();
});

Bootstrap4

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>bootstrap4</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-bs4.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-bs4.js"></script>
  </head>
  <body>
    <div id="summernote"></div>
    <script>
      $('#summernote').summernote({
        placeholder: 'Hello bootstrap 4',
        tabsize: 2,
        height: 100
      });
    </script>
  </body>
</html>

Without bootstrap

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>bootstrap4</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.9/summernote-lite.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.js"></script>
  </head>
  <body>
    <div id="summernote"></div>
    <script>
      $('#summernote').summernote({
        placeholder: 'Hello stand alone ui',
        tabsize: 2,
        height: 100
      });스
    </script>
  </body>
</html>

Height & Focus 높이, 포커거

높이를 설정하지 않으면 내용에 따라 편집 가능 영역의 높이가 변경됩니다.

$('#summernote').summernote({
  height: 300,                 // 높이
  minHeight: null,             // 최소높이
  maxHeight: null,             // 최대높이
  focus: true                  // 초기화 후 포커스 여부
});

get & set Code 컨텐츠 설정 및 가져오기

# 첫번째 summernote 의 HTML 컨텐츠를 가져온다.
var markupStr = $('#summernote').summernote('code');

# 두번째 컨텐츠를 가져온다.
var markupStr = $('.summernote').eq(1).summernote('code');

# 컨텐츠를 설정한다.
var markupStr = 'hello world';
$('#summernote').summernote('code', markupStr);

i18n support 국제화 지원

<script src="lang/summernote-ko-KR.js"></script>
$(document).ready(function() {
  $('#summernote').summernote({
    lang: 'ko-KR' // default: 'en-US'
  });
});


반응형