스마트 에디터 ( 이미지 업로드 포함 )

by kay posted May 13, 2013
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

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

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

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 폴더안에 있으니 참고하세요