[펌]워드프레스 한국형 게시판 – 3. 다섯 스킨 전투

워드프레스 한국형 게시판 – 3. 다섯 스킨 전투

admin  17.02.2015  삽질 베이스  3 

0

음….. 이제 에디터를 연결할 차례이다.

에디터는 자바스크립트로 제어되기 때문에 스킨 파일에 직접 작업을 해주어야 한다능.. 그 말은 스킨 수만큼 작업을 해주어야 한다능…

사실 Kboard에는 기본적으로 네 개의 스킨이 탑재되어 있지만 내친김에 우리 스킨도 하나 추가하기로 마음을 먹고 글 제목은 다섯 스킨 전투 ㅋㅋㅋㅋㅋ 절대 호빗 시리즈 제목과 맞추기 위해 우리 스킨을 일부러 만드는게 아니다.

 

일단 요로케 글부터 싸지르고 작업 시작.

 

에효.. 중간정산 들어갑니다. 개삽질함.. ㅠㅠ

Kboard설정에 들어가면 아래 그림같이 글 작성 에디터를 선택 할 수 있다. 그런데 겁나 썰렁한 textarea와 일반 사용자들이 사용하기엔 너무 양키스러운 워드프레스 내장 에디터 두 가지 밖에 없단 말이지. 그래서 여기에 스마트 에디터를 하나 추가할거임. 사실 스마트 에디터를 추가하는 이유는 양키스런 에디터 외관때문이 아니라 이미지 첨부를 자연스럽게 바꾸기 위함..

 

 

일단 저 설정창에 스마트 에디터 항목을 껴넣기 위해서 kboard_setting.php 파일을 다시 한 번 수정했다. 왜 아까 권한 설정작업할때 썼던 그거 ㅇㅇ

1 2 3 4 5 6 7 8 9 10 11

<tr valign="top">  <th scope="row"><label for="use_editor">글 작성 에디터</label></th>  <td>  <select name="use_editor" id="use_editor" class="">  <option value="">textarea 사용</option>  <option value="yes"<?php if($board->use_editor == 'yes'):?> selected<?php endif?>>워드프레스 내장 에디터 사용</option>  <option value="smart"<?php if($board->use_editor == 'smart'):?> selected<?php endif?>>스마트 에디터 사용</option>  </select>  <p class="description">에디터를 사용해 게시물을 작성할 수 있습니다. 워드프레스에 내장된 에디터를 사용합니다. 다른 에디터 플러그인을 설치하면 호환 됩니다.</p>  </td>  </tr>

 

자 요로케 스마트 에디터를 추가함. 그리고 다시 Kboard 설정화면에 가보면?

 

 

오 굳.. 벌써 뭔가 다 된거 같은 느낌적인 느낌. 하지만 이제부터 시작이다. 일단 네이버 스마트 에디터를 다운받았다. 자 링크도 던져줌. 겁나 친절.

다운받은 후 kboard가 설치된 디렉토리 아래에 smarteditor(이건 개취) 디렉토리를 만들었다. 다시 말해서 wp-content/plugins/kboard/smarteditor 디렉토리가 생기는거지. 그리고 여기에다가 아까 다운받은 파일을 몽땅 업로드 했다. 그럼 대충 아래같은 모냥새가 나오겠지?

 

 

 

그럼 이제 스킨 파일을 수정해줄 차례다. 정말이지 kboard는 폐허가 되어가고 있다. 그래서 생각해 봤는데, 아무래도 이번 작업 끝나면 kboard 쪽에 내 소스를 커밋해달라고 해봐야겠다. 이대로 두면 이거 뭐 플러그인 업데이트도 안되고 후일이 두렵단 말이지. kboard 쪽에서 허접한 내 코드를 커밋해 줄런지는 미지수.. 만약에 커밋 된다면 나중에 따로 알려주겠다. 그럼 지금까지 이 글을 보고 따라하고 있을지도 모르는 당신의 노력은 모두 헛수고가 되겠지.

각설하고 계속 작업을 해보자. 위에서도 말했지만 에디터는 자바스크립트라서 스킨을 직접 수정해 주어야 한단 말이야. 그러니까 일단 아무 스킨이나 골라잡아서 작업을 해보자고. 나는 avatar 스킨을 수정하기로 했다. 스킨 제목이 뭔가 있어보이잖아?

