BLUEnLIVE's ZocKr World

Forevler님의 패치를 적용해서 다시 올린다. Forevler님께 다시 한번 감사드린다.

기존 포스팅에서 수정된 내용은 아래와 같다.

1. insertAtCursor() 함수 수정 (버그 패치 및 약간의 속도 증가)
2. 아이콘 링크 인자 수정 (버그 패치)

티스토리에서 BBCode for TiStory 3.0를 통해 BBCode를 사용할 수 있게 만들었다.
하지만, 막상 이걸 입력하려니 의외로 손이 많이 가더라.
(기술이 발달하면 편리성을 가져다준다지만, 더 불편해지는 경우가 훨씬 많다는 거~)

하지만, 스킨을 조금만, 아주 조금만 수정하면 아래와 같은 BBCode 입력 도우미 버튼(이하 도우미)을 달 수 있다.

Forevler님의 버튼 배치를 업어왔습니다. 이게 구성하기도 깔끔하고 예쁘더군요.

1. 추가 파일 설치

일단 아래의 파일을 다운받아 압축을 풉니다. 압축을 풀면 gif 파일 12개가 나온다.
그 파일 12개를 모두 스킨→직접올리기에서 업로드한다.

bbcode_helper_images.zip

쉽죠잉?

2. 추가 스타일 지정

다음 먼저 할 일은 버튼 등에 사용될 스타일을 추가하는 것이다.
HTML/CSS 편집 메뉴에서 style.css의 맨 끝에 아래 내용을 추가한다.

