스노우보드 참 좋아하는데 맨날 키보드 앞에만 있네

네이버 스마트에디터 (SmartEditor2)를 이용한 글쓰기 기능 구현 본문

개발/Javascript

네이버 스마트에디터 (SmartEditor2)를 이용한 글쓰기 기능 구현

워너-비 2018. 1. 16. 11:30

네이버 스마트에디터를 이용한 글쓰기 기능 구현




오늘은 무료 웹에디터 툴인 스마트에디터(SmartEditor)를 적용하는 방법에 대해 포스팅하고자 한다.

스마트에디터는 네이버에서 배포한 무료 오픈소스로 웹페이지 게시판에 사용자가 작성할 form인 textarea에 적용할 수 있다.

에디터 형식은 아래와 같이 네이버 블로그 및 카페 게시판과 동일하다.



이하 공식 사이트 설명

SmartEdtitor는 JavaScript로 구현된 웹 기반의 WYSIWYG 편집기이다.

WYSIWYG 모드 및 HTML 편집 모드와 TEXT 모드를 제공하고, 자유로운 폰트 크기 설정 기능, 줄 간격 설정 기능, 단어 찾기/바꾸기 기능 등 편집에 필요한 다양한 기능을 제공하므로 사용자들은 SmartEdtitor를 사용하여 쉽고 편리하게 원하는 형태의 글을 작성할 수 있다.

또한, SmartEdtitor의 구조는 기능을 쉽게 추가할 수 있는 플러그인 구조로 되어 있어 정해진 규칙에 따라 플러그인을 만들기만 하면 된다.



적용방법


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


네이버 오픈소스 github 공지페이지에서 다운로드를 할 수 있다.

압축파일을 다운받아 프로젝트 내부 본인이 원하는 디렉토리에 압축을 해제한다.



2. 스마트에디터 Textarea 에 적용


데이터 전송을 위한 서버, 데이터베이스 연동 및 controller/dao/service/mappers 관련 스크립트는 생략하도록 하겠다.

이하 소스코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>
<html>
<body>
<form name="smartEditorText" method="POST" action="/text/insertText">
    <textarea rows="13" cols="40" id="textTest" name="textTest"></textarea> // id 설정
    <button type = "submit" onclick="submitContents()">전송</button> // onclick 함수 추가
</form>
 
 
 
<script type="text/javascript"
src="../naver-smarteditor2/demo/js/service/HuskyEZCreator.js" charset="utf-8"></script>
<!— 파일 디렉토리에 알맞게 변경 —>
 
<script type="text/javascript">
var oEditors = [];
    
    // Editor Setting
    nhn.husky.EZCreator.createInIFrame({ oAppRef : oEditors,
        elPlaceHolder : "textTest", // 에디터를 적용할 textarea ID에 맞게 변경
        sSkinURI : "../naver-smarteditor2/demo/SmartEditor2Skin.html", // Editor HTML파일 위치로 변경
        fCreator : "createSEditor2", // SE2BasicCreator.js 메소드명으로 변경하면 안된다.
        htParams : { // 툴바 사용 여부 (true/false)
            bUseToolbar : true, // 입력창 크기 조절바 사용 여부 (true/false)
            bUseVerticalResizer : true, // 모드 탭(Editor|HTML|TEXT) 사용 여부 (true/false)
            bUseModeChanger : true // 전송버튼 클릭이벤트
        }
    });
 
function submitContents() {
        // 에디터의 내용이 textarea에 적용
        oEditors.getById["class_tutorIntroduce"].exec("UPDATE_CONTENTS_FIELD", []);
}
</script>



 

참 사용하기 쉬운 오픈소스인데.. 반응형에서 문제가 있다.

반응형 웹앱에서 스마트에디터를 적용해보니 사이즈조절이 정상적으로 작동하지 않는다.

구글링해보니 비슷한 이슈가 많이 있고, 고질적인 문제인듯 하다.

어쩔 수 없이 스마트에디터는 경험으로만 남겨두기로 했다.

부트스트랩과 호환이 잘되는 썸머노트를 적용하여 구현했다.

'개발 > Javascript' 카테고리의 다른 글

[jQuery] 체크박스 실습  (0) 2017.11.06
[JavaScript] 메서드 체이닝(Method Chaining)와 filter(), end()  (0) 2017.11.06
[JavaScript / ECMAScript6] 전개 연산자(바벨)를 사용한 배열 복사와 병합  (0) 2017.10.31
[JavaScript] 참조 복사와 값 복사 (얕은 복사와 깊은 복사)  (1) 2017.10.31
[JavaScript] 객체(Object)  (1) 2017.10.31
공유하기 링크
'개발/Javascript' Related Articles more
Comments