네이버 스마트에디터 사용하기

안녕하세요

그럼 스마트 에디터 사용하는 방법에 대해 포스팅 하겠습니다.

스마트 에디터는 네이버에서 제작한 에디터입니다.

1. 설치하기

다운로드 url : http://dev.naver.com/projects/smarteditor/download

위 url로 접속하면 네이버에서 제공하는 스마트에디터를 다운받을 수 있어요.

무료라서 참 좋아요.

2. 기능 사용하기

가이드 url : http://jindo.dev.naver.com/smarteditor/user_guide/

3. 빠른 시작

1) 다운로드 한 파일을 호스팅에 설치한다.

2) textarea 태그를 사용한다.

3) javascript 소스 작성

<script type="text/javascript">

var oEditors = [];

nhn.husky.EZCreator.createInIFrame({

    oAppRef: oEditors,

    elPlaceHolder: "ir1",

    sSkinURI: "../se2/SmartEditor2Skin.html",

    fCreator: "createSEditor2"

});

</script>

4) 저장 이벤트

// ‘저장’ 버튼을 누르는 등 저장을 위한 액션을 했을 때 submitContents가 호출된다고 가정한다.

function submitContents(elClickedObj) {

    // 에디터의 내용이 textarea에 적용된다.

    oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);

 

    // 에디터의 내용에 대한 값 검증은 이곳에서

    // document.getElementById("ir1").value를 이용해서 처리한다.

 

    try {

        elClickedObj.form.submit();

    } catch(e) {}

}

출저 - 네이버

여기까지가 프론트 작업 내용입니다.

백엔드 작업은 직접 사용하시는 방법에 따라서 처리하시면 되세요.

위 submitContents 메서드는 스마트에디터에 작성된 내용은 

html 태그를 텍스트로 변환하여 해당 id에 value를 전달합니다.

이 내용을 form 태그를 사용하거나 또는 ajax를 사용해서 서버로 보내면 되시겠죠?

추가 팁 - 폰트 사이즈가 몇가지 많이 업어요. 더 추가하고 싶어서 소스를 보던 중에 

SmartEditor2Skin.html 에서 폰트 사이즈를 추가했더니 추가가 되네요

<li><button type="button"><span style=" font-size:7px;"><span style="font-size:17px;">7px</span></span></button></li>

저는 px 형태로 추가 했는데 알아서 pt 형태로 변경해서 올려주네요.