/* BBCode 도우미 버튼들 */
.emoticonborder { border-style: solid; border-width: 1px; border-color: #cbcbcb; padding: 5px; margin: 0 0 7px 0; height: 22px;}
.emoticons { cursor:pointer; float: left; margin:2px 2px 1px 0; }
.emoticonspace { float: left; margin-right:0px; }
.emoticonusage { cursor:pointer; float: right; }
a.rollover img { border-width:0px; display:block; }
a.rollover img.rollover { display:none; }
a.rollover:hover { position:relative; background-color:transparent !important;}
a.rollover:hover img { display:none; }
a.rollover:hover img.rollover { display:block; }

3. skin.html 수정 #1 : javascript 코드 삽입

여기부터는 HTML/CSS 편집 메뉴에서 skin.html 파일을 수정한다.
내용이 길고 약간 (아주 약간) 복잡하므로 셋으로 나누어 올린다.

아래의 javascript 코드를 삽입한다.
삽입 위치는 헤더의 <title> ~ </title> 바로 다음이다.

<script type="text/javascript">
//<![CDATA[
//이모티콘 추가
function insertAtCursor(myField, openTag, closeTag)
{ 
    var box = document.getElementById(myField);
    //IE support 
    if (/msie/i.test (navigator.userAgent))
    {
        box.focus(); 
        var sel = document.selection.createRange(); 
        sel.text = openTag + sel.text + closeTag;
    }
    //Mozilla/Firefox/Netscape 7+ support 
    else
    { 
        var startPos = box.selectionStart; 
        var endPos = box.selectionEnd; 
        box.value = box.value.substring(0, startPos) + openTag + box.value.substring(startPos, endPos) + closeTag + box.value.substring(endPos, box.value.length);
        box.selectionStart = box.selectionEnd = endPos + openTag.length + closeTag.length;
    }
    box.focus();
} 

function bbcodeintro(){
    alert('1. 일반 BBCode \n\n[i]이탤릭[/i] : 이탤릭\n[b]볼드[/b] : 볼드\n[u]밑줄[/u] : 밑줄\n[quote]인용문[/quote] : 인용문\n[img]이미지 URL[/img] 또는 [img=이미지 URL] : 이미지\n[url=http://qaos.com]QAOS[/url] : QAOS (링크)\n[color=red]색깔[/color] : 색깔\n[email=주소]이름[/email] 또는 [email]주소[/email] : 전자우편 주소\n[list][*][/list] : 불릿이 달린 리스트\n\n2. 추가 BBCode\n\n[size=폰트크기]내용[/size] : 글자 크기 지정\n[ru]빨간 밑줄[/ru] : 빨간 밑줄\n[bu]파란 밑줄[/bu] : 파란 밑줄\n[rb]빨간 볼드[/rb] : 빨간 볼드\n[bb]파란 볼드[/bb] : 파란 볼드\n[red]빨간색[/red] : 빨간색\n[blue]파란색[/blue] : 파란색\n[ur=http://qaos.com]QAOS[/ur] : QAOS (링크) \n[link=http://qaos.com]QAOS[/link] : QAOS (링크) \n[c=red]색깔[/c] : 색깔\n[q]인용문[/q] : 인용문\n[embed=주소 (폭) (높이)] 또는 [embed]주소 (폭) (높이)[/embed]: 동영상 embed \n[embed=http://kr.youtube.com/watch?v=sxA2FZANE2o]\n[embed=http://kr.youtube.com/v/sxA2FZANE2o 500 300]\n※ embed에서 폭과 높이는 생략 가능하며, 생략시 425x355로 자동 설정한다.');
}
//]]>
</script>

4. skin.html 수정 #2 : 방명록 수정

티스토리 스킨에는 <textarea> 태그가 2번 사용된다.
하나는 방명록, 다른 하나는 댓글 입력창으로 둘 다 수정해야 한다.

우선은 방명록을 수정하겠다.
아래와 비슷하게 생긴 부분을 찾는다.

<textarea name="[#\#_guest_textarea_body_#\#]" cols="50" rows="6"> </textarea>

여기서 굳이 "비슷하게"란 표현을 쓴 이유는 뒤의 인자가 조금씩 다르기 때문이다.
cols, rows는 대부분 다르고, 가끔은 id가 적혀있는 경우마저 있다.

이곳에 id를 아래와 같이 추가한다.

<textarea name="[#\#_guest_textarea_body_#\#]" id="[#\#_guest_input_comment_#\#]" cols="50" rows="6"> </textarea>

id만 추가한 것인데, 혹시나 다른 id 값이 적혀있었으면 그 내용을 지우고 이것으로 대체하면 된다.

다음으로 할 일은 이 부분 즉, <textarea> 태그 바로 앞에 다음의 내용을 추가하는 것이다.
이 부분이 바로 방명록의 도우미 부분이다.

<div class="emoticonborder" style="/*width:604px;*/">
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[b]','[/b]');return false;" title="진하게" class="rollover">
<strong>가</strong></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[i]','[/i]');return false;" title="기울임" class="rollover">
<em>가</em></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[u]','[/u]');return false;" title="밑줄" class="rollover">
<u>가</u></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[color=red]','[/color]');return false;" title="글자색" class="rollover">
<font color="red">가</font></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[quote]','[/quote]');return false;" title="인용" class="rollover">
"인용"</a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[img]','[/img]');return false;" title="그림 넣기" class="rollover">
<img class="rollover" src="./images/bb_img.gif" align="texttop" class="rollover">
<img src="./images/bb_imgb.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[ur=http://]','[/ur]');return false;" title="하이퍼링크" class="rollover">
<img class="rollover" src="./images/bb_url.gif" align="texttop" class="rollover">
<img src="./images/bb_urlb.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','','[embed=주소 폭 넓이]');return false;" title="영상 넣기" class="rollover">
<img class="rollover" src="./images/bb_emb.gif" align="texttop" class="rollover">
<img src="./images/bb_embb.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('[#\#_guest_input_comment_#\#]', '', ':)');return false;" title=":)" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon06.gif">
<img src="./images/bb_emo6.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('[#\#_guest_input_comment_#\#]', '', ';)');return false;" title=";)" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon01.gif">
<img src="./images/bb_emo1.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('[#\#_guest_input_comment_#\#]', '', ':P');return false;" title=":P" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon02.gif">
<img src="./images/bb_emo2.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('[#\#_guest_input_comment_#\#]', '', '8D');return false;" title="8D" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon03.gif">
<img src="./images/bb_emo3.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('[#\#_guest_input_comment_#\#]', '', ':(');return false;" title=":(" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon04.gif">
<img src="./images/bb_emo4.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('[#\#_guest_input_comment_#\#]', '', '--;');return false;" title="--;" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon05.gif">
<img src="./images/bb_emo5.gif"></a></div>
<div class="emoticonusage">
<a href="#" onClick="bbcodeintro();return false;" title="BBCode 사용법" class="rollover">
<strong>BBCode 사용법</strong></a></span></div>
</div>

맨 앞부분에 주석처리되어 있는 /*width:604px*/ 부분은 스킨에서 폭을 별도로 지정하는 경우엔 적절한 값을 스킨에다 적기 위해 빼놓은 부분이다.
필요시 주석을 제거하고 원하는 값을 지정하면 더 깔끔한 화면을 볼 수 있다.

5. skin.html 수정 #3 : 댓글창 수정

아래와 비슷하게 생긴 부분을 찾는다.

<textarea name="[#\#_rp_input_comment_#\#]" rows="10" cols="50"></textarea>

여기도 앞과 같은 이유로 "비슷하게"란 표현을 썼다.
이곳에 id를 아래와 같이 추가한다.

<textarea name="[#\#_rp_input_comment_#\#]" id="comment_[#\#_article_rep_id_#\#]" rows="10" cols="50"></textarea>

역시 id만 추가한 것인데, 혹시나 다른 id 값이 적혀있었으면 역시 그 내용을 지우고 이것으로 대체하면 된다.

마지막으로 할 일은 이 부분 즉, <textarea> 태그 바로 앞에 다음의 내용을 추가하는 것이다.
이 부분은 댓글창의 도우미 부분이다.

<div class="emoticonborder" style="/*width:604px;*/">
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[b]','[/b]');return false;" title="진하게" class="rollover">
<strong>가</strong></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[i]','[/i]');return false;" title="기울임" class="rollover">
<em>가</em></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[u]','[/u]');return false;" title="밑줄" class="rollover">
<u>가</u></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[color=red]','[/color]');return false;" title="글자색" class="rollover">
<font color="red">가</font></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[quote]','[/quote]');return false;" title="인용" class="rollover">
"인용"</a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[img]','[/img]');return false;" title="그림 넣기" class="rollover">
<img class="rollover" src="./images/bb_img.gif" align="texttop" class="rollover">
<img src="./images/bb_imgb.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[ur=http://]','[/ur]');return false;" title="하이퍼링크" class="rollover">
<img class="rollover" src="./images/bb_url.gif" align="texttop" class="rollover">
<img src="./images/bb_urlb.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[embed=주소 폭 넓이]','[/img]');return false;" title="영상 넣기" class="rollover">
<img class="rollover" src="./images/bb_emb.gif" align="texttop" class="rollover">
<img src="./images/bb_embb.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_[#\#_article_rep_id_#\#]', '', ':)');return false;" title=":)" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon06.gif">
<img src="./images/bb_emo6.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_[#\#_article_rep_id_#\#]', '', ';)');return false;" title=";)" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon01.gif">
<img src="./images/bb_emo1.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_[#\#_article_rep_id_#\#]', '', ':P');return false;" title=":P" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon02.gif">
<img src="./images/bb_emo2.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_[#\#_article_rep_id_#\#]', '', '8D');return false;" title="8D" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon03.gif">
<img src="./images/bb_emo3.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_[#\#_article_rep_id_#\#]', '', ':(');return false;" title=":(" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon04.gif">
<img src="./images/bb_emo4.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_[#\#_article_rep_id_#\#]', '', '--;');return false;" title="--;" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon05.gif">
<img src="./images/bb_emo5.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticonusage">
<a href="#" onClick="bbcodeintro();return false;" title="BBCode 사용법" class="rollover">
<strong>BBCode 사용법</strong></a></div>
</div>

이렇게 수정하면 앞에서 본 것과 같은 도우미를 장착할 수 있다.
그리고, 여기서는 이모티콘 플러그인을 설치한 것으로 가정하고, 이모티콘을 삽입해주는 부분도 함께 구현했다.
만약, 이모티콘을 사용하지 않는 경우에는 적절히 수정해서 사용하시기 바란다.
(게으르니즘이 결코 아니다. 쿨럭)

BLUEnLIVE's ZocKr World

2009년 6월 4일 목요일

BBCode 삽입 도우미 만들기 (수정 공개)