taeho's life logger

그누보드5에 포함된 네이버 스마트에디터 사용법 및 에디터 높이 변경 방법 본문

Web/DB/Dev

그누보드5에 포함된 네이버 스마트에디터 사용법 및 에디터 높이 변경 방법

taeho Tae-Ho 2015.02.26 11:26

게시판과 같은 글쓰기 기능이 포함된 웹페이지를 만들 때 가장 간단한 방법은 HTML 태그 중에서 <textarea></textarea>을 사용하는 것이다. 하지만 이 태그는 너무도 단순해서 HTML 코드나 이미지 첨부 또는 폰트 크기나 색상의 변경 등을 처리할 수 없는 단점이 있다. 그래서 사실상 거의 사용되지 않는다고 보는 것이 좋다.

그누보드5(GNUBOARD5) 베타에 포함되어 있는 CKEditor

그 대안으로 사용되는 것이 CKEditor와 같은 javascript로 만들어진 에디터다. 아래 화면은 내가 개발해 사용 중인 프로젝트 및 일정관리 시스템의 일정 등록 화면이다. 수행업무 내역을 입력하는 노란색 상자 내부가 CKEditor다. 게시판으로 함께 사용중인 그누보드5(beta)에 CKEditor가 포함되어 있어서 그 CKEditor를 그대로 사용했다.



위 화면의 소스를 들여다 보면 <textarea></textarea>가 존재하며 <textarea>태그에 id와 name 속성을 지정하고 아래에서 해당 id를 가진 textarea 객체를 javascript로 만든 에디터 객체로 대체(?)하는 형태를 띄고 있다.


<!-- 글쓰기 기능을 가진 페이지의 <header></header>부분에 아래 포함

<!-- 아래는 그누보드 5(beta)의 CKEDITOR를 사용하기 위한 설정 -->

<script src= "/plugin/editor/ckeditor4/ckeditor.js"></script>

<script>

var g5_editor    = "ckeditor4";

var g5_editor_url = "/plugin/editor/ckeditor4";

</script>

<!-- 그누보드5(beta)에 설치된 CKEDITOR를 사용하는 설정 -->


<!-- 실제 글쓰기 부분에서는 아래 처럼 사용 -->

<tr>

<td>내용</td>

<td colspan=3><textarea name="desc" id="desc" class="ckeditor" wrap="VIRTUAL">

수행업무내역을 상세히 입력합니다.

</textarea>

<script language="javascript">

    /* 그누보드5(beta)의 CKEditor 에디터설정을 그대로사용할 때... */

var editor=CKEDITOR.replace('desc'); 

</script>


</td>

</tr>


이런 에디터를 사용하면 본문에 이미지를 첨부하거나 표를 만들어 넣거나 또는 제목 등을 표시하는 것이 가능하다. 간단한 문서편집기 기능을 수행하기 때문이다. 


이 CKEditor는 <textarea></textarea> 태그에 rows 속성과 cols 속성을 주면 크기 설정이 자동으로 되어 편리했다.


그누보드5 정식버전에 포함되어 있는 네이버스마트에디터2.0


하지만 그누보드5 정식버전에는 CKEditor가 아닌 Naver에서 개발하여 무료로 배포하고 있는 SmartEditor 가 포함되어 있다. CKEditor보다 조금 더 무겁긴 하지만 사용자 입장에서 익숙하고 조금 더 스마트하기 때문에 많이 사용되고 있다. 2015년 2월 20일 경 다운로드 받은 그누보드5.0.30에는 2.3 버전이 포함되어 있다.


앞의 프로젝트 일정관리 화면의 CKEditor를 Naver SmartEditor2 버전으로 교체한 화면이다.



CKEditor 보다 조금 더 깔끔한 스타일을 보여준다. 물론 CKEditor의 스킨을 더 스마트한 버전으로 교체하면 동일한 수준으로 사용할 수 있다.


이 네이버 스마트에디터도 <textarea></textarea> 객체를 대체하는 형식으로 만들어져 있기에 소스수준에서의 적용방법은 거의 동일하다. 다만 Naver SmartEditor의 경우 <textarea></textarea> 태그의 cols 속성은 동작하나 rows 속성은 제약이 있다. 스마트에디터의 최소 높이가 소스 내부적으로 고정되어 있어 일정 높이 이하로 높이를 줄일 수 없게 되어 있다.

위 화면의 Naver SmartEditor2의 사용 예제 소스를 보면 다음과 같다.


<!-- CKEditor와 마찬가지로 페이지의 <head></head>에 다음의 내용을 추가

<!-- 아래는 그누보드 5의 SmartEditor2를 사용하기 위한 설정 추가로 설정할 필요없음. -->

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

<script language="javascript">

var g5_editor    = "smarteditor2";

</script>

<!-- 그누보드5에 설치된 SmartEditor2를 사용하는 설정 -->



<!-- 실제 쓰기 기능을 가진 페이지의 textarea 태그 부분에 다음내용 추가 -->

<tr>

<td>내용</td>

<td colspan=3><textarea name="desc" id="desc"  class="smarteditor2" style="width:100%;height:220px; display:none;">

수행업무내역을 상세히 입력합니다.

</textarea>

    <!-- 네이버 스마트에디터2 적용 부분 시작-->

<script src="/plugin/editor/smarteditor2/js/HuskyEZCreator.js"></script>

<script>var g5_editor_url = "/plugin/editor/smarteditor2", oEditors = [];</script>

<script src="/plugin/editor/smarteditor2/config.js"></script>

<script>

function submitContents(elClickedObj) {

oEditors.getById["desc"].exec("UPDATE_CONTENTS_FIELD", []); // 에디터의 내용이 textarea에 적용됩니다.

// 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.

try {

elClickedObj.form.submit();

} catch(e) {}

</script>

    <!-- 네이버 스마트에디터2 적용 부분 끝.-->

</td>

</tr>

<!-- CKeditor와는 달리 다음과 같이 Submit 부분에 onclick 이벤트 추가 -->

<tr>

<td colspan=4><center><input type=submit value="저장하기" onclick="submitContents(this)"><input type="reset" name="reset" value="취소" onClick="window.close();"> </center></td>

</tr>


네이버 스마트에디터 2.0의 에디터 최소 높이 조정

네이버 스마트에디터는 소스 내부적으로 최소 높이가 지정되어 있다.그래서 그 높이를 최소 높이 이하로 줄이려고 <textarea></textarea> 의 rows 속성이나 style의 height를 아무리 줄여도 일정 높이 이상으로는 줄일 수 없다. 만약 이 높이를 줄이려면 에디터의 최소 높이 즉 높이를 지정하지 하지 않을 경우의 기본 높이를 변경해 주어야 한다.


이 스마트에디터의 최소 높이는 SE2BasicCreator.js 파일에 htDimension의 nMinHeight 값으로 지정되어 있다.

var htDimension = {

nMinHeight:220,

nMinWidth:parseInt(elIRField.style.minWidth, 10)||570,

nHeight:elIRField.style.height||elIRField.offsetHeight,

nWidth:elIRField.style.width||elIRField.offsetWidth

};


위와 같이 220으로 변경하면 에디터의 초기 높이 기본값이 변경된다.


만약 에디터의 높이를 더 높이고자 한다면 <textarea></textarea>의 style 에서 height를 220px 보다 크게 주면 된다.


이 네이터 스마트에디터의 높이를 조정하는 방법을 알아내는데...꼬박...하루(8시간 정도)가 걸렸다.

난..웹 개발자의 소양은 갖추지 못한 모양이다. 

웹 개발은 너무 어렵다.


신고
2 Comments
댓글쓰기 폼