아바타 스킨 디렉토리 밑에 editor.php 파일을 열어서 다음과 같이 수정한다.

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<div class="kboard-content">  <?php if($board->use_editor == "yes"):?>  <?php wp_editor($content->content, 'kboard_content'); ?>  <?php elseif($board->use_editor == "smart"):?>  <textarea name="kboard_content" id="kboard_content"><?php echo $content->content?></textarea>    <script type="text/javascript" src="<?php echo plugins_url('../../smarteditor/js/HuskyEZCreator.js', __FILE__)?>" charset="utf-8"></script>  <script type="text/javascript">  var oEditors = [];  nhn.husky.EZCreator.createInIFrame({  oAppRef: oEditors,  elPlaceHolder: "kboard_content",  sSkinURI: "<?php echo plugins_url('../../smarteditor/SmartEditor2Skin.html', __FILE__)?>",  fCreator: "createSEditor2"  });  </script>  <?php else:?>  <textarea name="kboard_content" id="kboard_content"><?php echo $content->content?></textarea>  <?php endif?>  </div>

코드가 뭐같이 나와서 보기는 좀 힘들지만 elseif절이 추가된 부분이다. 이렇게 코드 써놓고 게시판 편집화면 한 번 볼까? 아참! 보기 전에 게시판 에디터 설정을 스마트 에디터로 했는지 확인하라구우~

 

 

굳~ 멋지네. 하지만 이게 끝이면 섭섭하지. 이 상태에서 저장하기 누르면 이 페이지를 벗어나겠냐고 지랄함. 스마트 에디터에서 작성한 글 내용을 원래의 textarea로 전달해주지 않아서 그러함. 그러므로 스킨 디렉토리 안에 있는 script.js파일을 열어서 마지막 부분을 이렇게 수정했다.

 

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

function kboard_editor_execute(form){ var $ = jQuery;   if(!$('input[name=title]', form).val()){ alert(kboard_localize.please_enter_a_title); $('input[name=title]', form).focus(); return false; } else if($('input[name=member_display]', form).eq(1).lengh > 0 && !$('input[name=member_display]', form).eq(1).val()){ alert(kboard_localize.please_enter_a_author); $('[name=member_display]', form).eq(1).focus(); return false; } else if($('input[name=password]', form).lengh > 0 && !$('input[name=password]', form).val()){ alert(kboard_localize.please_enter_a_password); $('input[name=password]', form).focus(); return false; } else if($('input[name=captcha]', form).lengh > 0 && !$('input[name=captcha]', form).val()){ alert(kboard_localize.please_enter_the_CAPTCHA_code); $('input[name=captcha]', form).focus(); return false; }   // 에디터의 내용이 textarea에 적용된다. oEditors.getById["kboard_content"].exec("UPDATE_CONTENTS_FIELD", []);   return true; }

 

주석달린 부분 oEditors로 시작하는 라인. 저것만 넣으면 일단 에디터 이식은 끝!

이제 대망의 파일 첨부/이미지 삽입이 남았네.. 하하.. ㅅㅂ… 그래도 굉장히 희망적이다. 2~3일 예상했던 작업이 하루만에 다 끝나간다. 얏홋.

 

지금까지 알아낸 사실.

1. 게시물 등록과 파일 첨부는 별도의 후킹으로 이루어진다.

2. 첨부파일은 DB에 다음과 같이 저장된다.

+—–+————-+———-+—————-+————————————————————————+————-+
| uid | content_uid | file_key | date | file_path | file_name |
+—–+————-+———-+—————-+————————————————————————+————-+
| 1 | 18 | file1 | 20150217214839 | /wp-content/uploads/kboard_attached/1/201502/201502171248391281021.jpg | kboard7.jpg |
+—–+————-+———-+—————-+————————————————————————+————-+

3. 파일이 첨부된 게시글을 지웠을때 첨부파일은 정상적으로 제거된다. (즉, kboard의 룰만 잘 따라서 파일을 첨부해주면 나머지는 kboard가 알아서 컨트롤 해줄듯)

1번 가정은 완전 틀린것이다 무시하라. 

 

연휴동안 빈둥빈둥 거려서 일이 거의 진행되지 않았다.. 나는 이리될 줄 알았지.. ㅠㅠ

암튼 연휴 지나고 첫 월요일인 오늘까지 꼬박 일을 해서 결과적으로는 꽉 채운 3일이 걸린것 같다.. ㅠㅠ 하루만에 엄청 많은 작업을 해서 희망적이었는데 파일 업로드 하는 부분이 헬이더라.. 아오.

오늘은 밤이 깊었으니 내일 정리하도록 하겠다.

출처: http://funexlab.com/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%ED%95%9C%EA%B5%AD%ED%98%95-%EA%B2%8C%EC%8B%9C%ED%8C%90-3-%EB%8B%A4%EC%84%AF-%EC%8A%A4%ED%82%A8-%EC%A0%84%ED%88%AC/