티스토리 뷰

   정말 불친절한 네이버가이드 때문에 이걸 하느라고 얼마나 고생했는지 모른다. 전부 php로 되어 있어서 이걸 jsp로 바꾸고 해야 하는데, 다른 사람들이 블로그에 올려놓은 것들을 보니 저마다 조각조각이라 어찌할 방도가 없었다. 결국 회사 선배의 도움으로 해결..


   혹시라도 나같이 jsp 스마트에디터 이미지 첨부를 미친듯이 구글링하고 있을 불쌍한 중생들을 위해 아래 파일과 간단한 방법을 올린다.




se2.zip



   먼저 첨부한 파일을 다운로드 받아서 폴더째 서버에 복사 붙여넣기 한다.


   그리고 cos.jar파일을 lib에 추가해준다. 이 글 참조 → http://zero-gravity.tistory.com/168 

   (MultipartRequest와 DefaultFileRenamePolicy를 사용하기 때문..)


   나머지는 다른 환경에서 작동하도록 첨부한 파일들에서 몇몇 설정만 변경해주면 된다.



se2 > photo_uploader > popup > file_uploader.jsp


path를 각자의 "서버 안에 있는 폴더"로 경로를 변경해준다.

에를 들어, 프로젝트의 WebContent 안에 있는 uploadFolder를 경로로 설정하고 싶다면,

아래와 같이 변경해줘야 한다. 각자 경로에 맞춰서.(무슨 말인지 알 거다.)

String path = "D:/folder/workspace/projectName/WebContent/uploadFolder";


path는 스마트에디터로 이미지를 첨부했을 시에 업로드 될 경로다.

참고: 만약 path를 request.getSession().getServletContext().getRealPath("/") + File.separator + "저장될 폴더" 이런 식으로 써주면 폴더를 새로고침 하지 않아도 이미지를 즉각적으로 확인할 수 있다. 이 때 이미지가 저장되는 곳은 metadata쪽이다.




   그리고나서,,









   스마트에디터를 사용할 jsp페이지에 위와 같이 자바스크립트를 삽입한다.



   textarea 태그의 id 값을 자바스크립트에 넣었던 id와 같게 해주는 것도 잊지 말자.





   다음은 설정을 모두 끝내고 스마트에디터를 실행했을 시의 화면이다.




우측 상단에 있는 "사진"을 클릭.



사진 첨부하기 창이 뜰 것이다.

이미지를 첨부하고 확인.



그럼 이렇게 이미지가 X박스 표시되어 나온다.

정상적이다. 왜냐하면 이클립스에서 새로고침을 하지 않았기 때문이다.

실제로 본 서버에 올리면 잘 돌아간다.

그럼 이미지가 올라갔는지 어떻게 확인하나?



일단 이클립스에서 이미지가 올라간 폴더에 새로고침을 해주고(이때 올렸던 이미지가 추가됐다면 성공한 거다),

스마트에디터의 HTML로 가서 내용을 복사한다.



스마트에디터를 다시 실행하고, HTML로 가서 복사한 내용을 붙여넣기한다.



Editor로 돌아오면 짠~!


   글쓰기를 완료하지 않아도 이미지 파일 자체는 서버에 업로드 된다.


   글쓰기를 완료할 경우, DB에는 이미지 파일 자체가 올라가는 게 아니라 아까 HTML영역에서 복사했던 그 내용이 올라간다.





   이런 데에 시간을 허비하는 건 너무 아깝지 않은가.

   어짜피 오픈소스 갖다 쓰는 건데,, 그냥 대충 어떻게 돌아가겠구나 정도만 알면 된다고 본다.

   이게 뭐라고.. 혼자만 알려고 꼭꼭 숨기는 사람들 보면 참....

   물론 고생 더럽게 해서 알려주기 아깝겠지만, 그런 사람은 더럽게 이기적인 사람이라고 생각한다. ㅡ.ㅡ..;

   인류가 이렇게 발전할 수 있었던 데에는 지식의 전달과 축적이 있었기에 가능했던 것 아닌가. 

   공유하는 세상이 아름다운 세상이다. 크~



