BLUEnLIVE's ZocKr World: Tistory

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>

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

버전이 2.2로 뛰었다고 기능이 대폭 증가한 것은 전혀 아닙니다. 버전번호를 맞췄을 뿐입니다. ^^;;;

BBCode for Tistory 2.1 수정 공개를 통해 배포한 BBCode는 티스토리의 제한된 환경에서 BBCode를 쓸 수 있는 환경을 제공합니다.
하지만, 몇몇분들께서 W3C 표준에 어긋난다는 지적을 하셨습니다.

이에 따라 W3C 표준에 적합하도록 수정된 BBCode for Tistory 2.2를 공개합니다.
(상세한 설치방법은 위의 링크를 클릭하면 보실 수 있습니다)

BBCode22.zip

W3C 표준에 적합하도록 수정하는 것은 엔즐님께서 엔즐군의 다이어리에 올려주신 내용을 기반으로 작업하였습니다.
대략의 수정사항은 아래와 같습니다. (더 상세한 내용은 엔즐군의 다이어리를 참고하시기 바랍니다)

1. <script language="javacript">를 <script type="text/javascript">로 바꿈

많이들 사용하는대로 따라 썼는데, 웹 표준에 적합한 코드가 아니었습니다. (주먹구구의 한계…)
엔즐님 수정사항을 그대로 반영했을 뿐더러, 제 스킨에 같은 방식으로 적힌 코드를 모두 똑같이 수정했습니다.
특히 이 부분은 엔즐님께 다시 한 번 감사드립니다.

2. <p> 태그 내에 <div>를 집어넣은 것을 밖으로 뺌

그냥 단순히 <div>를 추가하기 때문에 <p>가 있는 경우 <p> 태그의 내부에 <div>가 존재하게 됩니다.
<p>가 있는 경우 별도로 처리하도록 수정했습니다.
(이런 제약이 있는지도 몰랐습니다 ㅠ.ㅠ)
역시 엔즐님의 수정사항을 그대로 반영했습니다.

3. <div> 내에서 name 속성 대신에 class 속성을 사용함

name을 사용하지 않는 것이 원칙이고, 사용하더라도 name의 값이 달라야 합니다.
(이런 것 역시 처음 들은 얘기입니다. 웹 개발자 여러분, 존경합니다)

그래서 class 속성을 사용했는데, IE에서 getAttribute 함수에 버그가 있어 약간 복잡한 코딩을 했습니다.

※ 참고로, 3번은 엔즐님께서 제시한 방법보다 약간 간단하고 명확한 방법으로 구현했습니다. v^.^
관심 있으신 분은 아래의 코드를 참고하시기 바랍니다.

if (/msie/i.test (navigator.userAgent)) {
    for (var i = 0; i < tags.length; i++)
        if (tags[i].getAttributeNode('class').value == 'bbcode' && tags[i].style.display != 'none')
            elements.push(tags[i]);
}
else
{
    for (var i = 0; i < tags.length; i++)
        if (tags[i].getAttribute('class') == 'bbcode' && tags[i].style.display != 'none')
            elements.push(tags[i]);
}

※ 직접 수정해서 관련글을 포스팅해주신 엔즐님 및 BBCode에 관심을 가져주신 모든 분들께 감사드립니다.

※ [i], [u], [quote] 등에서 태그 속의 내용이 비었을 경우에도 변환하도록 아주 약간 수정했습니다. (.+? → .*) / 6월 24일

BLUEnLIVE's ZocKr World

2009년 6월 4일 목요일

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

2009년 1월 10일 토요일

BBCode for TiStory 2.4 (마이너 업데이트) 버그패치 재업

2008년 7월 1일 화요일

BBCode for TiStory 2.3 버그패치

2008년 6월 24일 화요일

BBCode for TiStory 2.2 업데이트 공개