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'
});
});
반응형
'lang > front' 카테고리의 다른 글
| scroll down fadein . element on jquery (0) | 2019.03.21 |
|---|---|
| 이미지 최적화.... 뭐가 이래 복잡해.. (0) | 2018.08.16 |
| Web application TEST (0) | 2012.01.17 |
| IE7 파비콘 설정후 적용되지 않을 경우는? (0) | 2009.01.07 |
| css, javascript 최적화 Tool (0) | 2008.09.11 |