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

 

참조 홈페이지

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

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

 

관련 화면

 

관련 코드

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

 

참조 홈페이지에 들어가서 네이버 스마트에디터를 다운로드한다.

 

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

 

 

resource/static 하위에 smarteditor 폴더 생성 후

다운로드하였던 파일을 넣어준다.

 

에디터를 넣어줄 페이지에 태그 추가

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

 

페이지에 에디터를 넣어줄 <textarea> 태그를 추가한다. name이랑 Id도 까먹지 않고 넣어준다

<div class="smarteditor">
     <textarea name="editorTxt" id="editorTxt" class="editor" rows=40 cols="30" style="width: 100%"></textarea>
</div>

 

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

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

document.addEventListener('DOMContentLoaded', function() {
    appendEditorHtml();
});


/* 에디터 */
function appendEditorHtml() {
    /** 1) 에디터 설정 */
    // 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);
            // 'bardCn' 영역의 내용을 초기화합니다.
            oEditor.getById["editorTxt"].exec("SET_IR", [""]);
            // 'bardCn' 영역에 미리 저장해둔 내용을 설정합니다.
            //if(tempBardCn != null) oEditor.getById["editorTxt"].exec("PASTE_HTML", [ tempBardCn ]);
        }
    });

}

 

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

 

let btnSave = document.getElementById('btnSave')  // 글 저장 버튼


function addEventListnerCRUDBtn(){
    btnSave.addEventListener('click', fnSave);
}


function fnSave() {

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

 

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

UPDATE_CONTENTS_FILED 메시지를 호출한 후 해당 아이디의 value에 저장해야 된다.