게시판과 같은 글쓰기 기능이 포함된 웹페이지를 만들 때 가장 간단한 방법은 HTML 태그 중에서 을 사용하는 것이다. 하지만 이 태그는 너무도 단순해서 HTML 코드나 이미지 첨부 또는 폰트 크기나 색상의 변경 등을 처리할 수 없는 단점이 있다. 그래서 사실상 거의 사용되지 않는다고 보는 것이 좋다.
그누보드5(GNUBOARD5) 베타에 포함되어 있는 CKEditor
그 대안으로 사용되는 것이 CKEditor와 같은 javascript로 만들어진 에디터다. 아래 화면은 내가 개발해 사용 중인 프로젝트 및 일정관리 시스템의 일정 등록 화면이다. 수행업무 내역을 입력하는 노란색 상자 내부가 CKEditor다. 게시판으로 함께 사용중인 그누보드5(beta)에 CKEditor가 포함되어 있어서 그 CKEditor를 그대로 사용했다.
위 화면의 소스를 들여다 보면 <textarea> </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시간 정도)가 걸렸다.
난..웹 개발자의 소양은 갖추지 못한 모양이다.
웹 개발은 너무 어렵다.