WYSIWYG(위지윅) 에디터란?
위지윅 에디터란 “What you see is what you get”의 약자로 사용자가 보는대로 결과를 얻는다는 뜻을 줄인 말입니다. 즉, 문서 편집 과정에서 화면에 나타나는 모양 그대로 출력물이 나오는 에디터를 말합니다. 최근 대부분의 게시판에서 글을 작성하는 화면에는 이러한 위지윅 에디터가 적용되어 있습니다.
HTML 기반의 위지윅 에디터는 종류가 상당히 많이 있습니다. 오랫동안 개발되어온 CKEditor나 Naver에서 배포하던 SmartEditor 등이 있습니다.
아래와 같이 코드를 작성하면 대략적으로 사용 가능합니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Summernote</title> <!-- 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.9/summernote.css" rel="stylesheet"> <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/lang/summernote-ko-KR.js"></script> </head> <body> <div id="summernote"> <p>Hello Summernote</p> </div> <script> function save() { var str = $("#summernote").summernote('code'); alert(str); } $(document).ready(function() { $('#summernote').summernote({ lang : 'ko-KR', //메뉴 한글화 height : 300, // set editor height minHeight : null, // set minimum height of editor maxHeight : null, // set maximum height of editor focus : true }); }); </script> <button onclick="save()" value="버튼">버튼</button> </body> </html>
'개발 > javascript' 카테고리의 다른 글
| sns 공유하기 (0) | 2019.04.09 |
|---|---|
| jquery drag&drop (0) | 2018.07.23 |
| jquery .focus (0) | 2018.07.20 |
| 비슷한 ID를 가진 값을 each하기 (0) | 2018.07.20 |
| Client PC / 모바일 확인하기 (0) | 2018.07.10 |