½æ¸Ó³ëÆ®»ç¿ë¹ý Á¤¸® - Summer note »ç¿ë¹ý
- ½æ¸Ó³ëÆ®»ç¿ë¹ý Á¤¸® -
ȨÆäÀÌÁö¿¡¼ ±ÛÀ» ¾²´Â ºÎºÐ¿¡ ÀÏ¹Ý ÅؽºÆ® ÇüÅÂÀÇ ±Û ¾²±â¸¸ Áö¿øÇÑ´Ù¸é »ç¿ëÀÚ°¡ »ç¿ëÇϱ⠺ÒÆíÇÏ´Ù.
ÀÌ·¯ÇÑ Á¡ ¶§¹®¿¡ ´ëºÎºÐÀÇ È¨ÆäÀÌÁö¿¡¼´Â À¥¿¡µðÅ͸¦ Áö¿øÇÑ´Ù.
¼ö¸¹Àº À¥ ¿¡µðÅÍ Áß summernote ¿¡µðÅÍ´Â ¿ÀǼҽºÀÌ¸é¼ HTML5 ±â¹ÝÀÇ ±ò²ûÇÑ UI¿Í °¡Àå ¸¹ÀÌ ¾²ÀÌ´Â ±â´ÉÀÌ ±¸ÇöµÇ¾î ÀÖ´Ù.
summernote¿¡¼´Â bootstrap4¿¡ ±â¹ÝÀ» µÐ ¹öÁ¯°ú µ¶¸³ÀûÀ¸·Î »ç¿ë°¡´ÉÇÑ ¶óÀÌÆ® ¹öÀüÀÌ ÀÖ´Ù. ( ¶óÀÌÆ® ¹öÀüÀÌ ÀÖ¾î¼ CSS°¡ °ãÄ¡Áö ¾Ê°í »ç¿ëÀÌ °¡´ÉÇÑ Á¡ÀÌ ½æ¸Ó³ëÆ®ÀÇ °Á¡ÀÌ´Ù.)
ÀÌ Æ÷½ºÆ®´Â ¶óÀÌÆ® ¹öÁ¯À» ±â¹ÝÀ¸·Î ÀÛ¼ºÇÒ °ÍÀÔ´Ï´Ù. (bootstrap4 ¹öÁ¯Àº ´Ù¸¥ CSS¿Í Ãæµ¹ °¡´É¼ºÀÌ ³Ê¹« ¸¹¾Æ¼)
Summernote °ø½Ä ȨÆäÀÌÁö
À§ÀÇ È¨ÆäÀÌÁö¿¡ Á¢¼ÓÇÏ¿© Getting started ÅÇ¿¡¼ ¼Ò½º¸¦ ´Ù¿î ¹Þ½À´Ï´Ù.
´Ù¿î ¹ÞÀº ÆÄÀÏÀ» ¿¾îº¸¸é ´ÙÀ½°ú °°Àº ÆÄÀϵéÀÌ ÀÖ½À´Ï´Ù.
ÀÌ Áß¿¡¼
- summernote-lite.js
- summernote-lite.css
- lang Æú´õ ¾È¿¡ ÀÖ´Â summernote-ko-KR.js
- font Æú´õ ÀüºÎ
ÇÁ·ÎÁ§Æ® ¸®¼Ò½º °æ·Î¿¡ º¹»çÇÕ´Ï´Ù.
´ÙÀ½°ú °°ÀÌ ¼³Á¤ Çß´Ù.
font °¡ css > summernote > font > * °¡ ÀÖÀ½.
summernote-ko-KR.js °¡ js > summernote > lang > * ¿¡ ÀÖÀ½
1. javascript ¹× css Ãß°¡
summernote-lite ¹öÁ¯À» »ç¿ë
<script src="/js/summernote/summernote-lite.js"></script>
<script src="/js/summernote/lang/summernote-ko-KR.js"></script>
<link rel="stylesheet" href="/css/summernote/summernote-lite.css">
2. html ÀÛ¼º
±âº»ÀûÀ¸·Î ½á¸Ó³ëÆ®¸¦ À¥¿¡¼ ºÒ·¯¿À´Â ¹æ½ÄÀº textarea¸¦ »ç¿ëÇÏ´Â ¹æ¹ý°ú div¸¦ »ç¿ëÇÏ´Â ¹æ¹ýÀÌ ÀÖ´Ù.
ÀÌ µÎ°³ÀÇ È£Ãâ ¹æ¹ýÀº ¼·Î ´Ù¸£´Ù.
°³ÀÎÀûÀ¸·Î´Â textarea¸¦ ´õ ¸¹ÀÌ ¾²´Â ´À³¦ÀÌ´Ù.
<!-- form ¾È¿¡ ¿¡µðÅ͸¦ »ç¿ëÇÏ´Â °æ¿ì (º¸Åë ÀÌ°æ¿ì¸¦ ¸¹ÀÌ »ç¿ëÇϴµí)-->
<form method="post">
<textarea id="summernote" name="editordata"></textarea>
</form>
<!-- div¿¡ ¿¡µðÅ͸¦ »ç¿ëÇÏ´Â °æ¿ì -->
<div id="summernote">Hello Summernote</div>
3. ½á¸Ó³ëÆ® À¥ ¿¡µðÅÍ ·Îµù
$(document).ready(function() {
//¿©±â ¾Æ·¡ ºÎºÐ
$('#summernote').summernote({
height: 300, // ¿¡µðÅÍ ³ôÀÌ
minHeight: null, // ÃÖ¼Ò ³ôÀÌ
maxHeight: null, // ÃÖ´ë ³ôÀÌ
focus: true, // ¿¡µðÅÍ ·ÎµùÈÄ Æ÷Ä¿½º¸¦ ¸ÂÃâÁö ¿©ºÎ
lang: "ko-KR", // ÇÑ±Û ¼³Á¤
placeholder: 'ÃÖ´ë 2048ÀÚ±îÁö ¾µ ¼ö ÀÖ½À´Ï´Ù' //placeholder ¼³Á¤
});
});
summernoteÀÇ ¿É¼ÇÀº ¹«¼öÈ÷ ¸¹Áö¸¸ º¸Åë °¡Àå ¸¹ÀÌ »ç¿ëÇÏ´Â ¿É¼ÇÀº À§¿¡ ½áÀÖ´Â°Ô ÀüºÎÀÌ´Ù.
´Ù¸¥ ¿É¼ÇÀº ¼¸Ó³ëÆ® °ø½Ä ȨÆäÀÌÁö¿¡ ÀÚ¼¼È÷ Àß³ª¿Í ÀÖÀ¸´Ï µé¾î°¡¼ È®ÀÎÇÏ¸é µÈ´Ù.
ÀÚÁÖ »ç¿ëÇÏ´Â ÇÔ¼ö
// ¼¸Ó³ëÆ®¿¡ text ¾²±â
$('#summernote').summernote('insertText', ½á¸Ó³ëÆ®¿¡ ¾µ ÅؽºÆ®);
// ¼¸Ó³ëÆ® ¾²±â ºñÈ°¼ºÈ
$('#summernote').summernote('disable');
// ¼¸Ó³ëÆ® ¾²±â È°¼ºÈ
$('#summernote').summernote('enable');
// ¼¸Ó³ëÆ® ¸®¼Â
$('#summernote').summernote('reset');
// ¸¶Áö¸·À¸·Î ÇÑ Çൿ Ãë¼Ò ( µÚ·Î°¡±â )
$('#summernote').summernote('undo');
// ¾ÕÀ¸·Î°¡±â
$('#summernote').summernote('redo');
ÀÌ »óÅ¿¡¼ »ç¿ëÇصµ °£´ÜÇÑ À¥ ¿¡µðÅÍ·Î »ç¿ëÇصµ µÇÁö¸¸ »ç¿ëÇϱâ ÆíÇÏ°Ô ÇÏ·Á¸é ¾ÆÁ÷ ÀÚÀßÇÑ ¼³Á¤À» ÇØÁà¾ß ÇÑ´Ù.
1. ±âº» Åø¹Ù¿¡´Â ¸¹ÀÌ »ç¿ëµÇ´Â ±â´ÉµéÀÌ ºüÁ®ÀÖ´Ù.
2. Summernote´Â ±âº» À̹ÌÁö ÀúÀå ¹æ½ÄÀÌ base64 image·Î º¯È¯Çϱ⿡ ¸®¼Ò½º °ü¸® Ãø¸é¿¡¼ ´Ù¼Ò ¹«¸®°¡ ÀÖ´Ù.
3. ¶ÇÇÑ µ¿¿µ»óÀ» ¾÷·Îµå ÇÏ´Â ¹æ½ÄÀÌ ¾Æ´Ñ ¸µÅ©¸¦ °Å´Â ¹æ½ÄÀÌ´Ù. YouTube, Vimeo, Vine, Instagram, DailyMotion, Youku ¿ÜÀÇ »çÀÌÆ®ÀÇ µ¿¿µ»óÀ» ºÒ·¯¿Ã ¼ö°¡ ¾ø¾î ÀÌ ºÎºÐÀ» Ä¿½ºÅÒ ÇØÁà¾ßÇÑ´Ù.
½á¸Ó³ëÆ®´Â ¾à°£ÀÇ ¾Æ½¬¿î Á¡Àº ÀÖÁö¸¸ À¥»çÀÌÆ®¿¡¼ »ç¿ëÇϱ⿡´Â Á¤¸» ÃÖ°íÀÇ À¥ ¿¡µðÅÍÀÌ´Ù.