스틱코드라는 플러그인을 이용해 썸머노트를 사용해봅시다.
스틱 코드에 등록된 코드를 간편하게 불러와서 사용해봅시다.
* summernote사용하기
stickode.com/detail.html?no=2178
스틱코드
stickode.com
============================================================================
썸머노트란?
오픈소스 이지윅 에디터
웹페이지를 작성할 수 있는 HTML 편집기의 한 종류입니다.
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
Summernote 라이센스
Summernote may be freely distributed under the MIT license.
============================================================================
summernote를 한번 사용해보겠습니다.
1. summernote에서 코드를 다운로드 받아서 사용할 수도 있도 cdn을 이용할 수도 있습니다.
이번 예제에서는 cdn을 이용해서 구현해보도록 하겠습니다.
* 서머노트는 부트스트랩과 jQuery를 기본으로 사용하고 있습니다.
<!-- 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>
<!-- summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.js"></script>
2. 서머노트 html 작성
<h1>Summernote</h1>
<div id="summernote"></div>
3. 서머노트 js 작성
// 메인화면 페이지 로드 함수
$(document).ready(function () {
$('#summernote').summernote({
placeholder: '내용을 작성하세요',
height: 400,
maxHeight: 400
});
});
전체코드
호출태그 : summernote
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>stickcode_summernote</title>
<!-- 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.8/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.js"></script>
</head>
<body>
<h1>Summernote</h1>
<div id="summernote"></div>
<script>
// 메인화면 페이지 로드 함수
$(document).ready(function () {
$('#summernote').summernote({
placeholder: '내용을 작성하세요',
height: 400,
maxHeight: 400
});
});
</script>
</body>
</html>
<결과물>
서머노트는 summernote사이트에서 더 공부하실 수 있습니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 빠르게 To Do 리스트 만들기 (0) | 2021.07.08 |
|---|---|
| [JavaScript] 버튼 클릭으로 웹페이지 다크모드, 라이트모드 설정하기 (0) | 2021.06.26 |
| [JavaScript] 검색어 자동완성 만들기 (0) | 2021.06.23 |
| [JavaScript] 입력 값 복사해서 다른 입력창에 값 넣어주기 (0) | 2021.06.14 |
| [JavaScript] 웹에서 음악 재생하기 (0) | 2021.06.12 |
