다중 스마트에디터 폼 구현 방법 (영상 有)

 

 

안녕하세요.

오늘은 게시판 글을 쓸때, 각각 다른 폼의 스마트에디터를 사용하는 방법에 대해 알아보겠습니다.

구현 영상을 보시면 상태값을 바꿀대마다 각각의 폼이 변경하는걸 알 수 있습니다.

 

 

 

 

 

---

 

 

 

HuskyEZCreator.js

0.00MB

jquery-1.11.3.min.js

0.09MB

 

우선 스마트에디터의 자바스크립트 파일을 선언할 경로에 넣어줍니다.

(제이쿼리는 기본적으로 있어야 작동합니다.)

 

 

 

HTML

 

 

<div class="bbs_write">
<table class="write_1" width="100%" cellspacing="0" summary=""> 
<caption></caption>
<colgroup>
<col width="15%" />
<col />
</colgroup>
<tbody>
    
<tr>
    <th>구인/구직</th>
    <td> 
        <select id="pd_jobcheck" name="pd_jobcheck" style="width:150px;" onchange="formChange();">
            <option value="1">구인</option>
            <option value="2">구직</option>
        </select>
    </td>
</tr>
 
<tr id="employ">
    <th>본문</th>
    <td>
        <textarea id="pd_content1" name="pd_content" rows="4" cols="110">
        </textarea>
    </td>
</tr>
<tr id="jobhunting" style="display:none;">
    <th>본문</th>
    <td>
        <textarea id="pd_content2" name="pd_content" rows="4" cols="110">
        </textarea>
    </td>
</tr>
</tbody>
</table>
</div>

 

HTML에서는 폼만 들어주고 대부분의 기능은 스크립트에서 진행하기때문에 별다른 건 없습니다.

특이사항은

구인/구직 폼을 변경할때 onchange로 이벤트를 주는것과,

본문 부분을 2개 만들어서 하나는 display:none 으로 감쳐주는 설정을 합니다.

여기서 주의할 점은 두개의 에디터를 사용하기 때문에 아이디를 1과 2로 나눠야합니다.

 

 

 

 

 

 

 

 

 

SCRIPT

 

 

 

<script type="text/javascript" src="${pageContext.request.contextPath}/smarteditor/js/HuskyEZCreator.js" charset="utf-8"></script>
<script charset="utf-8" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js" ></script>
<script type="text/javascript">
 
var oEditors1 = [];
var oEditors2 = [];
 
    
$(function(){
 
//___________ 에디터 쓸 부분 ________________________
 
nhn.husky.EZCreator.createInIFrame({
    oAppRef: oEditors1,
    elPlaceHolder: "pd_content1",
    sSkinURI: contextPath+"/smarteditor/SmartEditor2Skin.html",    
    htParams : {bUseToolbar : true,
        fOnBeforeUnload : function(){
            
        }
    }, //boolean
    fOnAppLoad : function(){
        //기존 저장된 내용의 text 내용을 에디터상에 뿌려주고자 할때 사용
        oEditors1.getById["pd_content1"].exec("PASTE_HTML", ["공고제목 : <br> 모집분야 : <br>교용형태 :  <br>모집인원 : <br>성별 : <br>연령 : <br>학력 : <br>자격조건 : <br>우대조건 : <br>급여 : <br>복리후생 :<br>근무회사명 : <br>근무지주소 :  <br>모집종료일 : <br>접수방법 : <br>담당자명 : <br>연락처 : <br>이메일 : <br>팩스번호 :"]);
    },
    fCreator: "createSEditor2" 
});
 
    //___________ 에디터 쓸 부분 ________________________
 
});
 
