JavaScript 활용팁
2016.11.29 / 24:50
[답변]tinyMce 에디터 이미지업로드(image upload) 추가
기리아빠
추천 수 418
여러가지 위지윅에디터를 사용하는데.. 그중에 알게된 에디터
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> |