summernote 에디터 (사용법)

웹접근성을 고려한 개발에 관심이 많다면 에디터에도 관심이 많을 것이라고 생각합니다.

에디터로 인해서 피치 못하게 접근성을 놓치는 경우가 있을 수 있기 때문입니다.

물론 본인의 경험과 실력 향상을 위해 직접 구현을 하는 것도 좋다고 생각하지만,

기존의 오픈소스를 활용하는 것도 좋은 방법이라고 생각합니다.

라이센스

Summernote may be freely distributed under the MIT license.

라고 명시되어 있습니다. 무료라고 생각하시면 됩니다.

우선, 서머노트 홈페이지에 들어갑니다.   http://summernote.org/

Github 주소 : https://github.com/summernote/summernote

서머노트는 부트스트랩과 jQuery를 기본으로 사용하고 있기 때문에 두가지를 꼭 명시 해야 합니다.

<!-- 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>
서머노트 선언

$(document).ready(function() {
     $('#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
     });
});

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

스크립트로 서머노트를 선언해야 합니다. 

또한, 서머노트의 옵션이 다양하게 있으니 선언시에 이러한 사항을 고려하시면 됩니다.

<textarea name="content" id="summernote" value=""></textarea>

서머노트특징

HTML5 를 기반으로 사용하기 때문에 플래시가 없습니다.

- 웹접근성을 고려할 수 있습니다.

오픈소스이기 때문에 많은 개발자 버전이 존재 합니다.

- github에서 검색해 봅니다. (세상에는 똑똑한 사람들이 참 많습니다.)

- https://github.com/summernote/awesome-summernote   어섬서머노트.

- 이곳에서 보면 커스텀된 기능이 정말 많다.

emoji 를 사용할 수 있다.

- https://api.github.com/emojis   이곳의 이모티콘을 사용할 수 있다.

- 사용법은 summernote 의 API를 보고 따라해야 한다.

코드미러를 지원한다.

- 코드미러에 대해서 우선 공부를 좀 해야 이해가 되겠지?

Codemirror as codeview

If you include a CodeMirror on a page, you can use CodeMirror to Codeview. Include jQuery, Bootstrap and CodeMirror with summernote.

<!-- 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 codemirror (codemirror.css, codemirror.js, xml.js, formatting.js) -->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.js"></script>

<!-- include summernote css/js-->
<link href="summernote.css">
<script src="summernote.js"></script>

Initialize Summernote with codemirror options

$('.summernote').summernote({
  height: 150,   //set editable area's height
  codemirror: { // codemirror options
    theme: 'monokai'
  }
});

위의 내용처럼 에디터에 입력 후 코드미러의 적용 유무를 가지고 살펴본다.

1. 코드미러 미적용.

2. 코드미러 적용.

코드미러란, 

CodeMirror는 각종 컴퓨터 프로그램 코드를 웹상에서 쾌적한 환경으로 편집할 수 있도록 구축하는데 도움주는 자바스크립트 라이브러리이다. 

Plugin list

Below is useful plugin list.

• Print: demo, repo

For more plugin lists, visit to awesome-summernote.

멘션을 보내는 기능, 단어 힌트 기능 등등이 있다.

서머노트가 지원하는 언어

기본적으로 스크립트를 사용하니 어떤한 언어에서도 호환이 잘 되겠지만 파이썬과 루비가 눈에 띕니다.

Integration

3rd parties available in django, rails, angular and so on.

Django

Handy update for your django admin page.

• django-summernote
• summernote plugin for Django

Ruby On Rails

This gem was built to gemify the assets used in Summernote.

• summernote-rails
• how to use summernote on rails

AngularJS

AngularJS directive to Summernote.

• angular-summernote

Apache Wicket

Summernote widget for Wicket Bootstrap.

• demo
• source code

Webpack

Example about using summernote with webpack.

• summernote-webpack-example

Meteor

Example about using summernote with meteor.

• summernote-meteor-example