[´äº¯]tinyMce ¿¡µðÅÍ À̹ÌÁö¾÷·Îµå(image upload) Ãß°¡
¿©·¯°¡Áö À§ÁöÀ¨¿¡µðÅ͸¦ »ç¿ëÇϴµ¥.. ±×Áß¿¡ ¾Ë°ÔµÈ ¿¡µðÅÍ
tinyMce ¹«·á¶ó¼ ÁÁ´Ù. ¾ÆÀÌÄÜÀ̶ó´ø°¡ µðÀÚÀεµ ½ÉÇÃÇÏ°í ¾ð¾îÆѵµ ´Ù¾çÇÏ°Ô Áö¿øµÇ°í
¾à°£ Ãʱ⼳Á¤ÀÌ Á¶±Ý ÀÖ±â´ÂÇÏÁö¸¸ ±×¸® ¾î·ÆÁö ¾Ê±â¶§¹®¿¡
Å«ºÒÆíÇÔ¾øÀÌ »ç¿ë°¡´ÉÇÒµí.
ȨÆäÀÌÁö : http://www.tinymce.com/
´ÙÁÁÀºµ¥ º¸´Ï±ñ À̹ÌÁö ÷ºÎ ºÎºÐÀÌ ¼¹ö¿¡¼ URL Àû¾î¼ ¿¬°áÇÏ´Â ºÎºÐÀ̶ó.
¾÷·Îµå ±â´ÉÀ¸·Î º¯°æ. ¾ÆÁÖ °£´ÜÇÏ°Ô ¾Æ·¡ ¼Ò½ºÂü°í
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | tinymce.init({ selector: "#mytextarea" , theme: "modern" , language: "ko" , menubar: false , plugins: "autolink autosave code link media image table textcolor autoresize" , toolbar: "undo redo | styleselect | forecolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table link media custom_image code " , setup: function (editor) { editor.addButton( 'custom_image' , { title: 'À̹ÌÁö»ðÀÔ' , icon: 'image' , onclick: function () { window.open( "POPUP_URL" , "tinymcePop" , "width=400,height=350" ); } }); } }); |
±âº»¼³Á¤¿¡ ¸î°¡Áö Ãß°¡ÇÏ°í
ÇÙ½ÉÀº Àú±â Ç÷¯±×Àο¡ custom_image ¶ó´Â °Í°ú
addButton ¿¡ custom_image ¸¦ ¸ÂÃçÁÖ¸é µÊ. icon ¿¡ image ¸¦ ¾²¸é
ÀÚü À̹ÌÁö ¾ÆÀÌÄÜÀÌ ³ª¿É´Ï´Ù. ±×·¯±â À§Çؼ± »ç¿ëÇÏÁø ¾ÊÁö¸¸ Ç÷¯±×Àο¡ image µµ Ãß°¡
¹öÆ°Ãß°¡ Çü½ÄÀ¸·Î ±¸ÇöÇÏ´Â °Ì´Ï´Ù.
Æ˾÷âÀº Æò¼Ò ¾÷·Îµå ÇÏ´Â ¹æ½Ä´ë·Î Á÷Á¢ ±¸ÇöÇÏ½Ã¸é µË´Ï´Ù.
ÆÄÀÔ¾÷·ÎµåÈÄ Æ˾÷â ¿¡¼ ¾Æ·¡¿Í °°ÀÌ ÀÔ·ÂÇÏ¸é µË´Ï´Ù.
1 | opener.tinymce.activeEditor.execCommand( "mceInsertContent" , 'false' ,À̹ÌÁö°æ·Î); |
±×·¯¸é ¿¡µðÅÍ º»¹®¿¡ À̹ÌÁö°¡ »ðÀÔÀÌ µË´Ï´Ù.
°£´ÜÇÏÁê?
¿¹Á¦ : http://dev.songtory.com/template/editor_temp.html
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
<title>»çÁø ÷ºÎÇϱâ ::</title> | |
<style type="text/css"> | |
body,h1{font-family:'µ¸¿ò',Dotum,Helvetica,sans-serif;font-size:12px; margin: 0; padding: 0;} | |
h1{color:#333;font-size:14px;letter-spacing:-1px} | |
button{width: 70px; height: 25px; font-weight: bold; cursor: pointer;} | |
#pop_wrap{width:383px} | |
#pop_header{height:26px;padding:14px 0 0 20px;border-bottom:1px solid #ededeb;background:#f4f4f3} | |
.pop_container{padding:11px 20px 0} | |
#pop_footer{margin:21px 20px 0;padding:10px 0 16px;border-top:1px solid #e5e5e5;text-align:center} | |
.btn_area{word-spacing:2px} | |
.pop_container2{padding:46px 60px 20px} | |
.pop_container2 .dsc{margin-top:10px;color:#666;line-height:18px} | |
.pop_container2 .dsc strong{color:#13b72a} | |
.upload{margin:0 4px 0 0;_margin:0;padding:6px 0 4px 6px;border:solid 1px #d5d5d5;color:#a1a1a1;font-size:12px;border-right-color:#efefef;border-bottom-color:#efefef;length:300px;} | |
</style> | |
<script type="text/javascript"> | |
function submit_to() | |
{ | |
//var tempImg = "<p><img src='http://dev.songtory.com/play.jpg' /></p>"; | |
//opener.tinymce.activeEditor.execCommand("mceInsertContent",'false',tempImg); | |
var frm = document.editor_upimage; | |
if(frm.uploadInputBox.value =="") | |
{ | |
alert("ÆÄÀÏÀ» Ãß°¡ÇØÁÖ¼¼¿ä."); | |
return false; | |
} | |
frm.submit(); | |
} | |
function pop_close(){ | |
self.close(); | |
} | |
</script> | |
</head> | |
<body> | |
<div id="pop_wrap"> | |
<!-- header --> | |
<div id="pop_header"> | |
<h1>»çÁø ÷ºÎÇϱâ</h1> | |
</div> | |
<!-- //header --> | |
<!-- container --> | |
<div id="pop_container2" class="pop_container2"> | |
<form id="editor_upimage" name="editor_upimage" action="upload_post.php" method="post" enctype="multipart/form-data"> | |
<div id="pop_content2"> | |
<input type="file" class="upload" id="uploadInputBox" name="uploadInputBox"> | |
<p class="dsc" id="info"><strong>10MB</strong>ÀÌÇÏÀÇ À̹ÌÁö ÆÄÀϸ¸ µî·ÏÇÒ ¼ö ÀÖ½À´Ï´Ù.<br>(JPG, GIF, PNG, BMP)</p> | |
</div> | |
</form> | |
</div> | |
<!-- //container --> | |
<!-- footer --> | |
<div id="pop_footer"> | |
<div class="btn_area"> | |
<button type="button" onClick="submit_to();">È®ÀÎ</button> | |
| |
<button type="button" onClick="pop_close();">Ãë¼Ò</button> | |
</div> | |
</div> | |
<!-- //footer --> | |
</div> | |
</body> | |
</html> |