«   2018/07   »
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        
Archives
Today
28
Total
1,123,197
안정적인 DNS서비스 DNSEver
관리 메뉴

Blue Breeze

Summernote WISWIG Editor 본문

FrontEnd

Summernote WISWIG Editor

푸른바람 C/H 2018.07.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'
  });
});


'FrontEnd' 카테고리의 다른 글

Summernote WISWIG Editor  (0) 2018.07.12
Web application TEST  (0) 2012.01.17
IE7 파비콘 설정후 적용되지 않을 경우는?  (0) 2009.01.07
css, javascript 최적화 Tool  (0) 2008.09.11
Prototype.js를 제대로 사용하는 방법  (0) 2008.08.31
IE용 웹 개발 도구 DebugBar  (0) 2007.11.19
0 Comments
댓글쓰기 폼