저작자 표시 비영리 변경 금지
신고
댓글
  • 이전 댓글 더보기
  • 장상휘 이미지 업로드부분에서 pasteHTML(filepath) 함수를 타고
    이미지 업로드가 진행되는데,
    저같은경우는 무리없이 이미지 업로드가 진행이 되었습니다. 해당 포스팅 글도 많은 도움이 되었구요ㅎㅎ

    근데 한 페이지 내에서 에디터가 두개가 있습니다.

    /* 첫번째 에디터 */
    var oEditors2 = [];
    nhn.husky.EZCreator.createInIFrame({
    oAppRef: oEditors2,
    elPlaceHolder: "첫번째 textAreaID",
    sSkinURI: "<%=request.getContextPath()%>/se2/SmartEditor2Skin.html",
    fCreator: "createSEditor2" });

    /* 두번째 에디터 */
    var oEditors3 = [];
    nhn.husky.EZCreator.createInIFrame({
    oAppRef: oEditors3,
    elPlaceHolder: "두번째 textAreaID",
    sSkinURI: "<%=request.getContextPath()%>/se2/SmartEditor2Skin.html",
    fCreator: "createSEditor2" });

    이런식으로 두개의 에디터에 값을 넣고 전달하고 뿌려주는데 문제가 없었습니다.

    이미지부분에서 문제가 생기는 점이,
    file_upload.jsp 를 통해 pasteHTML(filepath) 함수를 호출하는것 같은데,
    pasteHTML(filepath) 함수를 보면,

    function pasteHTML(filepath){
    var sHTML1 = '<img src="<%=request.getContextPath()%>/upload/'+filepath+'">';
    oEditors1.getById["첫번째 textAreaID"].exec("PASTE_HTML", [sHTML1]);

    var sHTML2 = '<img src="<%=request.getContextPath()%>/upload/acco/'+filepath+'">';
    oEditors2.getById["두번째 textAreaID"].exec("PASTE_HTML", [sHTML2]);

    }

    이런식으로 주었습니다.. 당연한 말이지만 같은 함수내에 두번의 이미지 입력을 해주었으니
    두개의 textArea에 표현이 되는것이 당연한 건데, 따로 구분하는 법을 알 수가 없어 이렇게 여쭤봅니다 ㅠ

    첫번째 에디터에서 사진첨부를 하면 첫번째꺼에만 들어가고,
    두번째 에디터에서 사진첨부를 하면 두번째꺼에만 들어가게 되는
    방식을 구현하고자 합니다..
    2014.08.20 12:04 신고
  • BlogIcon 공부하는 나부랭이, 무중력고기 제가 일일히 봐드릴 여유가 없네요.
    거의 다 하셨으니 스스로 해결하실 수 있을 것 같은데요~
    2014.08.23 00:24 신고
  • 비밀댓글입니다 2014.10.02 06:16
  • BlogIcon 공부하는 나부랭이, 무중력고기 이 부분이 안 돌아가요~ 하고 덜렁 그 부분 소스만 올려주시면 제가 그 프로젝트를 개발하는 사람이 아니기 때문에 알 수가 없어요.
    혹시 또 다른 form이 없는지 살펴보시고요. 디버깅으로 해결해보시기 바랍니다.
    2014.10.02 09:32 신고
  • 연바 정의 되지 않음 또는 null 참조 인 'path'속성 을 가져올 수 없습니다. 스크립트 오류가 뜨면서 이미지 업로드가 실패하는데
    String path=""; 여기에서 주소를 잘못쓴건가요??

    참고로 학교 웹서버에다가 게시판 만들려고 하는데 서버주소도 다써야되나요?? ex) http://203.xxx.xxx.xxx:8080/
    2014.10.03 14:13 신고
  • BlogIcon 공부하는 나부랭이, 무중력고기 학교 웹서버에 만들고 싶다면, 그 학교 서버의 로컬 주소는 적어주셔야 합니다. 그리고 게시판을 거기서 돌려야겠죠. 2014.10.06 09:03 신고
  • 비밀댓글입니다 2014.10.17 15:43
  • BlogIcon 공부하는 나부랭이, 무중력고기 글쎄요, 그건 저도 모르겠네요. 2014.10.22 10:08 신고
  • 이호준 아 제가 찾던거네요. ㅠ
    죄송한데 본문 내용중에 보면
    "스마트에디터를 사용할 jsp페이지에 위와 같이 자바스크립트를 삽입한다."
    라는 구문이 있는데, 위 내용중에 스마트에디터를 사용할 jsp 페이지에 대한 내용이 없네요. ㅠ
    혹시 내용이 없어진건 아닌지 .

    현재 적용은 했는데, 스마트에디터를 사용할 페이지는 기존 php용 버전처럼
    <script type="text/javascript" src="/smarteditor/js/HuskyEZCreator.js" charset="utf-8"></script>
    <textarea rows="15" cols="170" id="content" name="content" class="content"><%=content%></textarea>
    <script type="text/javascript">
    var oEditors = [];

    nhn.husky.EZCreator.createInIFrame({
    oAppRef: oEditors,
    elPlaceHolder: "content",
    sSkinURI: "/smarteditor/SmartEditor2Skin.html",
    fCreator: "createSEditor2"
    });
    </script>

    이런식으로 사용중인데.. 이렇게 하니 이미지첨부하면 디렉토리상에 업로드는 되는데, textarea 박스안에 내용은 안들어가네요 ㅠ.
    물론 뷰페이지에서도 나오지않구요.

    혹시 스마트에디터를 사용할 jsp페이지에 들어가는 자바스크립트도 내용이 틀린가요?
    2014.10.27 11:18 신고
  • 이호준 아. ㅎㅎ
    잘처리되었습니다. 번거롭게 확인하실까봐 제가 답글 답니다. ㅎㅎ

    본문에
    function pasteHTML(filepath){
    var sHTML = '<span style="color:#FF0000;"><img src="'+filepath+'"></span>';
    oEditors.getById["content"].exec("PASTE_HTML", [sHTML]);
    }

    이부분이 글쓰기페이지에 추가되어야 하는군요. ㅎ
    2014.10.27 11:37 신고
  • 도와주세요 이미지업로드에서 이미지는 정상적으로 업로드폴더에 저장이 됩니다.
    이미지가 저장이 되지만 업로드창이 하얗게 변하며 close가 안되고 이미지가 textAreaContent부분에 나오지가 않습니다 ㅜㅜ
    file_uploader.jsp 에서

    <script type="text/javascript">
    function fileAttach(){
    f = document.fileform;
    alert(document.fileform);
    fpath = f.path.value;
    alert(1);
    fname = f.filename.value;
    fcode = fpath + fname;

    try{
    window.opener.pasteHTML(fname);

    window.close();
    }catch(e){
    // alert(e);
    }
    }
    fileAttach();
    this.window.close();
    </script>


    이부분에서 alert를 해보면 값이 안들어오던데 똑같은 소스인데 저는 왜 받아 오지를 못하는 걸까요? ㅜㅜ

    저는 글쓰기 페이지에서 경로를<%=request.getContextPath()%> 이걸 제거해야만 에디터가 적용이 되던데 이거를 지운거랑 연관이 있을까요?? ㅜㅜ
    2014.11.06 18:33 신고
  • 도와주세요 혹시나 해서 확인해보니 크롬에서는 정상적으로 작동 되네요 ㅜㅜ
    ie9버전 쓰고 있는데 ie에서는 왜 안되는 걸까요? ㅜㅜ
    2014.11.06 19:34 신고
  • 저두용 저도 익스에서는 올라갔다가 안올라갔다가 그러고ㅠ
    크롬에서는 파일이 잘올라가는데..혹시 해결하셨나요?
    2014.11.14 18:09 신고
  • BlogIcon 공부하는 나부랭이, 무중력고기 익스 버전 몇에서 안되나요? 2014.11.16 14:57 신고
  • 달바래기 '이미지가 저장이 되지만 업로드창이 하얗게 변하며 close가 안되고' 부분은 저도 나타났었습니다.
    1) was 로그 확인해서 에러 확인해보세요.
    2) 저는 path 경로 잡아 놓은 곳에 해당 이미지 저장 폴더를 생성해 놓지 않아서 발생한 에러였습니다.
    2015.09.15 18:52 신고
  • 지나가던이 그대는 혹시 하늘이 내려주신 천사이신가요? 정말 감사합니다.... 2014.11.07 15:16 신고
  • 비밀댓글입니다 2015.01.07 00:05
  • BlogIcon 공부하는 나부랭이, 무중력고기 갖다 쓰시라고 올린 거겠죠?
    단, 글 전체 복붙해서 본인 블로그에 올린다던가 하는 건 아니됩니다~
    2015.01.07 17:46 신고
  • 비밀댓글입니다 2015.08.11 10:16
  • 고생하다 왜 그런지는 모르겠는데 선언하는 부분이 정상적으로 처리가 안되서 고생했습니다.

    var oEditors = [];
    nhn.husky.EZCreator.createInIFrame({
    oAppRef: oEditors,
    elPlaceHolder: "Cont",
    sSkinURI: "../SmartEditor2Skin.html",
    fCreator: "createSEditor2"
    });

    위와 같이 선언을 하니 정상작동이 안되더군요

    해서

    var oEditors = [];
    $(function(){
    nhn.husky.EZCreator.createInIFrame({
    oAppRef: oEditors,
    elPlaceHolder: "Cont",
    sSkinURI: "../SmartEditor2Skin.html",
    fCreator: "createSEditor2"
    });
    });

    위와 같이 수정하니 정상작동합니다.

    혹시나 저같이 고생하시는분들이 계시면 참고하시기 바랍니다.
    2015.12.24 14:55 신고
  • 안녕하세요 안녕하세요.

    위 그림에서 이미지는 해당경로 폴더에 저장된 걸 확인했습니다.
    근데, 엑박이뜨고 그 이후에 html 소스 복사해서
    다시 이클립스 새로고침하여 붙여넣기 한뒤

    editor갔는데도 똑같이 엑박이 그대로입니다.

    해결법좀 자세히 알 수 있을까요?
    2016.02.05 12:47 신고
  • 반갑습니다 안녕하세요
    저도 위에꺼와 동일하게 해보는데
    님과 똑같은 오류가 나서요
    혹시 해결하셨나요
    2017.06.23 16:12 신고
  • BlogIcon 행이 노가다 좀 하려고 했는데...ㅋ
    잘 보고 갑니당~ ^^/
    2016.04.06 14:49 신고
  • 학생 너무나 감사하여 눈물이 납니다.
    pdf 파일 보면서 이걸 어찌 해야 하나 열심히 보기만 했었는데
    구세주를 보는것 같습니다. ㅠㅠ
    2016.05.03 19:42 신고
  • 김경준 로컬pc에서는 업로드가 정상적으로되는데
    서버pc에서 적용하고 클라이언트에서 서버로 접속한다음 사진업로드를 했을때

    서버pc에 설정해놓은 path에 있는 폴더로 사진업로드가 되는것을 확인은했습니다.
    그런데 창은 닫히지않고 하얀창으로변하고
    에러 찍어보니
    e.null
    e.connection reset 이런식으로 찍히는데 어떻게해야하나요?
    2016.05.12 18:33 신고
  • 장군 며칠째 파일업로드에서 막혀서 스트레스만 받고 있습니다 ㅠㅠ
    스마트에디터 스킨적용은 다 됐고. 사진버튼 눌렀을때 업로드 창이 뜨고 이미지를 선택하는것까진 다 되는데요...
    근데 확인을 눌러도 스킨의 글쓰는칸 안으로 이미지가 들어가질 않아서요..
    콘솔에 무슨 에러가 뜨거나 하는것도 아니고.. 그냥 확인버튼 자체가 아무 동작을 하지않고 먹통입니다.

    사실 어디서 잘못된건지도 잘 모르겠네요.... ㅠㅠ

    여기 저기 검색해서 조언 구하다가 해결이 안되서 멈춰있는 상태인데...
    sever.xml에서 context path는 /로 수정돼 있는 상태고.
    callback.html과 file_uploader.jsp와 attach_photo.js파일은 모두 같은 경로에 있습니다.
    그럼 attach_photo.js에서 아래처럼 경로 지정 해주면 되는게 아닌가요?

    function callFileUploader (){
    oFileUploader = new jindo.FileUploader(jindo.$("uploadInputBox"),{
    sUrl : '/file_uploader.jsp',
    sCallback : '/callback.html',

    2016.12.05 00:53 신고
  • 11 감사합니다 2017.02.28 14:31 신고
  • 중생 불쌍한 중생하나 구하셨습니다.ㅋㅋ 2017.03.08 12:40 신고
  • 슈퍼 잘 쓸게요~!! 고마워요. 2017.06.07 16:16 신고
  • 유영미 소중한 정보 감사합니다. ^^ 많은 도움이 되었어요 2017.06.21 10:45 신고
  • 학생 안녕하세요 올려주신 파일로 에디터 적용중인 학생입니다.
    스크립트 모두 작성하고
    <textarea style="width: 100%" rows="10" name="content" id="textAreaContent" cols="80"></textarea>
    입력하면 적용이 안되서요...
    경로는 WebConent 밑에 모두 두고 작성중인데 아래 잘못된게 있으면 알려주실수 있을까요?...
    <%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
    <title>Insert title here</title>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/HuskyEZCreator.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/photo_uploader/plugin/hp_SE2M_AttachQuickPhoto.js" charset="utf-8"></script>

    <!-- Smart Editor -->
    <script type="text/javascript">

    var oEditors = [];
    nhn.husky.EZCreator.createInIFrame({
    oAppRef: oEditors,
    elPlaceHolder: "textAreaContent",
    sSkinURI: "<%=request.getContextPath()%>/SmartEditor2Skin.html",
    fCreator: "createSEditor2"
    });

    //‘저장’ 버튼을 누르는 등 저장을 위한 액션을 했을 때 submitContents가 호출된다고 가정한다.
    function submitContents(elClickedObj) {
    // 에디터의 내용이 textarea에 적용된다.
    oEditors.getById["textAreaContent"].exec("UPDATE_CONTENTS_FIELD", [ ]);

    // 에디터의 내용에 대한 값 검증은 이곳에서
    // document.getElementById("textAreaContent").value를 이용해서 처리한다.

    try {
    elClickedObj.form.submit();
    } catch(e) {

    }
    }

    // textArea에 이미지 첨부
    function pasteHTML(filepath){
    var sHTML = '<img src="<%=request.getContextPath()%>/path에서 설정했던 경로/'+filepath+'">';
    oEditors.getById["textAreaContent"].exec("PASTE_HTML", [sHTML]);
    }

    </script>


    </head>

    <body>

    <textarea style="width: 100%" rows="10" name="content" id="textAreaContent" cols="80"></textarea>



    </body>
    </html>
    2017.08.31 15:28 신고
댓글쓰기 폼
Total
847,077
Today
2
Yesterday
876
«   2017/10   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        
글 보관함