네이버 에디터 사용 완벽 정리

프로젝트를 하다보면 에디터 기능이 필요한 경우가 많습니다.
발주처나 회사에 돈이 많아 프로젝트 비용이 많이 측정 된다면 상용으로 좋은 에디터를 구매하여 사용하면 좋겠지만 대부분은 그렇지 못하줘...;;;

이럴때 사용하는 것이 무료 에디터인데요. 대표적으로 네이버에서 제공하는 smarteEditor를 사용하는 경우가 많습니다. 사용도 그리 어렵지 않고 옵션들도 많거든요.

하여 오늘은 네이버 에디터 사용 완벽 정리해 보겠습니다.


<!--  에디터를 위해서 include 해야할 자바스크립트 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/smarteditor/js/HuskyEZCreator.js" charset="utf-8"></script>
먼저 html에서 form 태크 위에 자바스크립트로 위와 같이 include해줘야 합니다.

그리고 form 태그에는 아래와 같이 textarea를 사용하고 id를 설정합니다.
저는 textarea id를 content로 설정했습니다.

<form id="frm" name="frm" method="post">

    <table class="list_tbl mt5" summary="서식명, 서식구분을 보여주는 테이블">
     <caption>서식추가 Email</caption>
     <colgroup>
         <col width="100%" />
     </colgroup>
     <tbody>
         <tr>
             <td>
                <textarea name="content" id="content" rows="10" cols="80" style="width:100%; height:180px; display:none;"></textarea>
             </td>
         </tr>
     </tbody>
 </table>

</form>



마지막으로 form 태그가 닫히는 곳 밑으로 textarea와 smartEditor를 아래와 같이 매핑시키면서 셋팅해주는 작업을 해주면 완성 입니다.
<script type="text/javascript" language="javascript">
var oEditors = [];
nhn.husky.EZCreator.createInIFrame(
{
    oAppRef       : oEditors,
    elPlaceHolder : "content",      // textarea ID
    sSkinURI      : "../resources/smarteditor/SmartEditor2Skin.html",   //스킨 html  - 다국어 지원을 위해서 프로그램적인 처리 하면 좋을듯
    htParams      :
    {
        bUseToolbar         : true,     // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
        bUseVerticalResizer : true,     // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
        bUseModeChanger     : true,     // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
        //aAdditionalFontList : aAdditionalFontSet,     // 추가 글꼴 목록
        fOnBeforeUnload : function()
        {
            //alert("완료!");
        }
    }, //boolean
    fOnAppLoad : function()
    {
        // Editor 에 값 셋팅
        oEditors.getById["content"].exec("PASTE_HTML", [""]);
    },
    fCreator: "createSEditor2"
});
</script>


에디터의 글을 찾을 때는 oEditors.getById["content"].getIR() 요런 식으로 값을 찾아주면 됩니다.








이상으로 네이버 에디터 사용 방법에 대해서 알아보았습니다.
오늘도 행복한 하루되세요~~~^^