한페이지에 스마트에디터 여러개 띄우고 각각 이미지 첨부하기

장상휘님께서 질문하신 한페이지에 에디터 2개를 띄울경우,  사진첨부를 에디터마다 할수 있는지에 대한 

문의를 해주셔서 간단하게나마 샘플링을 올리게 되었습니다.

2014/07/17 - [에디터연동/NAVER-스마트에디터] - 네이버의 스마트에디터를 연동해보고 서버에 내용을 전달해보자

2014/07/25 - [에디터연동/NAVER-스마트에디터] - 스마트에디터(smarteditor)의 싱글/멀티 이미지업로드하기 - JAVA/JSP 버전

위 두 포스팅의 방법으로 연동이 되었다 가정한 다음에 진행 하도록 하겠음.

기존 wirte.jsp 스크립트 코드(추가부분 주석표시)

var oEditors = [];
////////////추가
var oEditors2 = [];
$(function(){
	nhn.husky.EZCreator.createInIFrame({
		oAppRef: oEditors,
		elPlaceHolder: "ir1", 
		sSkinURI: "/editor/SmartEditor2Skin.html",	
		htParams : {
			// 툴바 사용 여부 (true:사용/ false:사용하지 않음)
			bUseToolbar : true,				
			// 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
			bUseVerticalResizer : true,		
			// 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
			bUseModeChanger : true,			
			fOnBeforeUnload : function(){
				
			}
		}, 
		fOnAppLoad : function(){
			//기존 저장된 내용의 text 내용을 에디터상에 뿌려주고자 할때 사용
			oEditors.getById["ir1"].exec("PASTE_HTML", ["기존 DB에 저장된 내용을 에디터에 적용할 ㅁ"]);
		},
		fCreator: "createSEditor2"
	});
	////////////추가
	nhn.husky.EZCreator.createInIFrame({
		oAppRef: oEditors2,
		elPlaceHolder: "ir2", 
		sSkinURI: "/editor/SmartEditor2Skin.html",	
		htParams : {
			// 툴바 사용 여부 (true:사용/ false:사용하지 않음)
			bUseToolbar : true,				
			// 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
			bUseVerticalResizer : true,		
			// 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
			bUseModeChanger : true,			
			fOnBeforeUnload : function(){
				
			}
		}, 
		fOnAppLoad : function(){
			//기존 저장된 내용의 text 내용을 에디터상에 뿌려주고자 할때 사용
			oEditors2.getById["ir2"].exec("PASTE_HTML", ["에디터 두번째!!!"]);
		},
		fCreator: "createSEditor2"
	});
	$("#save").click(function(){
		oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);
		////////////추가
		oEditors2.getById["ir2"].exec("UPDATE_CONTENTS_FIELD", []);
		$("#frm").submit();
	})
})

BODY태그내 HTML 코드

<form id="frm" action="/insert.jsp" method="post">
	<table width="100%">
		<tr>
			<td>제목</td>
			<td><input type="text" name="title" /></td>
		</tr>
		<tr>
			<td>내용</td>
			<td>
				<textarea rows="10" cols="30" id="ir1" name="content" style="width:766px; height:412px; "></textarea>
			</td>
		</tr>
		<!-- 추가 -->
		<tr>
			<td>내용2</td>
			<td>
				<textarea rows="10" cols="30" id="ir2" name="content2" style="width:766px; height:412px; "></textarea>
			</td>
		</tr>
		
		<tr>
			<td colspan="2">
				<input type="button" id="save" value="저장"/>
				<input type="button" value="취소"/>
			</td>
		</tr>
	</table>
	</form>

insert.jsp 추가 코드

※ 화면에서 서버페이지로 정상적으로 에디터값이 넘어오는지 확인하기 위함

//제대로 utf-8환경이 아니라 한글 깨짐 그래서 임의로 추가
request.setCharacterEncoding("utf-8");
System.out.println("제목:"+request.getParameter("title"));
System.out.println("내용:"+request.getParameter("content"));
System.out.println("내2용:"+request.getParameter("content2"));

실 행 결 과

1) 첫번째 에디터 사진첨부

2) 첫번째 에디터 추가완료

3) 두번째 에디터 사진첨부

4) 두번째 에디터 추가완료

5) 저장버튼 클릭후 서버페이지에서 받은 데이터값

정상적으로 각에디터에 사진첨부 와 데이터 전송이 각각 잘되는것을 확인하였음