반응형
Summernote란?
WYSIWYG 기반 Web Editor 라이브러리
웹 페이지에서 텍스트, 이미지, 비디오 및 다른 다양한 콘텐츠 편집 가능
- WYSIWYG(위즈윅) : 편집화면에서 입력한 글자, 그림 등의 컨텐츠 모양 그대로 최종산물이 화면상에서, 또는 출력물에서 나타나도록 하는 에디터
Summernote 다운로드
공식 사이트 접속
Summernote - Super Simple WYSIWYG editor
Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.
summernote.org
Getting Started 클릭
Download compiled 클릭
header에 라이브러리 추가
<!-- include libraries(jQuery, bootstrap) -->
<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>
<!-- include summernote css/js -->
<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 editor 추가
<div id="summernote"></div>
<textarea name="content" id="summernote" class="summernote"></textarea>- <div>, <textarea> 모두 가능
Summernote function 추가
$(document).ready(function() {
$('#summernote').summernote();
// 옵션 추가
});
전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summernote</title>
<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>
<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>
</head>
<body>
<div id="summernote"><p>Hello Summernote</p></div>
<script>
$(document).ready(function() {
$('#summernote').summernote();
});
</script>
</body>
</html>
editor 적용 화면
더보기
Reference
반응형
'Library' 카테고리의 다른 글
| React Chart Library 리서치 (2) | 2024.06.14 |
|---|---|
| [License] MIT License (0) | 2024.06.11 |
| [UI 컴포넌트 라이브러리] Storybook (0) | 2023.09.21 |
| [HTTP 비동기 통신 라이브러리] Axios (0) | 2023.09.10 |
| [상태관리 라이브러리] Redux (0) | 2022.11.11 |
