[CRUD] 4. 게시글 작성 기능 구현 - 네이버 스마트에디터

네이버 스마트에디터를 통해 게시글을 작성한다. 

 

---

1. 스마트에디터 다운로드 

 

아래 링크에 접속하여 네이버스마트에디터(버전 2.8.2)를 다운받는다.

https://github.com/naver/smarteditor2/releases/tag/v2.8.2.3 

Release v2.8.2.3: archive v2.8.2.4259f59 · naver/smarteditor2

 

---

2. 스마트에디터 적용하기 

 

resources/static 하위에 smarteditor 폴더를 생성한 후 다운 받은 파일을 넣는다.

 

에디터를 사용할 페이지에 <script> 태그를 추가한다. 

<script type="text/javascript" src="/smarteditor/js/HuskyEZCreator.js" charset="utf-8"></script>

 

페이지에 에디터를 사용할 <textarea> 태그를 추가한다. 

다음과 같이 name과 id를 설정한다. 

<textarea name="editorTxt" id="editorTxt" placeholder="내용을 입력해주세요" style="width: 100%; height: 300px;"></textarea>

 

해당 페이지와 연결된 JS에서 에디터를 호출한다. 

let oEditor = []; // 에디터 선언

/* Initialize */
document.addEventListener('DOMContentLoaded', function() {
    console.log("DOMContent");
    /** 에디터 불러오기 */
    appendEditorHtml();
});

function appendEditorHtml() {
    /** 에디터 설정 */
    // nhn.husky.EZCreator.createInIFrame 함수를 호출하여 에디터를 생성합니다.
    nhn.husky.EZCreator.createInIFrame({
        // 모드 변경기를 사용하지 않습니다. (WYSIWYG 및 HTML 모드를 전환할 수 있는 기능)
        bUseModeChanger: false,
        // 세로 리사이저를 사용하지 않습니다. (에디터 높이 조정 기능)
        bUseVerticalResizer: false,
        // 에디터의 객체 참조를 설정합니다.
        oAppRef: oEditor,
        // 에디터를 삽입할 영역의 ID를 지정합니다.
        elPlaceHolder: 'editorTxt',
        // 에디터의 스킨 파일 경로를 설정합니다.
        sSkinURI: '/smarteditor/SmartEditor2Skin.html',
        // 에디터의 생성자 함수를 지정합니다.
        fCreator: 'createSEditor2',
        htParams : {
            // 추가 글꼴 목록을 설정합니다.
            aAdditionalFontList : [["Noto Sans KR", "Noto Sans"]],
            // 기본 글꼴 설정을 지정합니다
            SE2M_FontName : {
                htMainFont: {'id': '돋움','name': '돋움', 'url': '','cssUrl': ''}
            },
            // 페이지 이동 시 확인창이 나오지 않도록 처리하는 함수를 설정합니다.
            fOnBeforeUnload : function() { }
        },
        // 에디터 로딩이 완료된 후 실행되는 콜백 함수입니다.
        fOnAppLoad: function() {
            // 'editorTxt' 영역에 기본 글꼴을 설정합니다. (글꼴: "Noto Sans KR", 크기: 11)
            oEditor.getById['editorTxt'].setDefaultFont( "돋움", 11);
            // 'editorTxt' 영역의 내용을 초기화합니다.
            oEditor.getById["editorTxt"].exec("SET_IR", [""]);
        }
    });
}

 

---

3. 에디터에 입력한 내용 가져오기 

 

에디터에 작성한 내용은 .getElementById("editorTxt").value로 가져오기 전에 

UPDATE_CONTENTS_FIELD 메시지를 호출한 후 해당 아이디의 value에 적용시켜야 한다. 

function fnSave() {

    let title = document.getElementById('title').value;                // 글 제목
    oEditor.getById["editorTxt"].exec("UPDATE_CONTENTS_FIELD", []);    // 에디터 글 내용 가져오기
    let content = document.getElementById("editorTxt").value;          // 글 내용 검사 

}