BBCode for 텍큐닷컴 3.3 업데이트

가급적 BBCode는 업데이트를 그만하려고 했지만, 사용자의 요청은 언제나 그냥 넘어가지 않는다.
게시판을 통해 Choco2080님께서 spoiler 태그를 추가해달라는 요청을 하셨다.

클라이언트에서 동작하는 특성상 spoiler 태그가 큰 의미가 없을 수도 있지만, 그래도 추가했다.
사용법은 간단하다.

[spoiler]스포일러[/spoiler]

이렇게 사용하면 아래와 같은 모습을 볼 수 있다.

아래 파일을 다운받아 설치하면 되며, 자세한 설치법은 BBCode for 텍큐닷컴 3.2 대공개를 참고하면 된다.

BBCode33.zip

덧. 도우미는 거의 바뀐 점이 없다.

바뀐 것은 버전번호뿐...

BBCode for 텍큐닷컴 3.2 대공개

기존에 티스토리 용으로 개발해놓은 BBCode를 텍큐닷컴에 적용해서 많은 분들이 사용하고 계셨다.
하지만, 티스토리와 텍큐닷컴의 미묘한 차이가 반영되지 않았다거나 버그가 있는 등의 문제가 있었다.

사실, 텍큐닷컴에 적용한 지는 좀 되었는데, 그동안 개인 사정으로 이걸 포스팅하지 못했다.
(포스팅을 못한 이유 중 하나는 도우미를 만들지 못했다는 점도 있었다)

돌아온 도우미

아시는 분들은 다 아시는 프로그램이니 장광설은 이 쯤에서 접고 간단히 설치 방법과 적용 가능한 BBCode를 설명한다.


1. 설치#1: 파일 업로드

아래 파일을 다운받은 뒤 압축을 풀면 exe 파일 1개와 gif 파일 19개가 나온다.
이 중 19개의 gif 파일을 스킨 올리기에서 몽땅 올린다. (exe는 제외함!)

BBCode32.zip

2. 설치#2: 스킨 수정

위의 #1에서 압축파일에 들어있는 exe 파일이 바로 도우미이다.
블로그의 스킨 편집 메뉴에서 스킨(skin.html) 전체를 복사한 뒤 도우미 창에 붙이고 BBCode 적용 버튼을 클릭하면 창에 붙인 스킨이 수정되는데, 이것을 다시 블로그 스킨에 덮어쓴다.

이 때 주의할 점은 프로그램 하단에 보이는 textcube.com 블로그의 이미지 경로를 지정해둬야 된다는 점이다.
이 경로를 지정하지 않으면 스킨 수정시 이 부분을 반영하지 않으며, 잘못 지정되면 (당연히) 동작하지 않는다.

이 부분을 유의해서 적어야 함. 여기선 의도적으로 앞뒤에 /를 붙였음. (잘못된 예임)

3. 적용 가능한 BBCode#1: 기본 BBCode

아래와 같은 BBCode는 (당연히) 기본적으로 지원한다.