function fn_submit(){
 
 
if (!confirm('저장하시겠습니까?')) {
    return false;
}
 
var jobcheck = $("#pd_jobcheck").val();
 
if(jobcheck == 1){
    oEditors1.getById["pd_content1"].exec("UPDATE_CONTENTS_FIELD", []);    // 에디터의 내용이 textarea에 적용됩니다.
    $("#pd_content2").remove();
}else if(jobcheck == 2){
    oEditors2.getById["pd_content2"].exec("UPDATE_CONTENTS_FIELD", []);    // 에디터의 내용이 textarea에 적용됩니다.
    $("#pd_content1").remove();
}else{
    oEditors.getById["pd_content"].exec("UPDATE_CONTENTS_FIELD", []);    // 에디터의 내용이 textarea에 적용됩니다.
}
 
 
}
 
 
function formChange(){
var jobcheck = $("#pd_jobcheck").val();
if(jobcheck == 1){
    $("#employ").show();
    $("#jobhunting").hide();
}else{
    $("#employ").hide();
    $("#jobhunting").show();
    
    
    $(".bbs_write").each(function(){
        if($("#jobhunting").hasClass("onepoint") == false){
            
            $("#jobhunting").addClass("onepoint");
            
            
            nhn.husky.EZCreator.createInIFrame({
                oAppRef: oEditors2,
                elPlaceHolder: "pd_content2",
                sSkinURI: contextPath+"/smarteditor/SmartEditor2Skin.html",    
                htParams : {bUseToolbar : true,
                    fOnBeforeUnload : function(){
                        
                    }
                }, //boolean
                fOnAppLoad : function(){
                    //기존 저장된 내용의 text 내용을 에디터상에 뿌려주고자 할때 사용
                    oEditors2.getById["pd_content2"].exec("PASTE_HTML", ["성명 : <br>나이 : <br>성별 : <br>주소 : <br>연락처 : <br>이메일 : <br>학력 :  <br>경력 : <br>지원분야 : <br>근무형태 : <br>근무기간 : <br>자격증 현황 : <br>희망근무지역 :  <br>희망급여 : <br>자기소개서 :"]);
                },
                fCreator: "createSEditor2" 
            });
        }
    });    
    
}
}
 
 
</script>

 

 

우선 js 파일을 사용하기 위해서 가장 위에 경로를 설정해줍니다.

 

 

 

 

참고로

스마트에디터를 여러개 사용할때는 

