bootstrap textarea 꾸미기 - summernote

네이버의 스마트 에디터 대신에 사용할 만한 작성 툴입니다.

​

1. get started 로 들어가기
2. 스크롤을 내려서 들어가면 include js/css 의 코드 복사해서 부트스트랩 css link를 주석 처리하고 붙혀넣기

<!-- 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>

3. Embed의 코드도 복사해서 textarea를 사용할 부분에 대신 넣어주기

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

​

4. Run summernote의 코드 복사해서 <script> 하나 만들어서 제이쿼리 넣어주기

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