2013.07.04 14:46

그누보드 스킨에서 cheditor 대신 스마트에디터로 바꾸기

 

그누보드 일반 스킨 자료실 : http://sir.co.kr/bbs/board.php?bo_table=g4_skin

그누보드 DTD 스킨 자료실 : http://sir.co.kr/bbs/board.php?bo_table=g4_skin_dtd

 

그누보드 스킨 자료실에서 스킨을 내려받기 했는데 write.skin.php에서 cheditor가 없어서 DHTML 환경에서 글쓰기를 할 수 없게 됩니다. 지음빌더에서는 cheditor를 재배포 할 수 있는 라이센스가 없어서 스마트에디터를 기본으로 사용하고 있습니다. 지음빌더에서 사용한 스마트에디터는 누구든지 개작 및 재배포, 상업용 사용이 가능합니다. 단, 에디터 이름을 변경해서 재배포 할 수 없습니다. (http://dev.naver.com/projects/smarteditor/)

 

지음빌더에서 cheditor 사용하기

지음빌더에서는 cheditor 파일은 재배포 할 수 없지만 그누보드에서 cheditor를 사용할 수 있도록 한 설정 파일들은 함께 배포 되기 때문에 cheditor 프로그램을 설치하면 바로 사용이 가능합니다.

그누보드4를 내려받기 하면 cheditor5 프로그램 폴더가 있습니다. 이 디렉토리를 통째로 복사해서 지음빌더 설치 경로에 붙혀넣기 하시면 됩니다.

그누보드에서 내려받기한 cheditor5를 지음빌더가 설치 된 경로에 업로드 하시면 그누보드의 cheditor를 이용한 스킨들도 사용이 가능합니다. 지음빌더에서 재배포 할 수 없어서 포함하지 않은 것일 뿐 개인적으로 사용하실 분들은 이런 방법으로 cheditor를 사용하실 수 있습니다. cheditor는 저작권이 있는 프로그램으로 상업용이나 재배포 용도로 사용을 원하시는 분은 라이센스를 구입하셔야 합니다. (http://www.chcode.com/products/cheditor.shtml)

 

그누보드의 스킨에 스마트에디터 적용하기

네이버 개발자센터에서 기본적으로 스마트에디터의 사용 설명과 개발자 토론을 열람할 수 있습니다. http://dev.naver.com/projects/smarteditor 스마트에디터 LPGL2 라이센스를 따르고 있으며 누구나 개작, 재배포, 상업용 사용이 가능합니다. 재패포 시 개발자가 에디터의 이름을 별도로 지정하고 싶다면 이름 뒤에 smarteditor를 꼭 포함하셔야 합니다. 예를 들면 ziumeditor for smarteditor와 같은 형식으로 이름을 정할 수 있습니다.

 

에디터를 가장 많이 사용하는 파일이 아마도 write.skin.php일 것입니다. 그누보드와 그누보드 스킨을 열어보면 cheditor로 되어 있는데 지음빌더에서는 cheditor를 포함하고 있지 않아 이 프로그램을 따로 설치하거나 스마트에디터로 바꿔서 사용 할 수 있습니다.

 

일단 write.skin.php 파일을 열어 cheditor와 관련 된 코드를 모두 삭제 합니다.

페이지 상단에 <textarea>를 제어하기 위한 cheditor 라이브러리와 스크립트를 포함하는 곳입니다. 꼭 삭제 하지 않더라도 스마트에디터에 영향을 주지 않지만 더이상 사용하지 않기 때문에 이 코드를 삭제합니다.

내용을 입력하는 <textarea>입니다. <? if($is_dhtml_editor) { ?>부터 <? } ?>까지 코드를 모두 삭제합니다. 부분적으로 수정 할 수 있지만 익숙하지 않은 사용자에게는 복잡 할 수 있기 때문에 일단 모두 제거합니다. 

자바스크립트 부분에서 function fwrite_submit(f) 사용자 함수 내용 중에 위의 코드를 삭제합니다.

 

그림에서처럼 cheditor와 관련 된 코드를 모두 삭제 했다면 이제 스마트에디터를 위한 코드를 필요한 곳에 삽입하셔야 합니다. 아래 그림과 설명을 참고하세요.

<textarea>가 있던 내용 입력 영역에 아래와 같은 코드를 넣습니다.

<? if ($is_dhtml_editor) { ?>
  <textarea id="wr_content" name="wr_content" class=tx style='width:99%; height:200px; word-break:break-all; display:block;' itemname="내용"
        <? if ($write_min || $write_max) { ?>onkeyup="check_byte('wr_content', 'char_count'); alert(wr_content.value);"<?}?>><?=$content?></textarea>
        <? if ($write_min || $write_max) { ?><script type="text/javascript"> check_byte('wr_content', 'char_count'); </script><?}?>
  <script language="javascript">
  var zmContentBody = "wr_content";
  var oEditors = [];
  nhn.husky.EZCreator.createInIFrame({
   oAppRef: oEditors,
   elPlaceHolder: zmContentBody,
   sSkinURI: "<?=$g4[path]?>/SmartEditorZium/SmartEditor2Skin.html", 
   fCreator: "createSEditor2"
  });
  </script>
 <? }else { ?>
  <table width=100% cellpadding=0 cellspacing=0>
        <tr>
            <td width=50% align=left valign=bottom>
                <span style="cursor: pointer;" onclick="textarea_decrease('wr_content', 10);"><img src="<?=$board_skin_path?>/img/up.gif"></span>
                <span style="cursor: pointer;" onclick="textarea_original('wr_content', 10);"><img src="<?=$board_skin_path?>/img/start.gif"></span>
                <span style="cursor: pointer;" onclick="textarea_increase('wr_content', 10);"><img src="<?=$board_skin_path?>/img/down.gif"></span></td>
            <td width=50% align=right><? if ($write_min || $write_max) { ?><span id=char_count></span>글자<?}?></td>
        </tr>
        </table>
  <textarea id="wr_content" name="wr_content" class=tx style='width:100%; word-break:break-all;' rows=15 itemname="내용" required
        <? if ($write_min || $write_max) { ?>onkeyup="check_byte('wr_content', 'char_count'); alert(wr_content.value);"<?}?>><?=$content?></textarea>
        <? if ($write_min || $write_max) { ?><script type="text/javascript"> check_byte('wr_content', 'char_count'); </script><?}?>
 <? } ?>

삭제 했던 <? if($is_dhtml_editor) { ?>에서 <? } ?>까지의 코드를 위의 소스로 대체 합니다.

 

이런 형태가 됩니다.

 

다음은 fwrite_submit(f) 함수 안에 아래 코드를 넣습니다.

// 에디터의 내용을 에디터 생성시에 사용했던 textarea에 넣어 줍니다. 스마트 에디터
 try{
  oEditors.getById["wr_content"].exec("UPDATE_CONTENTS_FIELD", []);
 }catch(e){}

스마트에디터에서 입력 된 text내용을 실제 사용 되어질 <textarea>에 적용시키는 스크립트입니다. 이 코드가 없으면 textarea에 내용이 저장되지 않습니다. 만약 한 페이지에 스마트에디터 여러 개를 사용하고 싶을 때는 다음 설명을 참고하세요. http://dev.naver.com/projects/smarteditor/tech/41284 제가 쓴 글이네요. ^^ 스마트에디터에 대한 궁금한 내용이 있으실 때는 이 곳 게시판에 질문을 올리시면 답변을 드리도록 하겠습니다.

 

스마트에디터 적용은 비교적 간단합니다. 그누보드에서 내려받기한 스킨은 번거롭더라 이 과정을 통해서 어렵지 않게 사용하실 수 있습니다.

반대로 지음빌더용 스킨을 그누보드에서 사용하고 싶을 때는(스마트에디터 → cheditor) 위의 과정을 반대로 하시면 됩니다.

        

Trackback 0 Comment 0