wiki:editor:summernote
SummerNote
- description : SummerNote 관련 내용 기술
- author : slaptear
- email : sgjang@repia.com
- lastupdate : 2023-03-02
SummerNote란?
- SummerNote는 심플한 무료 에디터로 아주 쉽게 누구나 사용가능하다.
- 가장 큰 장점은 Callback함수를 지원하기 때문에 파일 업로드 구현이 매우 쉽다.
적용 방법
- https://summernote.org/SummerNote 공식사이트에 들어가서 다운로드한 후에 필요한 부분 추가
- 아래와 같이 작성하게 되면 SummerNote 적용 완료
<head>
<script src="../resources/summernote/summernote-lite.js"></script>
<script src="../resources/summernote/lang/summernote-ko-KR.js"></script>
<link rel="stylesheet" href="../resources/summernote/summernote-lite.css">
</head>
<body>
<div class="container">
<textarea class="summernote"></textarea>
</div>
<script>
$(document).ready(function() {
var toolbar =
[
['fontname', ['fontname']] // 글꼴 설정
, ['fontsize', ['fontsize']] // 글자 크기 설정
, ['style', ['bold', 'italic', 'underline','strikethrough', 'clear']] // 굵기, 기울임꼴, 밑줄,취소 선, 서식지우기
, ['color', ['forecolor','color']] // 글자색
, ['table', ['table']] // 표만들기
, ['para', ['ul', 'ol', 'paragraph']] // 글머리 기호, 번호매기기, 문단정렬
, ['height', ['height']] // 줄간격
, ['insert',['picture','link','video']] // 그림첨부, 링크만들기, 동영상첨부
, ['view', ['codeview','fullscreen', 'help']] // 코드보기, 확대해서보기, 도움말
];
var setting =
{
height : 300
, minHeight : null
, maxHeight : null
, focus : true
, lang : 'ko-KR'
, toolbar : toolbar
, callbacks : { //여기 부분이 이미지를 첨부하는 부분
onImageUpload : function(files, editor, welEditable) {
for (var i = files.length - 1; i >= 0; i--) {
uploadSummernoteImageFile(files[i],this);
}
}
}
};
$('#summernote').summernote(setting);
});
</script>
</body>
Tip
- SummerNote 값 Set, get (태그와 같이 가져옴)
//set
var markupStr = '<p>hello world</p>';
$('#summernote').summernote('code', markupStr);
//get
var markupStr = $('#summernote').summernote('code');
Ref
/volume1/web/dokuwiki/data/pages/wiki/editor/summernote.txt · 마지막으로 수정됨: 2023/03/03 14:22 저자 sgjang
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
