간단하게 웹사이트를 꾸며보는걸 해보자.
Summernote의 위지윅에디터 적용해보자. 이것도 부트스트렙 기반이다.
우리는 개발자라서 html태그를 다 쓸줄 알지만, 일반사람들은 모르기때문에 이렇게 바꿔주는 에디터를 많이 이용한다.
summernote.org/getting-started/
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사이트에 들어가서 getting-started를 클릭하고 Inlcude js/css에서 소스코드를 참고해서 긁어오면 된다.
이곳에서 보면 jQuery랑 bootstrap을 이용하고 있다는걸 확인할수있다.
summernote css랑 js, 한글파일이 필요로 하다.
<!-- 스타일관련 -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.6/summernote.css" rel="stylesheet">
<!-- 자바스크립트관련 -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.6/summernote.js"></script>
<!-- 한글관련 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.6/lang/summernote-ko-KR.min.js"></script>불러와야하는건 이 소스코드로 body태그안에 들어있다. jQuery는 무조건 필수는 아닌데, summernote를 적용하려면 jQuery로 아이디를 지정해야한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>summernote</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding-top:50px;">
<textarea name="" id="myEditor" class="form-control" cols="30" rows="10"></textarea>
</div>
<!-- 스타일관련 -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.6/summernote.css" rel="stylesheet">
<!-- 자바스크립트관련 -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.6/summernote.js"></script>
<!-- 한글관련 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.6/lang/summernote-ko-KR.min.js"></script>
<script>
$(document).ready(function () {
$('#myEditor').summernote({
lang: 'ko-KR',
height: 300,
});
});
</script>
</body>
</html>textarea태그에서 id값과 script의 id값을 똑같이 지정해야한다.
필요한 옵션을 안에 넣어주는데, 언어는 한국어로 지원하며 높이는 300으로 해줬다.
이렇게 하면 바로 summernote를 적용할 수 있다.
파일업로드 같은것은 백앤드에서 처리해줘야하는데, 지금은 ajax로 업로드가 된다. 지금은 파일업로드가 안되기 때문에 백엔드 개발자랑 협업해야한다.
이것의 좋은점은 국내분들이 유지보수를 하고 있고 모바일에서도 사용할 수 있다. 부트스트랩 3버전 기반이다.
이런식으로 부트스트랩관련 플러그인들이 많이 있다. 지금 대표적으로 많이 사용하는 summernote를 배운 것이다. 파일업로드는 부트스트랩파일 플러그인을 검색해서 한번 사용해보자.
'부트스트랩 > Bootstrap 활용' 카테고리의 다른 글
| Bootstrap 활용 - Template (0) | 2021.01.19 |
|---|