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

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

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


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

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

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

사용자 삽입 이미지

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


1. 추가 파일 설치


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

쉽죠잉?



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>


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

Trackback 5 Comment 92
  1. 이전 댓글 더보기
  2. Favicon of http://lucifer625.tistory.com BlogIcon 이름이동기 2009.03.20 21:47 address edit & delete reply

    으하하하하핫 성공했습니다 !!!!!!! 우하하하하하

  3. Favicon of http://gamhyong.tistory.com BlogIcon 감허 2009.04.04 03:49 address edit & delete reply

    우선 고맙습니다~ 좋은 자료를 가르쳐주셔서...^^;
    저도 적용은 했는데요.. 아이콘을 누르면 하나만 나와야 하는데, 전 네개씩 나오는군요~

    예를 들어 웃는얼굴을 클릭하면 : ) 요렇게 나와야 하죠~ 근데, 전 : ) : ) : ) : ) 이렇게 나와요.
    죄송하지만 해결책이 없을까요? ㅠ,.ㅜ

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.04.04 09:47 address edit & delete

      제가 접속해보니 하나만 나오는데요.. (크롬)

    • Favicon of http://gamhyong.tistory.com BlogIcon 감허 2009.04.04 15:27 address edit & delete

      음...그렇다면 익스플로러상의 문제인 듯 하네요..
      잘 알겠습니다..암튼 고맙습니다^^;;

  4. Favicon of http://shinlucky.tistory.com BlogIcon shinlucky 2009.06.01 22:05 address edit & delete reply

    [emo=082] 크오오 잘 적용하고 갑니다아~! ^_^

  5. Favicon of http://tp-world.tistory.com BlogIcon 태평군 2009.06.04 01:03 address edit & delete reply

    아까전까지 안되다가 조금 만져보니 되는군요ㅎㅎ
    적용해보니깐 좋네요ㅎㅎ 잘쓰겠습니다!

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.06.04 09:32 address edit & delete

      잘 쓰세요.
      그런데, 약간 수정이 있을 예정이랍니다. 홍홍

  6. Favicon of http://e-forever.co.cc BlogIcon Forevler 2009.06.04 01:06 address edit & delete reply

    [code]<a onclick="insertAtCursor('','[b]','[/b]')" title="진하게" class="rollover">[/code] 여기에는 href="#" 와 return false 안 넣어도 되나요?
    그 아래 것들도 몇개가 return false가 안들어 있네요 8D - 그럼 bbcode버튼을 누를 때마다 최상단으로? ^^

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.06.04 09:31 address edit & delete

      빼먹었네요. ㅋㅋ
      고맙습니다~

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.06.04 11:43 address edit & delete

      수정 완료!

  7. Favicon of http://miru.tistory.com BlogIcon miru 2009.06.05 11:56 address edit & delete reply

    BLUEnLIVE님 안녕하세요~!
    BBCode 삽입도우미가 수정되었네요~?
    현재 위 적용방법되로 따라해서 잘 적용하였습니다~ ^^
    근데 이상하게 댓글 textarea만 좁아지네요?
    방명록 textarea는 포스트 영역만큼 나오는데, 댓글 입력 부분만 좁아져요
    위 주석처리 되어있는 부분 픽셀값도 수정해봤는데,,, 그건 도우미 영역 지정값이더라구요.
    댓글 입력부분 행과 열 부분 수정을 해봤는데,,, 잘 안되네요
    귀찮으시지만, 한번 살펴봐 주실 수 있나요??

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.06.05 13:16 address edit & delete

      textarea의 속성에서 뭔가 빠진 것 같군요.
      지금 스킨의 댓글 textarea가 아래와 같은 모양일 겁니다.

      [code]<textarea name="어쩌고저쩌고" id="어쩌고저쩌고" cols="50" rows="8">[/code]

      여기에 아래와 같이 크기를 추가하면 됩니다.

      [code]<textarea name="어쩌고저쩌고" id="어쩌고저쩌고" cols="50" rows="8" style="width:701px; font-size:12px;">[/code]

      ※ 물론 701px 대신 적절한 값을 정해줘야 됩니다.

      덧. font-size를 같이 적은 이유는 현재 사용하시는 테마에선 댓글창 안의 글자가 너무 커보이기 때문입니다.

  8. Favicon of http://miru.tistory.com BlogIcon miru 2009.06.05 16:47 address edit & delete reply

    항상 감사합니다~! [emo=011]
    스타일로 width값을 지정해주니, 포스트영역만큼 댓글입력 영역이 지정되더군요~!
    댓글입력영역의 글자가 커보이나요?
    IE8에서는 일반적인 크기인데요?? IE6에서는 커보이는 것일까요? --;

    그리고 iNOVE 스킨의 스타일 중 블로그 아이콘 영역이 어느 부분과 충돌되나 봅니다. BLUEnLIVE님 블로그도 블로그 아이콘 왼쪽이 조금 잘리네요~?

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.06.05 17:39 address edit & delete

      1. FF에서는 좀 커보입니다.
      그냥 12px로 지정하면 모든 브라우저에서 다 깔끔해보이니 넣는 것이 좋겠습니다.

      2. 은근히 신경이 쓰였지만, 슬쩍 넘어가려 했습니다. (귀차니즘)
      시간이 나면 방안을 생각해보겠습니다.

    • Favicon of http://miru.tistory.com BlogIcon miru 2009.06.05 20:51 address edit & delete

      파이어폭스에서 그렇게 보이는군요. 폰트크기 12픽셀로 지정해줬습니다~!
      귀찮다고 하시면서,,, 친절한 답변은 무한제공인 것 같은데요~? ;)

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.06.06 19:10 address edit & delete

      아이콘 버그를 수정했습니다.
      아래 포스트를 확인하시기 바랍니다.

      http://zockr.tistory.com/580

    • Favicon of http://miru.tistory.com BlogIcon miru 2009.06.06 21:12 address edit & delete

      까막눈은 코드를 봐도 뭐가 뭔지 모르는데,,,
      역시 찾아주시는군요~!!
      이거 매번 BLUEnLIVE님을 귀찮게 해드려서 어떡하죠~? --;

  9. Favicon of http://starfield.tistory.com BlogIcon starfield 2009.06.17 19:34 address edit & delete reply

    BBCode 3.1에서 안 된다고 칭얼거렸던 starfield입니다.
    덕분에 잘 마무리 했습니다.
    제 나름대로 아이콘 좀 바꿔봤는데, 잘 했는지 모르겠네요.
    감사요~~

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.06.17 22:09 address edit & delete

      아이콘이 예쁘군요. 수고하셨습니다.

  10. EmilyJ 2009.06.22 08:15 address edit & delete reply

    원래 댓글창에 html코드까지 다 나오는건가요?[emo=006]
    [b]볼드체 [/b]설정하면[b] 까지 나다오는데
    이모티콘도 [emo=]이런식으로 표시되고..
    바로 글씨체에 적용되진 않나요??

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.06.22 08:58 address edit & delete

      그렇게 하려면 티스토리에서 지원해주는 수밖에 없습니다만,
      이놈의 티스토리는... 그럴 생각이 전혀 없어보입니다. OTL

  11. Favicon of http://richpaparyan.tistory.com BlogIcon Richpapa 2009.08.03 11:35 address edit & delete reply

    궁금한 것이 있어 또 들렀습니다.
    1. BBCode 도움말 폭
    파이어폭스로 주로 사용하기에 아래 태그 중에 cols=81로 조정을 했습니다.
    <textarea name="" id="comment_" cols="81" rows="8" ></textarea>

    그런데, IE로 보니까. 쭉 늘어나서 안 맞네요. 이것은 어디서 고쳐야 하는건가요?

    2. 태그구름을 보고 따라 했는데, BLUEnLIVE님과 좀 다르게 나오네요.
    (2-1) BLUEnLIVE님의 폰트가 더 이쁘고. ^^
    (2-2) 옆으로 늘어나는 폭도 현실감 있어 보이는데...
    (2-3) 게다가 IE에서는 나오지가 않아요. ㅜㅜ

    이게 버전이 낮은 건가요? 사실 버전 낮은 것을 설치를 하면 안 나옵니다. ㅜㅜ

    • Favicon of http://richpaparyan.tistory.com BlogIcon Richpapa 2009.08.03 23:52 address edit & delete

      BLUEnLIVE 님의 글과 더불어 댓글까지 꼼꼼히 읽어야 하는군요. 완전 삽질했다는... 웹하는 사람들 존경스럽습니다.

      그러나, 태그구름은 포기!! IE에서는 색상반영이 안되더군요. 제것만 이상한것인지....

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.08.04 22:37 address edit & delete

      IE에선 배경색이 먹지 않습니다.
      이 죽일 놈의 IE...

  12. Richpapa 2009.08.05 00:04 address edit & delete reply

    http://richpaparyan.tistory.com/297 여기 가보시면 블로그 사용할 때, 번호를 넣었는데 왼쪽으로 쫙 밀리는 현상이 발생합니다.
    이것은 왜 그럴까요? 제가 웹을 진짜 몰라 이렇게 고수 붙잡고 묻습니다. 도와주세요.

  13. Favicon of http://milaero.tistory.com BlogIcon milaero 2009.08.20 13:36 address edit & delete reply

    [emo=023] ㅎㅎ 좋은것 인데 항상 테그로나오니 좀.. :)

  14. Favicon of http://jong970105.textcube.com BlogIcon jong970105 2010.01.19 18:55 address edit & delete reply

    이것도 텍스트큐브닷컴에 적용 될까요?

    그리고 이 페이지에 들어가니 스압이 걱정 되었는데 글보다 덧글이 더 많은 거였군요...-_-a

  15. Favicon of http://jong970105.textcube.com BlogIcon jong970105 2010.01.19 20:47 address edit & delete reply

    헐퀴 적용할려고 보니 텍스트큐브닷컴은 댓글폼을 치환자로 출력하는 군요.. 어떻게 하셨는지....

    • Favicon of http://zockr.tistory.com BlogIcon zockr 2010.01.19 20:09 address edit & delete

      좀 복잡한데다가, 일반화하기 어려워서 별도 포스팅은 하지 않았습니다.
      잔머리를 꽤 많이 굴렸습니다. ^^;

  16. Favicon of http://bodychange.tistory.com BlogIcon 죠리퐁 2010.10.14 04:29 address edit & delete reply

    좋은 글 잘 보았습니다. 글 대로 적용해 보았는데요. 에디터는 뜨는데 이상하게 페이지 오류가 생기네요...몇번을 해봐도...ㅠㅠ 왜 그런걸까요? 도와주세요.^^;

  17. Favicon of http://happytrees.co.kr/ BlogIcon jinamx@naver.com 2011.02.17 17:48 address edit & delete reply

    저기 ㅠㅠ 이모티콘은 어디서 가져오신지 물어보고싶습니더 ㅠㅠ
    너무 예뻐서 ㅠㅠ

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2011.02.19 17:10 address edit & delete

      예전에 있던 사이트에서 공개된 것을 QAOS에서 가져온 것을 다시 가져온 겁니다.
      원래 사이트는 현재 폐쇄되어있습니다.

    • Favicon of http://rinne.wo.tc BlogIcon Rinne 2011.06.06 21:20 address edit & delete

      BLUEnLIVE님의 HTML소스를 그대로 배껴서 제 블로그 스킨에 적용해 봤는데요~
      그래도 안되는걸로 보아...~ 제 블로그에서 명령어 충돌이 있는듯 싶네요~??
      랄까, 포기입니다 ㅋㅋㅋㅋㅋ

  18. Favicon of http://rinne.wo.tc BlogIcon Rinne 2011.06.05 22:36 address edit & delete reply

    제가...바보라서 BLUEnLIVE님이 쓰신글을 잘 못따라 하겠어요...ㅜㅜ
    BLUEnLIVE님과 똑같이 적용하고 싶은데...
    일단 적용시켜놨긴 했는데...기능이 전혀 안되네요..ㅜㅜ
    어디서부터 잘못된건지...ㅜㅜ;
    도와주세요!! ㅜㅜ

    ps. 이 어려운걸...이렇게 다른분들께 배포하시는...BLUEnLIVE님이 존경스럽네요..ㄷㄷ;

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2011.06.06 13:10 address edit & delete

      열심히 해보시란 말씀 밖엔… ㅎㅎ

  19. Favicon of http://zenti.tistory.com BlogIcon zenti 2011.08.18 19:33 address edit & delete reply

    감사합니다^^..!

  20. Favicon of http://swandream.tistory.com BlogIcon Swan。 2011.12.14 07:17 address edit & delete reply

    음... 설치는 무사히 했습니다만, 효과적용이 전혀 안 되고 있습니다. ㅠ_ㅠ
    댓글에 태그가 그대로 출력될 뿐, 아무런 효과도 없습니다...

    • Favicon of http://swandream.tistory.com BlogIcon Swan。 2011.12.14 07:54 address edit & delete

      아아아... 이건 에디터만 구현하는 거였군요.
      최근에 올리신 3.5버전과 혼용하니 드디어 됩니다!
      잘 쓰겠습니다, 감사해요!

  21. Favicon of http://jhhus.tistory.com BlogIcon 제임스라이언 2012.04.24 19:41 address edit & delete reply

    설치는 잘 됐는데... 지금 사용하고 계신 BBCode 처럼 이모티콘이랑 비밀글을 어떻게 넣나요?

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2012.04.25 00:27 address edit & delete

      걍 노가다로 넣은 겁니다. 으허허허

    • Favicon of http://jhhus.tistory.com/ BlogIcon 제임스 라이언 2012.04.25 17:47 address edit & delete

      노가다로 하신거 좀 알려주실수 없으신가요? +_+ 아무리 해도 에러만 뜨고.. 적용도 안되고.. 미춰버리겠습니다. ㅋ