kay
조회 수 25542 추천 수 0 댓글 20
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

스마트 에디터에 이미지 업로드 기능을 추가된 샘플 소스입니다..

jimmy1775 님께서 asp 업로드 모듈을 개발해주시고  idtong 님께서 jsp 모듈을 개발해주셨습니다..


감사드립니다.


Test UIrl : http://www.uhoon.co.kr/test/988/SmartEditor/SEditorDemo.html

DownLoad : SmartEditor.zip (asp , jsp 모듈 포함)

                  smart Editor PHP Upload module.zip (2013.06.30 추가)


ps. 추가로 이미지 업로드 가능한 mimetype 을 일부 추가하였습니다..( png 등...)


스마트웹에디터.png



적용 방법 : 

1. 압축 해제 후 SEditorDemo.html 파일을 제외한 나머지 파일은 에디터가 삽입될 페이지와 같은 경로에 업로드하거나

 또는 임의의 위치에 압축 해제 후 include된 경로를 수정하여 업로드 합니다.

( 아래 설명은 같은 경로에 업로드한 기준입니다.)


2. SEditorDemo.html 파일을 참고하여 에디터가 삽입될 페이지내에 소스를 추가합니다.


- include 

<link href="css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/HuskyEZCreator.js" charset="utf-8"></script>


- Javascript 

<script>
//form변수로 지정하여 이미지업로드 페이지에서 호출하여 사용됨. form.filepath.value
var form = document.w_form;   // 사용할 폼 이름으로 수정.

//에디터호출 - <table> 안에 넣으면 안됨.
var oEditors = [];
nhn.husky.EZCreator.createInIFrame(oEditors, "ir1", "SEditorSkin.html", "createSEditorInIFrame", null, true);

//이미지삽입 - 업로드 완료페이지에서 호출됨.
function insertIMG(fname){
  var filepath = form.filepath.value;
  var sHTML = "<img src='" + filepath + "/" + fname + "' style='cursor:hand;' border='0'>";  
	// filepath 는 변수처리 혹은 직접 코딩해도 상관없음. 
	// imageUpload.asp 에서 insertIMG 호출시 경로를 포함하여 넣어주는 방법을 추천.
  oEditors.getById["ir1"].exec("PASTE_HTML", [sHTML]);
}

function pasteHTMLDemo(){
  sHTML = "<span style='color:#FF0000'>이미지 등도 이렇게 삽입하면 됩니다.</span>";
  oEditors.getById["ir1"].exec("PASTE_HTML", [sHTML]);
}

function showHTML(){
  alert(oEditors.getById["ir1"].getIR());
}

function onSubmit(){
  // 에디터의 내용을 에디터 생성시에 사용했던 textarea에 넣어 줍니다.
  oEditors.getById["ir1"].exec("UPDATE_IR_FIELD", []);

  // 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.
  form.content.value = document.getElementById("ir1").value;

  if(form.content.value == ""){
    alert("\'내용\'을 입력해 주세요");
    return;
  }

  var msg = "전송 하시겠습니까?"
  if(confirm(msg)){
    form.submit();
  }
  return;
}
</script>


- html 

<form name="w_form" action="sample.asp" method="post">
<input type="hidden" name="filepath" value="/file"> <!-- 이미지업로드 경로 변수처리 혹은 직접 코딩.. -->
  <p>
    <input type="button" onclick="pasteHTMLDemo()" value="본문에 HTML 삽입"></input>
    <input type="button" onclick="showHTML()" value="본문 HTML 보기"></input>
    <input type="button" onclick="onSubmit()" value="서버에 전송"></input>
  </p>
  <textarea name="ir1" id="ir1" style="width:700px; height:400px"><p>에디터에 기본으로 삽입할 글(수정 모드)이 없다면 이 값을 지정하지 않으시면 됩니다.</p></textarea>
  <textarea id="content" name="content" style="display:none"></textarea>
</form>



위와 같이 적용하면 에디터는 뜹니다..


에디터 내에 값 넣기 , 가져오기 등은 pasteHTMLDemo() , showHTML() 함수를 참고하세요.


관련하여 이미지 업로드는 imgUpload.html 과 imgUpload.asp 파일을 수정하시면 됩니다.

jsp 와 asp 업로드 샘플 소스파일은 upModule 폴더안에 있으니 참고하세요


