[Django] SummerNote (써머노트) 에디터 적용하기

 

이번에 적용한 SummerNote 에디터이다.

부트스트랩4, 5 별도 구분하여 적용하는 부분도 있다.

 

https://summernote.org/getting-started/#simple-example

Summernote - Super Simple WYSIWYG editor

 

구글웹 한글폰트도 같이 연동했다.

 

 

 

https://fonts.google.com/noto/specimen/Noto+Sans+KR

Noto Sans Korean - Google Fonts

 

 

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

 

 

 

참고 : https://sirobako.co.kr/detail/28

참고 : https://hothoony.tistory.com/1096

참고 : https://hothoony.tistory.com/1100