etc

SUMMERNOTE 적용해보기

RYUHA/ editor

  • 2 comments
  • 3,517 views
  • 2017년 9월 27일

무료 웹에디터 중 summernote를 적용하는 법을 알아봅시당

위지윅 방식의 유용한 웹에디터를 적용해보려 합니다.

WYSIWYG 는 What You See Is What You Get 의 약자로, 뜻 그대로 문서를 작성하면 화면에 입력된 그대로의 포맷으로 출력되는 방식을 말합니다. 대표적으로 CKEditor가 있습니다.

기존에 사용해보았던 CKEditor나 TinyMCE 말고 다른걸 써보고싶어서 찾아보던 중 Summer note라는 에디터를 알게 되었습니다.
깔끔하기도 마음에 들었지만 무엇보다도 한국 개발자들이 오픈소스로 만들었다기에 더 관심이 갔습니다. 부트스트랩을 이용한 에디터로 굉장히 심플한게 포인트입니다.
또 깃헙 가보면 다양한 개발자들이 만들어둔 버전들이 다양하답니다.

사용방법 역시 굉장히 간단합니다.

summernote started 에 들어가서 파일을 직접 다운받아 사용할 수 도 있고 터미널에 bower 혹은 npm 등을 이용해서 설치할 수도 있습니다. 물론 깃헙에서 클론 할 수도 있어요!

저의 경우 npm 을 통해 설치했습니다.

npm install summernote

그러면 설치과정이 완료되면 js와 css링크를 추가해줍니다.

<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.js"></script>

만약 다운로드하여 설치했다면 폴더 경로를 조심해주세요!

그렇다면 바로 html에 출력해볼까요!

매우 쉬워요. div 태그에 id를 부여하고 그 곳에 summernote를 입히면 됩니다.

<div> id="summernote">Hello!</div>

그리고 런을 합니다.

$(document).ready(function() {
  $('#summernote').summernote();
});

이렇게 나옵니다!

그러면 기본적으로 에디터의 크기와 툴바를 설정하는 방법을 알아봅시다.

$('#summernote').summernote({
  height: 300,                 // set editor height
  minHeight: null,             // set minimum height of editor
  maxHeight: null,             // set maximum height of editor
  focus: true                  // set focus to editable area after initializing summernote
});

높이는 저렇게 지정해주면 됩니다. 이때 높이 설정을 따로 안하면 엔터를 칠 수록 영역이 점점 내려가므로 주의해주세요!

 

$('#summernote').summernote({
  toolbar: [
    // [groupName, [list of button]]
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']]
  ]
});

툴바는 이렇게 지정할 수 있습니다. 필요한 요소만 남기고 세팅하면 될 것 같습니다.

Deep Dive : 여길 참고하면 더 다양한 커스터마이징이 가능합니다.

 

이제 간단하게 입, 출력 테스트를 해봅시다.

먼저 뷰단을 대충 만들어주세요.

저는 아래처럼 입력하고 버튼 하나만 만들었습니다.

<body>
    <div id="summernote"></div>
    <button type="button" onclick="showContent();">작성</button>
    <div class="output"></div>
</body>

아래 output 클래스의 위치에 에디터에 입력된 내용을 출력할 것입니다.

그리고 showContent() 라는 함수로 에디터에 입력된 내용을 가져오기로 합시다.

function showContent() {
            $('.output').html($('#summernote').summernote('code'));
        }

summernote에서는 .summernote('code') 로 입력된 내용을 가져옵니다.

 

그래서 버튼을 눌러서 확인해보면,

이렇게 잘 출력됩니다!

간단한 summernote를 다양한 곳에 활용해보세요!

RYUHA

만들어 보면서 하나씩 글 씁니당:)

2
Leave a Reply

avatar
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
html5aroundjjango Recent comment authors
newest oldest most voted
jjango
Guest
jjango

안녕하세요 🙂 현재 RYUHA님 블로그에도 Summernote가 적용되어있는 상태인가요 ? 아니면 다른 에디터를 쓰고계신가요? 코드블럭 스타일은 어떻게 저렇게 나오게 할 수 있는건가요 ㅠㅠ??…

html5around
Admin

안녕하세요~^^

저희 사이트는 wordpress를 베이스로 해서 만들어져 있고,
wordpress용 플러그인 tinyMCE 에디터에서 지원하는
Syntax Highlight 기능을 사용하고 있습니다.

보통 Syntax Highlight기능은 편한 확장을 위해서, 플러그인 방식을
많이 사용하고 있는 것으로 알고 있습니다.

summernote용으로 아래 사이트가 혹 도움이 되시지 않을까 싶습니다.
https://epiksel.github.io/summernote-highlight/

도움이 되셨으면 좋겠습니다.
감사합니다 🙂