[i]이탤릭[/i] : 이탤릭
[b]볼드[/b] : 볼드
[u]밑줄[/u] : 밑줄
[quote]인용문[/quote] : 인용문 (예제 생략)
[img]이미지 URL[/img] : 이미지 (예제 생략)
[url=http://qaos.com]QAOS[/url] : QAOS (링크)
[color=red]색깔[/color] : 색깔

4. 적용 가능한 BBCode#2: 확장 BBCode. 혹자는 BBCode plus라고도 부름

위의 기본 BBCode 외에 아래와 같은 확장 코드를 지원한다.

[ru]빨간 밑줄[/ru] : 빨간 밑줄
[bu]파란 밑줄[/bu] : 파란 밑줄
[rb]빨간 볼드[/rb] : 빨간 볼드
[bb]파란 볼드[/bb] : 파란 볼드
[red]빨간색[/red] : 빨간색
[blue]파란색[/blue] : 파란색
[ur=http://qaos.com]QAOS[/ur] : QAOS (링크) / 스팸필터 우회용#1
[link=http://qaos.com]QAOS[/link] : QAOS (링크) / 스팸필터 우회용#2
[c=red]색깔[/c] : 색깔
[q]인용문[/q] : 인용문 (예제 생략)
[embed=주소 (폭) (높이)] : 동영상 embed
  [embed=http://kr.youtube.com/watch?v=sxA2FZANE2o]
  [embed=http://kr.youtube.com/v/sxA2FZANE2o 500 300]
  ※ embed에서 폭과 높이는 생략 가능하며, 생략시 425x355로 자동 설정

5. 기타기능: 이모티콘 지원

티스토리에서 적용한 기능을 그대로 갖고온 것인데, 아래와 같은 이모티콘을 지원한다.
이모티콘으로서 쓰기 애매한 --;는 빼버리려다가 그냥 뒀다.

:) ;) :P 8D :( --; :D :O :x

덧. 티스토리 버전과 차이 나는 부분은 다음과 같다: 치환자 지원 코드 삭제(\# → #), urlencode 관련 버그 해결 등

javascript에서 js 파일 자체의 파일명을 알애내는 방법

BBCode for TiStory 3.1을 개발하는 과정에서 js 파일이 저장된 폴더를 알아내야 했다.

지금까지는 각 이미지의 절대주소를 코드 안에 넣어뒀는데, 이제는 그럴 수 없게 되었기 때문이다.
그 전까진 내 전용 코드에만 추가적인 이미지를 사용했는데, 이제 이모티콘이 추가됨으로써 그런 주먹구구는 버려야 했기 때문.

그래서, 일단, js 파일 자체의 이름을 알아내는 방법을 찾아봤다.
우선 찾은 방법은 아래와 같은 코드이다.

getCurrentPath: function()
{
    var GetCurPath = (function(){
        var RandID = "SID" + Math.round(100000*Math.random());
        document.write("<script id='"+RandID+"'></script>");
        return document.getElementById(RandID).previousSibling.getAttribute("src");
    })()
    return GetCurPath;
}

이 코드를 js 파일에 추가한 뒤에 getCurrentPath() 함수를 호출하면 js 파일 자체의 이름이 리턴된다.

이 함수는 깔끔하고 명확하기는 하지만, 약간의 부담스러운 점이 있다.
내용이 텅 비긴 했지만, SID로 시작하는 임의의 스크립트를 하나 만든다는 것이다.

아무것도 추가하지 않는 방법을 찾아보니 아래와 같은 방법을 찾을 수 있었다.

getCurrentPath: function()
{
    var scr=document.getElementsByTagName('script');
    return(scr[scr.length-1].getAttribute("src"));
}

약간 복잡하기는 하지만, 이 함수는 IE8, FF3, Chrome2 에서 정상동작하는 것을 확인했다.
(물론 앞의 함수 역시 각 브라우저들에서 잘 동작한다)
이 코드 역시 js 파일에 추가한 뒤에 getCurrentPath() 함수를 호출하면 js 파일 자체의 이름이 리턴된다.

이렇게 js 파일 자체의 파일명을 얻었으면, 다음은 간단하다.
아래와 같이 getCurrentPath() 뒤에 간단한 정규식 함수 하나만 달아주면 된다.

alert(getCurrentPath().match(/^(.*)\/([^\/]*)$/i)[1]+'/');

덧. 이 함수는 html 파일 내에 위치하면 안된다.
두 getCurrentPath() 모두 html 내에서는 null을 리턴하기 때문이다.

BBCode for TiStory 3.1 업데이트: 이모티콘 기능 추가

들어가기에 앞서...

여러분은 티스토리의 이모티콘을 어떻게 생각하시는가?
난 개인적으로 굉장히 불만이다.

이모티콘이 예쁘지 않은 것은 기본인데다, 버그까지 있다.

그냥 서버 쪽에서 이미지만 좀 업데이트해줘도 좋을 것 같지만, 티스토리는 그런 신경 따윈 쓰지 않는다.
그냥 배째라고 앉아있어도 사용자들은 떠나지 않을 것이라 믿는 것 같다.

BBCode는 3.x대에 와서 충분히 안정화되었다고 생각한다.
그래서 가급적이면 업데이트를 자제하려고 했는데, 이놈의 이모티콘은 도저히 용서가 안 된다.
못생기려면 안정적이기라도 해야할 텐데, 이건 그런 개념이 없다.

우선, 아래의 화면을 보자. 이건 이모티콘이 설정된 상태에서 javascript 코드 일부를 답글로 단 화면이다.

); 가 8개나 들어있는 듯한 javascript 코드

이모티콘과 충돌이 난 것 같은가? 아니다.
원래의 내용을 보자.

짜잔~ ); 는 단 하나도 없다!

그냥 "100"); 이라고 썼을 뿐인데, 이걸 "100"[이모티콘];라고 변형을 한 것이다.
위 내용은 정상적으로 변환되면 이모티콘으로 해석될 부분이 단 하나도 없다.

이따위 버그가 없는 이모티콘 기능을 BBCode에 포함했다.
더불어, 이모티콘을 좀 더 예쁜 놈으로 교체했다. 그리고, 3개를 더 추가했다.

:D

:O

:x

따라서 이 BBCode를 사용하시면 2가지를 염두에 두어야 한다.

1. 기본 플러그인 중에서 이모티콘 플러그인은 사용하지 않아야 함
2. 이모티콘은 자동적으로 적용됨

원래 이모티콘은 잘 사용되지 않는 문자 조합으로 만들어진 것이라 고의로 집어넣지 않으면 만날 일은 별로 없다.
(그런 의미에서 --;는 이모티콘으로는 넌센스다. a--;와 같은 형태로 C/C++ 등의 언어에서 쉽게 볼 수 있으니까.)
그래서, 자동으로 적용되는 것이 그렇게 큰 제약은 되지 않을 것이라 생각한다.

아래 파일을 다운받아 설치하면 되며, 설치법은 역시 BBCode for Tistory 2.1을 참고하기 바란다.

BBCode31.zip

덧. 첨부파일엔 bbemo?.gif의 파일 9개가 있다. 이 파일들이 이모티콘이다.

BBCode for TiStory 3.0a 마이너 업데이트

도우미는 전혀 바뀌지 않았다

BBCode for TiStory 3.0 업데이트의 마이너 업데이트이다.
BBCode를 3.0으로 업데이트하면서 많은 변화가 생겼다.
그 중 하나가 타이머 방식에서 load, scroll 이벤트에서 동작하는 방식으로 변경되었다는 점이다.

이 변경을 통해 전체적으로 더 가벼워지기를 바랬는데, 그닥 가벼워지지도 않으면서 오히려 가끔 BBCode 변환을 수행하지 않는 경우가 발생하더라.

그래서 다시 타이머를 사용하는 방식으로 회귀했다.
(기존 2.x대의 방식과는 다르게 매 3초마다 댓글을 확인한다)

아래 파일을 다운받아 설치하면 되며, 설치법은 역시 BBCode for Tistory 2.1을 참고하시기 바란다.

BBCode30a.zip

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

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>

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

BBCode for TiStory 3.0 업데이트

드디어 BBCode가 v3.0으로 업데이트 되었다!

아이콘이 바뀌고, 댓글 펼침 여부에 대한 옵션이 제거되었다

프로그램의 구조를 대폭 수정한 업데이트이다.

기존 v2.x 버전에서는 BBCode를 변환하는 코드가 스킨 제일 마지막에 들어있었다.
하지만, 원래 javascript의 권장 위치는 헤더 내부이다.
이 문제도 수정할 겸, 다소 복잡하게 되어있던 전체적으로 구성을 정리할 겸 해서 전체적으로 구조를 변경했다.

수정된 내용은 아래와 같다.

1. 속도 향상(아싸!)
2. BBCode 코드 관련 js는 HTML의 헤더에만 위치하도록 수정
3. 코드 구조를 안정적으로 수정
4. 댓글 펼침 여부에 상관없이 같은 방식으로 안정적으로 처리되도록 수정
5. 타이머 방식에서 load, scroll 이벤트에서 동작하는 방식으로 변경[footnote]KUNA님이 수정하신 BBCode+ v2.2의 아이디어를 빌려왔습니다. KUNA님께 감사드립니다.[/footnote]

아래 파일을 다운받아 설치하면 되며, 설치법은 역시 BBCode for Tistory 2.1을 참고하시기 바란다.

BBCode30.zip

이번 버전에서는 스킨 수정방법에도 대대적인 수정이 있었다. 꼭 도우미를 활용해서 스킨을 다시 설정하기 바란다.
BBCode를 해제했다가 다시 적용하셔야 된다.

BBCode for Tistory 2.5 재업

BBCode for Tistory 2.5 대망의 업데이트를 포스팅하고서 느꼈던 뿌듯함도 잠시...
개뿔님께서 [code] 태그가 이상하게 동작한다는 지적을 날려주셨습니다.

단순하게 [code] 태그를 <pre>로 변환했는데, 그게 문제였던 것입니다.
티스토리는 댓글의 각 행에 자동적으로 <br> 태그를 붙여주는데, 이게 <pre>와 만나면 두 줄씩 떨어지는 겁니다. 젠장찌개.

이 문제를 해결한 버전을 다시 올립니다.

BBCode25 re-up v2.zip

설치방법 등은 지난 포스팅을 참조하시기 바랍니다. ㅠ.ㅠ

이런 모양을 보기가 쉽지는 않았습니다.

BBCode for Tistory 2.5 대망의 업데이트

블로그 관련 to-do 리스트에서 공지한 대로 BBCode를 업데이트 했습니다.
이번 업데이트에서는 IE8과의 호환성은 물론이고, 기존 코드들의 기능 보강, 추가 코드의 지원 등을 지원합니다.

구체적으로 바뀐 부분은 아래와 같습니다.

1. IE8에서 정상동작

IE8에서야 정상이 되어가는 자바스크립트 엔진에서 얘기한 대로 IE6/7과 IE8은 javascript의 처리방법이 상이합니다.
정상적인 js 해석기와 또라이 해석기(IE6, IE7) 모두에서 모두 정상적으로 동작하도록 수정했습니다.

2. 기존 코드의 보강

a. 형식의 통일

[img]의 형식으로 [img]이미지 주소[/img] 외에 [img=이미지 주소] 형식도 지원합니다.
또한, [embed]의 형식으로 [embed=주소 크기] 외에 [embed]주소 크기[/embed] 형식도 지원합니다.

즉, [img], [embed]의 형식으로 두 가지를 모두 지원함으로써 혼란을 제거했습니다.

b. 주소 적합성 확인

[img], [url] 코드에서 주소의 적합성 확인하도록 수정했습니다.
이것은 [url]이 차단되는 문제를 해결하기 위해 만든 [ur], [link](뒤에서 설명) 모두에 해당합니다.

3. 추가 코드의 지원

BBCode for TiStory 2.4에서 지원하던 BBCode는 100% 지원하며 아래의 코드들을 추가적으로 지원합니다.

[size=폰트크기]내용[/size] : 글자의 크기를 지정
[link=주소]이름[/link] : [url]이 태터툴즈 계열에서 자동차단되기 때문에 만든 [ur]과 동일
[email]메일주소[/email] : email 주소 (화면에 주소 자체가 출력됨)
[email=메일주소]이름[/email] : email 주소 (화면에 이름이 출력됨)
[list][*][/list] : 불릿이 달려있는 리스트

[list][*]one[*]two[*]삼[/list]

코드

: 태그 내부에 HTML 코드를 적으면 고정폭 글꼴을 사용해 출력

덧. 다운은 아래 링크에서 할 수 있으며, 설치방법은 BBCode for Tistory 2.1 수정 공개를 참고하시면 됩니다.
도우미는 버전번호 관련된 부분만 수정되었습니다.

BBCode25.zip

달라진 것은 버전번호뿐...

IE8에서야 정상이 되어가는 자바스크립트 엔진. 하지만...

M$에서 Internet Explorer 8.0을 공개했습니다.
하지만, IE8에선 여러가지 문제점이 터지고 있더군요.

저에겐 그 중 하나가 BBCode for TiStory 2.4가 오동작을 한다는 것이었습니다.
원인을 확인해보니 일관성이 없는 IE의 js 엔진에 억지로 맞춰놓은 코드가 원인이었습니다.

아래는 HTML 소스 전체를 뒤져서 <div class="bbcode">가 발견되면 발견된 메시지 박스를 띄우는 코드입니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>IE javascript</title></head>
<body>
<div>no class name</div>
<div class="bbcode">class name : bbcode</div>
<script type="text/javascript">
    var tags = document.getElementsByTagName('div');

    for (var i = 0; i < tags.length; i++)
        if (tags[i].getAttribute('class') == 'bbcode')
            alert("non MSIE!");
</script>
</body></html>

이 별 특성 없는 코드는 Opera, Firefox, Chrome 에서는 버전에 상관없이 잘 동작합니다.

하지만, 대한민국의 국민 웹브라우저 IE에서는 좀 다릅니다.
IE6, IE7에서는 정상동작을 하지 않습니다.
정확히는 getAttribute() 함수를 씹어먹어버립니다.

오류도 띄우지 않습니다. 그야말로 "아무것도 묻지도 따지지도 않고" 넘어갑니다.

이 코드를 IE6, IE7에서 동작시키려면 아래와 같이 변경해야 합니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>IE javascript</title></head>
<body>
<div>no class name</div>
<div class="bbcode">class name : bbcode</div>
<script type="text/javascript">
    var tags = document.getElementsByTagName('div');

    if (/msie/i.test (navigator.userAgent)) { // IE6, 7만을 위하여...
        for (var i = 0; i < tags.length; i++)
            if (tags[i].getAttributeNode('class').value == 'bbcode')
                alert("MSIE!");
    }
    else
    {
        for (var i = 0; i < tags.length; i++)
            if (tags[i].getAttribute('class') == 'bbcode')
                alert("non MSIE!");
    }
</script>
</body></html>

추가된 if (/msie/i.test (navigator.userAgent)) 는 브라우저의 userAgent를 읽어 msie인지 확인하는 부분입니다.
그리고, getAttribute() 함수 대신에 getAttributeNode() 함수를 사용해서 동일하게 동작하도록 만들었습니다.
이렇게 수정하면 IE6, IE7에서도 동일하게 동작합니다.

그런데... 이 코드는 불행하게도 IE8에서는 동작하지 않습니다.

이게 뭐냐고!!!!!!!!!

IE8에서는 getAttributeNode() 함수의 동작방식이 정상적으로 바뀌었기 때문입니다.
IE8을 포함한 거의 모든 웹브라우저에서 정상동작하도록 하려면 아래와 같이 변경해야 합니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>IE javascript</title></head>
<body>
<div>no class name</div>
<div class="bbcode">class name : bbcode</div>
<script type="text/javascript">
    var tags = document.getElementsByTagName('div');

    for (var i = 0; i < tags.length; i++)
        if (tags[i].getAttributeNode('class') &&
            tags[i].getAttributeNode('class').value == 'bbcode')
            alert("MSIE!");
</script>
</body></html>

이제야 MS의 웹브라우저가 정상적인 궤도에 가까워졌습니다.

하지만, 이 상태로 만세를 불러줄 수만은 없는 것이... IE6, IE7에만 최적화된 페이지가 너무나 많기 때문입니다.
더불어 이렇게 버그 투성이로 렌더링하는 것이 소위 "호환성 보기"의 실체란 점도 있습니다.

부디 우리나라의 웹 개발자들이 특정 회사의 브라우저에 종속적이지 않고 웹표준을 준수하면 좋겠습니다.
아마 그랬으면 이런 원초적인 버그가 진작에 해결되지 않았을까요?

덧. 이 사태의 진정한 문제는 IE6, IE7 때문에 getAttribute() 함수 자체가 못쓰는 함수가 되었다는 점입니다.

블로그 관련 to-do 리스트

1. bluenlive.net과 whysoserious.kr 재통합

이게 무슨 딴날당과 친박연대 합치는 소리냐마는요...
블로그를 둘로 쪼개고나니 어느 한 쪽도 제대로 운영이 되지 않는다는 생각이 들었습니다.
게다가, bluenlive.net 메일 주소는 다른 사람들에게 불러주기도 약간 불편하더군요.

그래서 두 블로그를 통합하고, 새로운 도메인(zoc.kr)을 사용할 예정입니다.

a. http://zoc.kr, ha@zoc.kr 를 활성화
b. 새로운 메일 계정으로 새 티스톨 블로그 생성
c. 마지막으로 데이터 모아서 이전개업

이런 순서로 진행할 예정입니다.



2. 스킨 변경

두 블로그를 합치고 나면 스킨은 완전히 다른 스타일로 바꿀 예정입니다.
요즘 워드프레스 스킨을 티스토리용으로 변환한 게 많더군요. 그런 방향으로 갈 생각입니다.

참, 트루타입 글꼴은 작별 예정입니다. 구닥다리 LCD 모니터 등 의외로 가독성이 떨어지는 환경이 많더군요.



3. 자체 flv 플레이어 적용

예쁜 플레이어 하나 적용하고, flv 파일을 직접 올릴 예정입니다.
광고가 뜨는 것이 그닥 보기 좋지 않군요.

이 작업을 하면서 [터미네이터 2] 포스트 동영상의 부활을 추진할 예정입니다.
유튜브여 안녕~

플레이어 코드 보기...

<embed src="http://www.longtailvideo.com/jw/embed/player.swf"
width="700" height="416" bgcolor="undefined"
allowscriptaccess="always" allowfullscreen="true"
flashvars="file=http://blip.tv/file/get/Chyamisl-girlsGenerationTellMe286.flv"/>
</embed></center><br />

4. syntax highlighter 2.0 적용

Syntax Highlighter가 2.0으로 업그레이드 되었습니다.
속도도 빨라졌다고 하고, 테마 기능도 지원하는군요.

하지만, 적용을 위한 코드가 약간 변경되었더군요.
기존 컨텐츠를 위해서 레가시 모드도 지원하던데, 그런 거 적용하지 않고 기존 코드를 몽땅 수정할 예정입니다.




5. cumulus 태그 플러그인 적용 가능성 검토

QAOS의.com의 mepay님 의견을 검토한 결과, 적용 가능성을 검토하기로 했습니다.

여기에서 볼 수 있는데, 느낌이 아주 좋습니다. 가능한 적용할 방법을 찾아볼 예정입니다.

6. BBCode 플러그인 수정

이번에 희대의 괴작 IE8이 나왔는데, BBCode를 제대로 변환하지 못하는 버그가 발생합니다.

IE8... 니들 정말 실망 시키지 않는구나. 언제나 개판이야.

IE8에서도 잘 돌아가도록 수정할 예정입니다.

그리고, 리스트 코드 [list] 를 추가할 예정입니다.
필요하기 때문에 적용할 예정이지만, 깔끔한 코드 구현은 어려울 듯 합니다... ㄷㄷㄷ

BBCode 도우미 + 이모티콘 최종 업데이트!!

OKTO 님과 Forevler 님께서 적용한 BBCode 도우미랑 이모티콘을 조금 변형해서 몽땅 적용했습니다.
더불어 기존의 BBCode와 약간 충돌하던 문제를 해결했습니다.
이 수정이 한동안 최종판이 될 것 같습니다.

1. 007() 과 forevler_007.gif()이 충돌을 일으키는 문제를 수정
    ※ 이 문제는 공개되어 있는 BBCode에서는 발생하지 않습니다.

2. "가가가가"로 되어 있는 글꼴모양을 이미지로 변경

3. 이모티콘 도우미창에 OTL(), 007() 추가

4. BBCode 사용법을 버튼으로 변경

Forevler님의 막강 이모티콘 추가!!!

Forevler님의 블로그에서 BBCode를 이용해서 멋지구리한 아이콘을 구현하셨더군요.

무려 105개의 Animated GIF를 띄우고 클릭하면 추가하는 방식이었습니다.
당장 허락을 받고서 그대로 업어왔습니다.

아이콘까지 제 블로그에 복사했기 때문에 혹시나 Forevler님의 주소가 바뀌어도 문제없이 사용할 수 있습니다. 핫핫핫

멋진 아이콘을 공유해주신 Forevler님께 다시 한번 감사드립니다. 잘 쓰겠습니다. ^^;;;

※ 이 코드에서 사용되는 아이콘은 Onion Club에서 가져온 아이콘들입니다.
    (중국쪽 사이트라 변변한 답글을 쓰지 못했습니다. ^^;;;)

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

사실 js는 업뎃되지 않고, helper만 업뎃되었습니다

티스토리 설정에서 댓글을 펼침으로 설정한 경우에는 기존 BBCode for Tistory를 사용하는데 문제가 없었습니다.

하지만, 접어놓음(펼침 미지정)으로 설정한 경우에는 BBCode가 동작하지 않는 경우가 있었습니다.
(좀 더 정확히는 사이드바의 최근 댓글(recent comments)을 클릭한 경우에 BBCode를 제대로 표시하지 못했습니다)

이러한 문제를 수정한 2.4를 공개합니다.

js 파일은 아무런 수정 없이 버전번호만 바꿨고, helper에서 약간 수정했습니다.
댓글을 펼침으로 설정한 분들은 업데이트가 전혀 필요 없으니 참고하시기바랍니다.

역시, 설치 및 사용법은 BBCode for Tistory 2.1 수정 공개를 참고하시기 바랍니다.

BBCode24patched.zip

티스토리는 BBCode를 지원하라! 지원하라!

※ [red], [blue] 태그에 strong을 집어넣는 멍청한 실수를 해서 수정했습니다. (2008.1.10)
     SAGA님께 다시 한 번 감사드립니다.

BBCode for TiStory 2.3 버그패치

역시 버전번호는 숫자일 뿐…

BBCode for TiStory 2.2는 IE6에서 가끔씩 오동작을 할 때가 있습니다.
특히, [rb]이러쿵[/rb] - [rb]저러쿵[/rb] 처럼 같은 태그를 반복해서 사용하는 경우 적절하게 변환하지 못하는 문제를 일으킬 때가 있습니다.

이러한 문제를 수정한 2.3을 공개합니다.
설치 및 사용법은 BBCode for Tistory 2.1 수정 공개를 참고하시기 바랍니다.

bbcode23.zip

티스토리는 BBCode를 지원하라! 지원하라!

  

BBCode for TiStory 2.2 업데이트 공개

버전이 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일


   

BBCode for Tistory 2.1 수정 공개

블로그를 돌아다녀보니 제가 개발한 BBCode를 사용하시는 분들이 보이더군요. 뿌듯뿌듯~
그런데, 제 입장에서는 누가 사용하시는지를 알지 못해 프로그램의 오류를 파악하기 힘듭니다.
사용하시는 분들께선 이 글에 트랙백을 걸어주시면 좋겠습니다.

※ 환경설정에서 댓글창을 닫은 경우엔 BBCode가 표시되지 않던 문제를 해결했습니다.

티스토리용 BBCode가 2.1로 업그레이드 되었습니다.
이 BBCode의 장점은 아래와 같습니다.

1. 티스토리의 답글에 생명력을 불어넣을 수 있음
    물론, 이것은 BBCode의 특징입니다.

2. 설치/제거가 쉬움
    파일 1개를 업로드한 뒤 스킨 수정 프로그램만 돌리면 됩니다.
    스킨 수정을 한칼에 해주는 프로그램이 있기 때문에 설치/제거가 쉽습니다.
    (실제로 수정되는 내용은 v1.1a/v2.0과 거의 같습니다)

3. 티스토리 버그로 인해 [url=]을 입력할 수 없던 문제 해결
    기존 BBCode 쓰면서 발견한 현상인데, [url=] 코드를 사용하면 댓글이 차단되어 버립니다.
    그래서, [url=] 대신에 [ur=]을 사용해도 동일하게 동작하도록 했습니다.

4. embed 태그 지원(v2.1에서 새로 추가)
    embed 태그를 이용해서 동영상을 간단하게 삽입할 수 있습니다.

---

설치 과정은 아래와 같습니다. (BBCode for Tistory 2.0와 거의 같습니다)

1. 첨부파일 다운받기

BBCode21c.zip

   위 압축파일을 다운받은 뒤 풀면 두 개의 파일이 들어있습니다.
   두 파일은 아래와 같습니다.
    - bbcode21.js : BBCode → HTML 변환기 본체
    - BBCodehelper for TiStorySkin.exe : 스킨 수정 도우미

2. bbcode21.js 업로드

    관리메뉴의 스킨→직접올리기에서 bbcode21.js 파일을 업로드합니다.

3. 스킨 파일 수정

이번에도 물론 얘가 다 알아서 해줍니다. (1.1로 업글했습니다)

   BBCodehelper for TiStorySkin.exe(이하 도우미)를 실행합니다.
   다음, 역시 관리메뉴의 스킨→HTML/CSS 편집에서 skin.html 파일을 복사한 뒤 도우미에 붙여넣습니다.
   그리고는 도우미에서 BBCode 적용 버튼을 클릭해서 내용이 바뀌면 이것을 다시 skin.html에 붙여넣습니다.

   마지막으로 HTML/CSS 편집 화면에서 저장 버튼을 클릭하면 됩니다.

---

지원되는 BBCode는 아래와 같습니다.

1. 일반적으로 널리 사용되는 코드 (v1.1a/v2.0와 동일)

[i]이탤릭[/i] : 이탤릭
[b]볼드[/b] : 볼드
[u]밑줄[/u] : 밑줄
[quote]인용문[/quote] : 인용문 (예제 생략)
[img]이미지 URL[/img] : 이미지 (예제 생략)
[url=http://qaos.com]QAOS[/url] : QAOS (링크)
[color=red]색깔[/color] : 색깔

2. 티스토리의 문제 해결 또는 편리성을 위해 임의로 만든 코드 (v2.0과 거의 같음)

[ru]빨간 밑줄[/ru] : 빨간 밑줄
[bu]파란 밑줄[/bu] : 파란 밑줄
[rb]빨간 볼드[/rb] : 빨간 볼드
[bb]파란 볼드[/bb] : 파란 볼드
[red]빨간색[/red] : 빨간색
[blue]파란색[/blue] : 파란색
[ur=http://qaos.com]QAOS[/ur] : QAOS (링크) / 티스토리 문제 해결
[c=red]색깔[/c] : 색깔
[q]인용문[/q] : 인용문 (예제 생략)
[embed=주소 (폭) (높이)] : 동영상 embed / v2.1에서 추가됨
  [embed=http://kr.youtube.com/watch?v=sxA2FZANE2o]
  [embed=http://kr.youtube.com/v/sxA2FZANE2o 500 300]
  ※ embed에서 폭과 높이는 생략 가능하며, 생략시 425x355로 자동 설정합니다.

3. 치환자 입력 기능 (v1.1a/v2.0과 동일)

\#를 입력하면 \가 사라집니다.
즉, [#\#치환자#\#]를 입력하면 치환자만 남습니다.

덧. 도우미의 버전을 1.0a에서 1.1로 업글했습니다.

변환처리하는 코드를 </body> 앞이 아니라 </s_t3>에 위치하도록 수정했습니다.
레몬펜 등이 설치된 경우엔 BBCode 호출 자체가 너무 늦게 일어나더군요.

환경설정에서 "댓글을 기본적으로 펼치기" 옵션을 꺼둔 경우에는 BBCode가 정상적으로 표시되지 않았는데, 이 경우에도 정상적으로 표시되도록 약간 수정했습니다.

  

정규식으로 구현한 BBCode [embed]

정규식(Regular Expression)은 문자열을 검색 및 치환할 때 사용할 수 있는 강력한 도구입니다.
더욱이 상대적으로 속도가 느린 JavaScript 환경에서는 복잡한 문자열 처리를 빠르게 할 수 있는 도구이기도 합니다.

이번에 BBCode for Tistory 2.1를 만드는 과정에서 동영상을 올릴 수 있는 embed 태그를 추가했는데, 만드는 과정에서 의외의 어려움이 있었고, 이 문제를 해결하는 과정이 재미있었습니다.

이 과정을 지금부터 설명하겠습니다.

---

1. 구현된 Embed 태그의 문법

[embed=주소 (폭) (높이)]

[embed=http://kr.youtube.com/watch?v=Dii3mzMQ3SQ 640 480]
[embed=http://kr.youtube.com/watch?v=Dii3mzMQ3SQ&feature=related]
[embed=http://kr.youtube.com/v/Dii3mzMQ3SQ]
[embed=http://flvs.daum.net/flvPlayer.swf?vid=3xvdXKNmuUo$]

이와 같은 다양한 주소 형태를 지원합니다.

2. 코드의 구현

a.  기본 크기(425×355) 지정

폭과 높이가 지정되지 않은 경우를 위해 기본 크기를 지정합니다.
더불어 문자열 검색을 손쉽게 하기 위해 더미 문자열로 none도 추가합니다.
(뒷쪽 코딩을 간결하게 하기 위함입니다)

str = str.replace(/(\[embed=.+?)]/gi, '$1 425 355 none ]');

b. 옵션 제거

YouTube등의 동영상 서비스는 & 기호 뒤에 옵션을 붙입니다. 이 옵션을 제거합니다.

str = str.replace(/(\[embed=.+?)&amp.+?\s(.+?)]/gi, '$1 $2 ]');

c. /watch?v=* 의 주소를 embed용 주소(/v/*)로 변환

YouTube에서는 사이트에서 보는 주소(URL)의 포맷과 embed용 주소의 포맷이 서로 다릅니다.
사이트 URL를 입력한 경우 embed용 주소로 변환해줍니다.

str = str.replace(/(\[embed=.+?)\/watch\?v=(.+?)]/gi, '$1/v/$2]');

d. HTML의 embed 코드로 변환

여기까지 왔으면 어려운 작업은 다 끝났습니다.
적절한 embed 포맷으로 변환해주면 됩니다.
동영상 주소 뒤에 크기가 줄줄 달려있는데, 맨 앞의 둘만 추출하면 폭과 너비가 나옵니다.

str = str.replace(/\[embed=(.+?)\s(.+?)\s(.+?)\s.+?]/gi, '<center><embed src=\"$1\" width=\"$2\" height=\"$3\"></center>');

※ 실제로 구현할 때는 이 코드들을 아래와 같이 한 줄에 붙여서 넣어야 합니다.

str = str.replace(/정규식/gi, '새 문자열').replace(/정규식/gi, '새 문자열');

정말 쉽죠? (밥 아저씨 버전)


  

BBCode for Tistory 2.0 공개

티스토리용 BBCode v1.0, 티스토리용 BBCode v1.1a를 통해서 티스토리용 BBCode를 시험삼아 구현했었습니다.
그런데, 사용하다 보니 두 가지 커다란 문제가 있었습니다.

1. 설치 과정이 너무 복잡함
   설명을 최대한 쉽게 적는다고 적었지만, 블로그 스킨을 바꾸면서 직접 적용해보니 상당히 어렵더군요.

2. <textarea> 태그가 보기 어색함
   처음 댓글을 달면 <textarea> 속에 생성되고, 다시 <div>로 변환되는데, 이 과정이 어색해보이더군요.
   사실, 이렇게 된 이유는 제가 JavaScript를 잘 몰라서 생긴 문제였습니다.

이러한 문제를 완벽하게 해결한 티스토리용 BBCode 2.0을 공개합니다.

이 BBCode의 장점은 아래와 같습니다.

1. 티스토리의 답글에 생명력을 불어넣을 수 있음
    물론, 이것은 BBCode의 특징입니다.

2. 설치방법이 쉬움
    파일 1개를 업로드한 뒤 스킨 수정 프로그램만 돌리면 됩니다.
    스킨 수정을 한칼에 해주는 프로그램이 있기 때문에 설치가 쉽습니다.
    (실제로 수정되는 내용은 v1.1a와 거의 같습니다)

3. 제거도 간단함
    스킨을 수정해주는 프로그램은 원복도 간단하게 해줍니다.

4. 티스토리 버그로 인해 [url=]을 입력할 수 없던 문제 해결
    기존 BBCode 쓰면서 발견한 현상인데, [url=] 코드를 사용하면 댓글이 차단되어 버립니다.
    그래서, [url=] 대신에 [ur=]을 사용해도 동일하게 동작하도록 했습니다.

---

w0rm9 님처럼 망설이시던 분들… 이젠 써보셔도 좋습니다!

설치 과정은 아래와 같습니다.

1. 첨부파일 다운받기

BBCode4TiStory.zip

   위 압축파일을 다운받은 뒤 풀면 두 개의 파일이 들어있습니다.
   두 파일은 아래와 같습니다.
    - bbcode20.js : BBCode → HTML 변환기 본체
    - BBCodehelper for TiStorySkin.exe : 스킨 수정 도우미

2. bbcode20.js 업로드

    관리메뉴의 스킨→직접올리기에서 bbcode20.js 파일을 업로드합니다.

3. 스킨 파일 수정

얘가 다 알아서 해줍니다.

   BBCodehelper for TiStorySkin.exe(이하 도우미)를 실행합니다.
   다음, 역시 관리메뉴의 스킨→HTML/CSS 편집에서 skin.html 파일을 복사한 뒤 도우미에 붙여넣습니다.
   그리고는 도우미에서 BBCode 적용 버튼을 클릭해서 내용이 바뀌면 이것을 다시 skin.html에 붙여넣습니다.

이 화면에서는 그저 복사/붙이기만 하면 됩니다

   마지막으로 HTML/CSS 편집 화면에서 저장 버튼을 클릭하면 됩니다.

   ※ 이 프로그램에는 BBCode 관련 코드가 중복되는 것을 방지하는 코드도 삽입되어 있습니다

---

지원되는 BBCode는 아래와 같습니다.

1. 일반적으로 널리 사용되는 코드 (v1.1a와 동일)

[i]이탤릭[/i] : 이탤릭
[b]볼드[/b] : 볼드
[u]밑줄[/u] : 밑줄
[quote]인용문[/quote] : 인용문 (예제 생략)
[img]이미지 URL[/img] : 이미지 (예제 생략)
[url=http://qaos.com]QAOS[/url] : QAOS (링크)
[color=red]색깔[/color] : 색깔

2. 티스토리의 문제 해결 또는 편리성을 위해 임의로 만든 코드 (새로 추가)

[ru]빨간 밑줄[/ru] : 빨간 밑줄
[bu]파란 밑줄[/bu] : 파란 밑줄
[rb]빨간 볼드[/rb] : 빨간 볼드
[bb]파란 볼드[/bb] : 파란 볼드
[red]빨간색[/red] : 빨간색
[blue]파란색[/blue] : 파란색
[ur=http://qaos.com]QAOS[/ur] : QAOS (링크) / 티스토리 문제 해결
[c=red]색깔[/c] : 색깔
[q]인용문[/q] : 인용문 (예제 생략)

3. 치환자 입력 기능 (v1.1a와 동일)

\#를 입력하면 \가 사라집니다.
즉, [#\#치환자#\#]를 입력하면 치환자만 남습니다.

  

티스토리용 BBCode v1.1a (역시 전문가 여러분의 도움이 필요합니다)

드디어 여러줄에 걸친 다중태그를 정확하게 해석합니다!

티스토리용 BBCode v1.0을 통해 공개한 티스토리용 BBCode를 하루동안 사용해보니 2개의 문제가 발견되었습니다.

1. 여러줄에 걸친 태그는 전혀 해석을 못함
2. 중첩된 태그를 전혀 해석 못함 (특히 [quote])

두 문제 모두 제가 정규식을 정확하게 이해하지 못해서 발생한 문제들입니다.
이 문제들을 해결한 BBCode.js 파일을 아래에 첨부합니다.

BBCode_11a.zip

이제 버전 1.1a이라는 타이틀을 달고 올리기는 했지만, 많은 한계가 보입니다.
티스토리에서 BBCode를 정식으로 지원할 때까지는 빡세게 계속 달려보겠습니다.

덧1, [qoute]를 해석할 때는 <blockquote>로 변환하는 것이 정석입니다.
하지만, 우리의 IE6/7에 내장된 자바스크립트 엔진의 insertBefore 함수는 <blockquote>를 씹어먹어버리더군요.
그래서 울며 겨자먹기로 <table>로 변환했습니다.

덧2, 아주 자그마한 부분을 변경했습니다. ([quote] 태그 주변에 약간의 여백을 둠)
너무 사소한 변경이라 별도로 포스팅하지 않고, 내용만 약간 수정했습니다.

티스토리는 BBCode를 지원하라! 지원하라!