게시판 에디터 오픈소스 추천
- 자바스크립트
- 2019. 3. 14. 11:45
게시판 에디터 API summernote 에디터
커뮤니티 웹사이트를 만들거나 게시판을 만들다 보면 에디터를 생각하시게 될겁니다. 몇년전까지만 해도 에디터 오픈소스를 구하는게 까다로웠던거 같은데 요새는 좋은 오픈소스 에디터들이 나와서 선택하여 이용하셔도 좋을꺼 같네요. 저는 섬머노트 에디터를 이용하고 있는데요. 결과부터 말씀 드리면 깔끔하고 좋습니다. 현재 무료로 이용할수 있게 서비스를 하고 있습니다. Summernote may be freely distributed under the MIT license 라고 홈페이지에 나와 있는데, 자유롭게 배포중이라구 하네요.
사이트 URL : http://summernote.org/
부트스트랩과 제이쿼리를 기반의 에디터
위 두개 단어만 봐도 웹접근성이 좋은 에디터란걸 아실수 있을거 같네요. API로 제공되기 때문에 사용방법도 어렵지 않아요. 우선 아래와 같이 부트스트랩 파일과 섬머노트에서 제공되는 JS등을 사용하려는 JSP/PHP등의 페이지에서 Include 합니다.
<!-- 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>
그리고 <script> 부분에서 다음과 같이 코딩 해줍니다. 참쉽죠? 이제 거의다 왔네요.
참고로 아래 괄호 안에 여러가지 옵션 기능들을 넣어서 가로 길이나 세로길이등등을 쉽게 정의해줄수 있어요. 그것은 홈페이지를 가셔서 직접 참고하시면 될거같아요. 샘플소스들이 많이 있습니다.
$(document).ready(function() {
$('#summernote').summernote();
});
마지막으로 <body> 부분에서 다음과 같이 코딩을 또 해줍니다. 그럼 완료입니다.
<div id="summernote"></div>
짠~ 저가 작업하고 있는 페이지에서 에디터가 호출되어 보여지는 모습입니다. 음 한가지 문제점이라고 하면, 현재 저가 쓰고 있는 부트스트랩과 충돌이 나서 전체적으로 화면이 좀 깨지더라구요. 저가 CSS 쪽은 전문이 아니여서 고민하다가, 에디터 파일을 따로 만들고, 에디터만 글쓰기 페이지로 <iframe> 으로 호출하여 사용하고 있습니다.
제이쿼리로 <iframe> 에 있는 값을 부모창으로 호출할수 있어요. 부모창에서 다음과 같이 호출합니다.
이렇게 오픈소스 에디터 사용방법에 대해 알아보았습니다.
$('#아이프레임ID값').contents().find('.note-editable').html();