nhn.husky.EZCreator.createInIFrame({ 의 구분자 항목인

oAppRef 와 elPlaceHolder을 각각 별도로 사용해야합니다.

저는 oEditors1 / pd_content1 과 oEditors2 / pd_content2로 사용하였습니다.

 

 

 

 

 

 

이젠 정리해보겠습니다.

 

 

 

가장 기본적으로 페이지가 실행될 때

실행되는 부분( $(function(){ )에서  pd_content1이 에디터가 될 수 있도록 설정해줍니다.

그리고 저장될 내용들을 작성해줍니다.

 

 

 

 

fn_submit에서는 글을 저장하기전의 함수인데,

구인/구직의 콤보박스 값인 pd_jobcheck를 넣어주고

1일 경우는 1에대한 값을 넣고 pd_content2를 삭제해줍니다.

2일 경우는 반대로하면 되는것이죠!

 

 

 

 

formChange 함수에서는 

구인/구직 콤보박스값이 바뀔때마다 

본문의 tr 태그의 id값들을 설정해 show/hide 처리를 해줍니다.

그리고 반복문을 설정해서 구직부분에 클래스가 없다면 클래스를 삽입해주고

구직에 대한 에디터를 생성해줍니다.

이 부분이 없으면 계속 값이 새로고침이 될 것입니다.

 

 

 

 

 

반응형

 

 

 

 

전체소스

 

<script type="text/javascript" src="${pageContext.request.contextPath}/smarteditor/js/HuskyEZCreator.js" charset="utf-8"></script>
<script charset="utf-8" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js" ></script>
 
 
<script type="text/javascript">
 
var oEditors1 = [];
var oEditors2 = [];
 
    
$(function(){
 
//___________ 에디터 쓸 부분 ________________________
 
nhn.husky.EZCreator.createInIFrame({
    oAppRef: oEditors1,
    elPlaceHolder: "pd_content1",
    sSkinURI: contextPath+"/smarteditor/SmartEditor2Skin.html",    
    htParams : {bUseToolbar : true,
        fOnBeforeUnload : function(){
            
        }
    }, //boolean
    fOnAppLoad : function(){
        //기존 저장된 내용의 text 내용을 에디터상에 뿌려주고자 할때 사용
        oEditors1.getById["pd_content1"].exec("PASTE_HTML", ["공고제목 : <br> 모집분야 : <br>교용형태 :  <br>모집인원 : <br>성별 : <br>연령 : <br>학력 : <br>자격조건 : <br>우대조건 : <br>급여 : <br>복리후생 :<br>근무회사명 : <br>근무지주소 :  <br>모집종료일 : <br>접수방법 : <br>담당자명 : <br>연락처 : <br>이메일 : <br>팩스번호 :"]);
    },
    fCreator: "createSEditor2" 
});
 
    //___________ 에디터 쓸 부분 ________________________
 
});
 
function fn_submit(){
 
 
if (!confirm('저장하시겠습니까?')) {
    return false;
}
 
var jobcheck = $("#pd_jobcheck").val();
 
if(jobcheck == 1){
    oEditors1.getById["pd_content1"].exec("UPDATE_CONTENTS_FIELD", []);    // 에디터의 내용이 textarea에 적용됩니다.
    $("#pd_content2").remove();
}else if(jobcheck == 2){
    oEditors2.getById["pd_content2"].exec("UPDATE_CONTENTS_FIELD", []);    // 에디터의 내용이 textarea에 적용됩니다.
    $("#pd_content1").remove();
}else{
    oEditors.getById["pd_content"].exec("UPDATE_CONTENTS_FIELD", []);    // 에디터의 내용이 textarea에 적용됩니다.
}
 
 
}
 
 
function formChange(){
var jobcheck = $("#pd_jobcheck").val();
if(jobcheck == 1){
    $("#employ").show();
    $("#jobhunting").hide();
}else{
    $("#employ").hide();
    $("#jobhunting").show();
    
    
    $(".bbs_write").each(function(){
        if($("#jobhunting").hasClass("onepoint") == false){
            
            $("#jobhunting").addClass("onepoint");
            
            
            nhn.husky.EZCreator.createInIFrame({
                oAppRef: oEditors2,
                elPlaceHolder: "pd_content2",
                sSkinURI: contextPath+"/smarteditor/SmartEditor2Skin.html",    
                htParams : {bUseToolbar : true,
                    fOnBeforeUnload : function(){
                        
                    }
                }, //boolean
                fOnAppLoad : function(){
                    //기존 저장된 내용의 text 내용을 에디터상에 뿌려주고자 할때 사용
                    oEditors2.getById["pd_content2"].exec("PASTE_HTML", ["성명 : <br>나이 : <br>성별 : <br>주소 : <br>연락처 : <br>이메일 : <br>학력 :  <br>경력 : <br>지원분야 : <br>근무형태 : <br>근무기간 : <br>자격증 현황 : <br>희망근무지역 :  <br>희망급여 : <br>자기소개서 :"]);
                },
                fCreator: "createSEditor2" 
            });
        }
    });    
    
}
}
 
 
</script>
 
 
 
 
<div class="bbs_write">
<table class="write_1" width="100%" cellspacing="0" summary=""> 
<caption></caption>
<colgroup>
<col width="15%" />
<col />
</colgroup>
<tbody>
    
<tr>
    <th>구인/구직</th>
    <td> 
        <select id="pd_jobcheck" name="pd_jobcheck" style="width:150px;" onchange="formChange();">
            <c:forEach var="result" items="${jobsearchList}" varStatus="status">
            <option value="${result.main_code}">${result.code_name}</option>
            </c:forEach>
            
        </select>
    </td>
</tr>
 
<tr id="employ">
    <th>본문</th>
    <td>
        <textarea id="pd_content1" name="pd_content" rows="4" cols="110">
        </textarea>
    </td>
</tr>
<tr id="jobhunting" style="display:none;">
    <th>본문</th>
    <td>
        <textarea id="pd_content2" name="pd_content" rows="4" cols="110">
        </textarea>
    </td>
</tr>
</tbody>
</table>
</div>