?
  • ?
    ..... 2013.06.19 11:32

     적용법을 모르겠네요;;

  • ?
    kay 2013.06.20 09:30

    압축 푸시고 SEditorDEMO.html 파일 열어보시면 됩니다..

    자세한 내용은 본문을 참고해보세요..보강했습니다 ㅎㅎ

  • ?
    peter 2013.12.26 16:04

    안녕하세요..

    해당 파일 풀고 이클립스에 적용하였는데요...

      /test_fileupload-sungback/WebContent/SmartEditor/upModule/jsp/imgUploadForm.jsp

    파일에서  taglib 에러가  Can not find the tag library descriptor for "사이트" 로 나는데 저거 taglib 어떤걸 추가하면되는건지요? ㅠㅠ 제가

    자바 초보라 잘모르겟네요 ㅠㅠ

     

    아래 3개에서 에러가납니다.

    <%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
    <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
    <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

  • ?
    kay 2013.12.27 18:35

    블로그 찾아주시고 댓글 감사드립니다.

    그런데 해당 환경에서 개발이력이 없다보니 도움을 드리지 못해 안타깝습니다.. ㅠㅠ


    혹시라도 소스상에 문제가 있었다면 해결방안 공유 부탁드립니다.

  • ?
    버깅버깅 2014.02.27 21:46

    유동적인 사진업로드 경로 변경은 안되나요?

  • ?
    kay 2014.02.28 15:02

    경로를 직접 넘기거나 parameter별로 경로를 지정해서 사용하면 될것같습니다..

  • ?
    카사마사 2014.07.04 10:56

    이거 html에서만 되는거에여?? 왜 asp 에서는 안되는거 같지요 ㅠㅠ

  • ?
    kay 2014.07.04 16:22

    에디터 자체는 상관없이 됩니다.

    에디터가 들어간 파일 확장자인지 아님 업로드에 관련된것인지..

    그냥 안된다고 하시면..너무 포괄적인 말씀을 해주셔서 뭐라 말씀드리기가 어렵네요..;;

    어떤문제가 있으신것인지요

  • ?
    문의드려요 2014.12.29 11:25

    댓글 입력창에 적용된 '확장 컴포넌트 > 멀티미디어 링크 개조' 기능에 대해 문의 드립니다.
    네이버 스마트 에디터에 유튜브나 네이버 동영상 처럼 '동영상 URL'을 입력하는 것과
    PC에 등록된 동영상 파일을 '직접 업로딩' 할 수 있는 방법은 없을까요??
    포털에서 검색해봤지만 해답을 찾을 수가 없어서요 ㅠㅠ 답변 부탁 드립니다.
    (개발자가 아니라서... 가능하면 자세히 설명 부탁드립니다.)

  • ?
    kay 2014.12.30 09:32

    방법을 간단히 설명 드리면 

    일반 파일과 같이 업로드를 하되 사이즈 등등을 입력받아서 뷰페이지에서 입력받았던 정보들로 태그를 만들어내야합니다.

    개발자분이시라면 쉽게 구현하실수 있으실 것이나 개발자가 아니시라니 사실상 어렵습니다. 

    기존에 소스코드를 수정하시거나 기능을 추가하셔야하는데 소스를 구현하셔야하기 때문이구요.


  • ?
    문의드립니다 2015.01.14 17:14

    안녕하세요 

    제가 사이즈를 넘겨서 제가 넘긴 사이즈로 에디터에 이미지를 출력하고 싶은데

    값을 어떻게 넘겨야되는지 궁금합니다

  • ?
    kay 2015.01.15 10:53

    이미지 업로드 후 

    insertIMG(fname) Javascript 함수 호출 시에 사이즈 값도 함께 넘겨서 

    html 태그 생성시에 반영해주시면 됩니다!

  • ?
    문의드릅니다 2015.01.15 11:10

    답변 감사합니다

    insertIMG 함수가 보이지 않습니다 ㅠㅠ

    _getPhotoTag이쪽에서 img테그를 생성하는것 같은데 이미지 등록하는 팝업에서 이쪽으로 데이터를 보내고 싶은데 잘안되네요 ㅠㅠ

    제가 초보라 죄송합니다 ㅠㅠ

  • ?
    kay 2015.01.15 14:15

    위 본문에 보시면 insertIMG 함수가 정의 되어 있습니다.

    어떤 개발언어를 사용하시는지 모르겠으나 샘플로 포함된 ASP , PHP , JSP 파일을 보시면 업로드 처리 후

    insertIMG 함수를 호출하도록 되어있습니다. 여기에서 이미지 태그를 생성하도록 되어있구요~


  • ?
    한그림 2017.07.21 15:15
    file 은 어떻게 다운로드 해요 ?
  • ?
    kay 2017.08.11 14:58

    에디터 관련 샘플 소스파일은 본문에 포함되어있습니다.

  • ?
    NBcat 2018.06.20 14:46
    'GetUniqueName'
    imgupload_pro.asp, �� 28
    이미지 올릴때 오류가 이렇게 뜨는데 수정을 어떻게해야할지 모르겠네요 asp공부중인데 ㅠㅠ
  • ?
    kay 2018.06.21 12:26
    해당 페이지에 라인을 확인해보셔야합니다..T^T 에러코드로 확인하여 원인을 파악하시고 수정하시면 됩니다.
  • ?
    NBcat 2018.06.28 10:53
    혹시 이미지업로드시 이미지사이즈가 일정사이즈를넘어가면 자동으로 조정할수 있는 방법을 알수있을까요?
  • ?
    kay 2018.07.12 15:34
    //이미지삽입 - 업로드 완료페이지에서 호출됨.
    function insertIMG(fname){
      var filepath = form.filepath.value;
      var sHTML = "<img src='" + filepath + "/" + fname + "' style='cursor:hand;' border='0'>";
      oEditors.getById["ir1"].exec("PASTE_HTML", [sHTML]);
    }



    이미지 업로드 처리 페이지에서 업로드 완료 후에 위에 함수를 호출 합니다.

    이미지 태그를 생성하는 함수이기 때문에 이때 파일명과 함께 사이즈값을 리턴 받아서 처리하시면 가능합니다. 

    업로드된 파일의 가로 세로 값을 읽어오는 방법은 언어별로 상이하니 확인해주시구요.


    즐프하세요~  : )


List of Articles
번호 제목 글쓴이 날짜 조회 수
3 네이버 검색연동 API ( RSS ) kay 2013.11.14 2722
2 네이버 맵 (기본 맵 + 마커) kay 2013.05.14 4080
» 스마트 에디터 ( 이미지 업로드 포함 ) 20 kay 2013.05.13 25542
Board Pagination Prev 1 Next
/ 1
CLOSE