jQuery를 적용한 다음에디터 기본연동 및 서버에 입력내용 전송법

스마트에디터 연동 및 사진 첨부 방법에 이어서

2014/10/29 - [코드저장소/스마트에디터연동] - 네이버 스마트에디터 기본연동법 및 서버에 입력값 전송하기

2014/10/29 - [코드저장소/스마트에디터연동] - 네이버 스마트에디터 사진첨부기능을 이용하여 에디터에 이미지 추가하기+다중파일업로드 포함

다음에디터 연동 및 서버에 컨텐츠 내용 전송하는 방법에 대하여 포스팅 하도록 하겠습니다.

https://github.com/daumcorp/DaumEditor

위사이트 접속하여 다운로드버튼을 클릭하여 에디터 압축파일을 다운받도록 합니다.

다운이 완료되었다면 압축해제 후 daumeditor 디렉토리를 들어가시면 하단 파일들이 존재합니다.

위에 있는 파일들중 네모친 파일들을 모두 본인의 프로젝트 경로에 include 하도록 합니다.

※ converting.html,editor.html,editor_multi.html 은 필요가 없으므로 넣어주셔도 되고 않넣어주셔도 됩니다.

저는 daumeditor라는 디렉토리를 생성후 하단에 모두 include 해주었습니다.

그리도 daumeditor 디렉토리 밑에 하단 파일을 include 해주세요.

editor_frame.html

스마트에디터의 경우 iframe 내에 에디터프레임을 그려주는데 비해 

다음에디터의 경우는 html코드자체를 페이지 내에 직접 작성하므로 

한페이지에 코드량이 상당히 길어집니다.

editor_frame.html 페이지에 별도로 에디터프레임 태그들만 넣어놓은 것입니다.

※ 만약 에디터 소스들을 넣어놓은 디렉토리명이 "daumeditor"가 아니라면 

다운받아서 넣어주신 editor_frame.html 페이지내에 /daumeditor/ 경로를

    자신의 경로에 맞춰주셔야 합니다.

이어서 에디터 출력코드를 작성하기 위한 html 파일을 하나 생성하겠습니다.

저는 index.html 파일을 WEB-ROOT에 생성하였습니다.

먼저  필요한 css파일 및  js파일을 include 해주도록 합니다.

<link rel="stylesheet" href="/daumeditor/css/editor.css" type="text/css" charset="utf-8"/>
<script src="/daumeditor/js/editor_loader.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>

이어서 HTML 폼구조를 다음과 같이 작성해줍니다.

<!-- 에디터 시작 -->
<div>
	<form name="frm" id="frm" action="/send.jsp" method="post" accept-charset="utf-8">
		<!-- 에디터프레임호출 영역 -->
		<div id="editor_frame"></div>
		<!-- 실제 값이 담겨져서 넘어갈 textarea 태그 -->
		<textarea name="daumeditor" id="daumeditor" rows="10" cols="100" style="width:766px; height:412px;display: none;"></textarea>
		<input type="button" id="save_button" value="내용전송"/>
	</form>
</div>
<!-- 에디터 끝 -->

마지막으로 editor_frame div태그내에 

다음에디터프레임을 적용하기 위한 코드와

내용전송 버튼 클릭시 send.jsp 페이지로 다음에디터에 입력한 

컨텐츠 내용값을 전송하기 위한 submit 기능에 대한 스크립트 코드입니다.

