반응형
[Javascript] Naver SmartEditor 사용하기 및 입력 글자 수 표시하기
게시글 작성란 등에 사용되는 Editor 중에 SmartEditor와 CKEditor를 사용해보았다.
일단 UI 화면으로는 CKEditor가 훨씬 깔끔하지만, 기능 세팅이나 옵션설정은 SmartEditor가 훨씬 간편하다.
다음에는 CKEditor 사용방법을 알아보기로 하고, 오늘은 SmartEditor 기본 사용방법을 살펴보자.
SmartEditor 에 대한 소개 및 기능은 본 페이지를 참고한다.
네이버 스마트에디터 ONE
모든 창작의 중심. SmartEditor ONE을 소개합니다.
smarteditor.naver.com
일단 기본적으로 사용되는 SmartEditor 생성 시 속성은 다음과 같다.
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"
});
구현 코드
<html>
<body>
<main>
<table id="viewTbl">
<colgroup>
<col width="230px">
<col width="*">
</colgroup>
<tr>
<th>제목</th>
<td scope="col"><input type="text" id="titl" value=""></td>
</tr>
<tr>
<th>내용</th>
<td scope="col">
<textarea style="display:none;" name="ir1" id="ir1" rows="20" cols="100"></textarea>
<p class="count"><span>0</span> / 40000</p>
</td>
</tr>
</table>
</main>
<script>
var EDITORS = [];
window.onload = function() {
// smartEditor 세팅
nhn.husky.EZCreator.createInIFrame({
oAppRef: EDITORS,
elPlaceHolder: "ir1", // textarea id
sSkinURI: "${ctx}/resource/js/smartEditor/SmartEditor2Skin.html", // 경로
fCreator: "createSEditor2",
});
// editor에 글자를 쳤을 때 글자 수 표출되는 이벤트
// setTimeout 을 안하면 iframe이 만들어지기 전에 이벤트가 등록되어 영역을 찾지 못한다
setTimeout(function() {
var ctntarea = document.querySelector("iframe").contentWindow.document.querySelector("iframe").contentWindow.document.querySelector(".se2_inputarea");
ctntarea.addEventListener("keyup", function(e) {
var text = this.innerHTML;
text = text.replace(/<br>/ig, ""); // br 제거
text = text.replace(/ /ig, "");// 공백 제거
text = text.replace(/<(\/)?([a-zA-Z]*)(\s[a-zA-Z]*=[^>]*)?(\s)*(\/)?>/ig, ""); // html 제거
var len = text.length;
document.querySelector(".count span").innerHTML = len;
if(len > 40000) {
alert("최대 40000 byte까지 입력 가능합니다.");
}
});
}, 1000)
}
</script>
</body>
</html>
참고로 SmartEditor 자체적으로 입력한 글자 수를 표출하는 기능을 찾지 못해서 임의로 기능을 넣은 것인데
에디터가 iframe을 통해 생성이 되는 싱크와 이벤트를 거는 싱크가 맞지 않으면 해당 영역을 찾지 못해 이벤트가 걸리지 않아 setTimeout을 준 것이다.
SmartEditor 속성 중 load가 완료된 속성 혹은 이벤트 후처리가 가능한 기능을 공유해주면 감사감사
결과 화면
SmartEditor 압축파일
728x90
반응형
'Front > API' 카테고리의 다른 글
| [Javascript] 자바스크립트 SNS 간편 로그인 API 구현하기 (1) | 2021.05.04 |
|---|---|
| [Javascript] 오픈API 활용한 주소검색 우편번호 가져오기 (1) | 2020.11.08 |
| [JavaScript] JS 라이브러리 daterangepicker 적용하기 (0) | 2019.10.28 |
| [JavaScript] 자바스크립트 달력 라이브러리 Full Calendar 사용 방법 (0) | 2019.07.14 |
댓글