• 분류 전체보기 (160)
    • 개인프로젝트 (5)
      • 시연영상모음 (4)
      • 주저리주저리.. (1)
    • 자바스크립트이야기 (69)
      • ExtJS (30)
      • ExtJS 유의사항 (3)
      • HTML5 (1)
      • jQuery (17)
      • jQuery플러그인소개 (9)
      • jQuery UI 소개 (9)
    • 스프링연동하기 (23)
      • spring3 mvc 설정 (4)
      • spring3 mybatis 설정 (4)
      • spring3 기타설정 (11)
      • ibatis and mybatis (4)
    • DB (26)
      • MySQL vs MS-SQL vs O.. (5)
      • MySQL (10)
      • MSSQL (5)
      • Oracle (6)
    • 서버에웹환경구축하기 (13)
      • 1.VirtualBox+CentOS .. (5)
      • 2.JAVA(JDK) 설치 (1)
      • 3.Apache+Tomcat 설치 (3)
      • 4,SVN Server 설치 (1)
      • 5.마리아DB(MariaDB) 설치 (2)
      • 6.몽고DB(MongoDB)설치 (1)
    • 샘플소스 (14)
      • 샘플소스(JAVA) (7)
      • 샘플소스(JSTL) (4)
      • 샘플소스(jQuery/스크립트) (3)
    • 에디터연동 (5)
      • NAVER-스마트에디터 (4)
      • DAUM-다음에디터 (1)
    • 블로그팁 (3)
    • 디지털이야기 (2)
댓글
/152
2014. 8. 20. 09:42
한페이지에 스마트에디터 여러개 띄우고 각각 이미지 첨부하기

장상휘님께서 질문하신 한페이지에 에디터 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) 저장버튼 클릭후 서버페이지에서 받은 데이터값





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

저작자표시 비영리 변경금지 (새창열림)

'에디터연동 > NAVER-스마트에디터' 카테고리의 다른 글

Spring3을 이용한 스마트에디터(smarteditor) 이미지업로드(+html5) 적용하기  (50) 2014.09.21
스마트에디터(smarteditor)의 싱글/멀티 이미지업로드하기 - JAVA/JSP 버전  (73) 2014.07.25
네이버의 스마트에디터를 연동해보고 서버에 내용을 전달해보자  (12) 2014.07.17

티스토리툴바