$(function(){
		$.ajax({
		    url : "/daumeditor/editor_frame.html",
		    success : function(data){
		    	$("#editor_frame").html(data);
		    	// 에디터UI load
		    	var config = {
		    		/* 런타임 시 리소스들을 로딩할 때 필요한 부분으로, 경로가 변경되면 이 부분 수정이 필요. ex) http://xxx.xxx.com */
		    		txHost: '', 
		    		/* 런타임 시 리소스들을 로딩할 때 필요한 부분으로, 경로가 변경되면 이 부분 수정이 필요. ex) /xxx/xxx/ */
		    		txPath: '', 
		    		/* 수정필요없음. */
		    		txService: 'sample', 
		    		/* 수정필요없음. 프로젝트가 여러개일 경우만 수정한다. */
		    		txProject: 'sample',
		    		/* 대부분의 경우에 빈문자열 */
		    		initializedId: "", 
		    		/* 에디터를 둘러싸고 있는 레이어 이름(에디터 컨테이너) */
		    		wrapper: "tx_trex_container",
		    		/* 등록하기 위한 Form 이름 */
		    		form: "frm", 
		    		/*에디터에 사용되는 이미지 디렉터리, 필요에 따라 수정한다. */
		    		txIconPath: "/daumeditor/images/icon/editor/", 
		    		/*본문에 사용되는 이미지 디렉터리, 서비스에서 사용할 때는 완성된 컨텐츠로 배포되기 위해 절대경로로 수정한다. */
		    		txDecoPath: "/daumeditor/images/deco/contents/", 
		    		canvas: {
		    			styles: {
		    				/* 기본 글자색 */
		    				color: "#123456", 
		    				/* 기본 글자체 */
		    				fontFamily: "굴림", 
		    				/* 기본 글자크기 */
		    				fontSize: "10pt", 
		    				/*기본 배경색 */
		    				backgroundColor: "#fff", 
		    				/*기본 줄간격 */
		    				lineHeight: "1.5", 
		    				/* 위지윅 영역의 여백 */
		    				padding: "8px"
		    			},
		    			showGuideArea: false
		    		},
		    		events: {
		    			preventUnload: false
		    		},
		    		sidebar: {
		    			attachbox: {
		    				show: true,
		    				confirmForDeleteAll: true
		    			}
		    		},
		    		size: {
		    			/* 지정된 본문영역의 넓이가 있을 경우에 설정 */
		    			contentWidth: 700 
		    		}
		    	};
		    	
		    	//에디터내에 환경설정 적용하기
	    		new Editor(config);
		    }
		});
		
		//form submit 버튼 클릭
		$("#save_button").click(function(){
			//다음에디터가 포함된 form submit
			Editor.save();
		})
	})
	
	
	//Editor.save() 호출 한 다음에 validation 검증을 위한 함수 
	//validation 체크해줄 입력폼들을 이 함수에 추가 지정해줍니다.
	function validForm(editor) {
		var validator = new Trex.Validator();
		var content = editor.getContent();
		if (!validator.exists(content)) {
			alert('내용을 입력하세요');
			return false;
		}
		return true;
	}
	 
    //validForm 함수까지 true값을 받으면 이어서 form submit을 시켜주는  setForm함수
	function setForm(editor) {
        var content = editor.getContent();
        $("#daumeditor").val(content)
        return true;
	}

위에 코드중 다음에디터 SUBMIT 실행과정은 다음과 같습니다.

1. Editor.save()

    submit기능의 첫단계

2. validForm() 

    다음에디터 내에 자체적으로 호출되는 함수입니다.  

    폼필드내에 입력태그들에 대한 validation 처리를 해당 함수에서 처리해주시면 되겠습니다.

3. setForm() 

    최종적으로 submit 전송전에 display:none 해놓은 실제로 컨텐츠 내용을 서버로 전송해 줄 textarea에 

    다음에디터에 입력된 내용을 넣어주는 작업함수입니다

그리고 /daumeditor/js/editor.js 파일을 보시면 

약 89번째 라인에 "trex/attachbox/attachbox_ui.js", 라는 코드가 있는데

 주석처리 해주십니다.

사진첨부가 되면 어떠한 박스내에 파일정보를 추가해주는건대

 별 의미없는 기능이라 생각되어 사용하지 않기로 했습니다.

실행 해보시면  에디터 우측하단에 "DEVELOPMENT MODE" 라고 출력이 되는데 보기 싫습니다요잉~ 

출력을 원하지 않다면 "/daumeditor/js/development_environments.js" 파일 58번째 줄에 있는

indicator.innerHTML = "DEVELOPMENT MODE";

위 코드를 주석처리 해주세요. 

그럼 문구가 사라집니다.

에디터 실행화면

에디터 서버 전송 결과

네이버 스마트와 동일하게 서버에 정상적으로 값이 전송된 것을 확인 할 수 있었습니다.

다음에는네이버 스마트에디터와 동일한 사진첨부 관련 포스팅을 진행하도록 하겠습니다.

by 개발로짜