python/Django
[Django] SummerNote (써머노트) 에디터 적용하기
http://portfolio.wonpaper.net
2023. 11. 8. 09:35
이번에 적용한 SummerNote 에디터이다.
부트스트랩4, 5 별도 구분하여 적용하는 부분도 있다.
https://summernote.org/getting-started/#simple-example
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
구글웹 한글폰트도 같이 연동했다.
https://fonts.google.com/noto/specimen/Noto+Sans+KR
Noto Sans Korean - Google Fonts
Noto is a global font collection for writing in all modern and ancient languages. Noto Sans KR is an unmodulated (“sans serif”) design for the Korean language u
fonts.google.com
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<style>
@font-face {
font-family: 'NotoSansKR';
src: url("{% static 'font/notosanskr/NotoSansKR-Black.ttf'%}") format('opentype')
}
</style>
{% block script %}
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
{% endblock %}
<textarea name="content" id="content" rows="10" cols="100" style="width:100%; height:300px;"></textarea>
<script>
var fontList = ['맑은 고딕','굴림','돋움','바탕','궁서','NotoSansKR','Arial','Courier New','Verdana','Tahoma','Times New Roamn'];
$('#content').summernote({
//lang: 'en-US',
//lang: 'zh-CN',
lang: 'ko-KR',
placeholder: '내용을 입력하세요',
tabsize: 2,
height: 300,
toolbar: [
['fontname', ['fontname']],
['fontsize', ['fontsize']],
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['forecolor','color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture']],
['view', ['codeview', 'help']]
],
fontNames: fontList,
fontSizes: ['8','9','10','11','12','14','16','18','20','22','24','28','30','36','50','72'],
fontNamesIgnoreCheck: fontList
});
$('#content').summernote('fontName', '맑은 고딕');
$('#content').summernote('fontSize', 16);
</script>
|
cs |
참고 : https://sirobako.co.kr/detail/28
참고 : https://hothoony.tistory.com/1096
참고 : https://hothoony.tistory.com/1100