안녕하세요.
오늘은 웹에디터에서 가장 많은 사람들이 사용하는 써머노트에 대해 알아보겠습니다.
써머노트를 다운 받고 써머노트에 나와 있는 에디터 기능중에 사용하지 않을 기능을 제거하고
디자인을 간단히 변경해보도록 하겠습니다.
아래 링크에서 써머노트를 다운 받아주시고 압축까지 풀어주세요.
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라는 이름으로 폴더를 하나 만들고
다운받은 폴더에서 아래의 파일들을 다운 받아주세요.
index.html
summernote-ko-KR.js (lang폴더 안에 있음)
summernote-lite.css
summernote-lite.js
font폴더
그러면 위와 같이 폴더가 이루어질 것입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>SummerNoteExample</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- 서머노트를 위해 추가해야할 부분 -->
<script src="./summernote-lite.js"></script>
<script src="./summernote-ko-KR.js"></script>
<link rel="stylesheet" href="./summernote-lite.css">
<!-- -->
</head>
<body>
<div class="container">
<textarea class="summernote" name="editordata"></textarea>
</div>
<script>
$('.summernote').summernote({
height: 450,
lang: "ko-KR"
});
</script>
</body>
</html>
아마 주석 부분이 여러분들의 파일과 다를 것입니다. 위와 같이 수정하고
실행하면 아래화면을 볼 수 있을 것입니다.
자 실행하는 것은 어렵지 않게 됬습니다.
위의 기능을 다 사용하실 분도 있겠지만 저기에서 필요한것만 사용하고
불필요한 기능들은 제거해서 사용하실 분들도 있을 것입니다.
저 또한 위의 기능중에서 불필요한 기능들이 많아 기능들을 몇개 없애보도록 하겠습니다.
개발자 도구를 열어서 속성을 확인해서 마지막 세개 기능을 없애보겠습니다.
div class 이름이 note-view라고 되어 있습니다.
우선, summer-note.js 파일을 열어주고 summernote()라고 검색하여 function을 찾아주면
위와 같이 확인할 수 있을 것입니다.
summernote 함수 마지막에 아래 코드를 추가해주면 note-view 속성이 제거됨을 확인 할수 있습니다.
$('.note-view').remove();
마찬 가지 방법으로 저는 글꼴 수정하는 기능과 글자 색 수정하는 기능까지 없애도록 하겠습니다.
$('.note-fontname').remove();
$('.note-color').remove();
굳이 저를 똑같이 따라할 필요는 없습니다.
본인의 사용용도에 맞게 필요없는 기능이라면 제거하시면 됩니다.
완료되셨다면 위와같이 기능이 삭제됨을 확인할 수 있습니다.
이제 css파일도 수정해보겠습니다.
마지막에 링크, 이미지, 동영상 첨부 버튼이 각 기능을 제대로 표현하지 못하는 것 같아서
각각 링크, 이미지, 동영상이라고 텍스트를 추가해보도록 하겠습니다.
링크 버튼의 클래스네임을 찾아보니 note-icon-link라고 되어있네요.
클래스 네임을 알았으니 css 파일을 열어 수정하겠습니다.
summernote-lite.css 파일을 열고 note-icon-link 라고 검색해주세요.
위와 같은 코드를 찾을 수 있을 것입니다.
.note-icon-link::before{content:" 링크"}
cotent 속성에 링크라는 텍스트를 추가하겠습니다.
마찬가지로 이제 이미지 첨부 버튼과 동영상 첨부 버튼의 클래스 네임을 파악하여
텍스트를 추가하겠습니다.
.note-icon-picture::before{content:" 이미지"}
.note-icon-video::before{content:" 동영상"}
자 이렇게 하고 저장후 다시 index.html 파일을 열어주면
정상적으로 수정됨을 확인할 수 있습니다.
클래스네임을 찾아주면 본인이 원하는 기능과 디자인으로 커스터마이징하여 쉽게 사용할 수 있을 것입니다.
'기타' 카테고리의 다른 글
| 쿠키와 세션의 개념과 차이(실제로 어떻게 작동하는지 테스트) (0) | 2021.07.31 |
|---|---|
| [네아로 오류 해결] www와 non-www(naked) 도메인 구별 (0) | 2021.04.23 |
| [톰캣오류] SizeLimitExceededException: the request was rejected because (0) | 2021.03.07 |
| xss(cross site script) 스프링에서 완벽 보안하기(form/mulitpart, json, 웹소켓) (13) | 2021.02.05 |
| [CORS]access-control-allow-origin 오류 해결방법 (2) | 2020.11.13 |
