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. 첨부파일 다운받기


   위 압축파일을 다운받은 뒤 풀면 두 개의 파일이 들어있습니다.
   두 파일은 아래와 같습니다.
    - 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가 정상적으로 표시되지 않았는데, 이 경우에도 정상적으로 표시되도록 약간 수정했습니다.



  
Trackback 10 Comment 44
  1. 이전 댓글 더보기
  2. 그냥 2008.05.23 14:52 address edit & delete reply

    글자가 커지던데..?

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2008.05.23 14:55 address edit & delete

      <div>와 <p> 태그에 대한 스타일이 따로 지정된 경우 스타일이 바뀔 수도 있습니다.
      하지만, 기본적으로 <div>를 <div>로 변환하기 때문에 거의 그럴 일은 없을 것 같네요.

      블로그 주소를 알려주시면 한번 보도록 하겠습니다.

  3. 오류 2008.05.23 15:03 address edit & delete reply

    <html xmlns="http://www.w3.org/1999/xhtml"> 위 라인 때문이요. 요줄 지우고나니 글자 크기 정상으로 돌옴.

  4. Favicon of http://dis1.tistory.com BlogIcon 개뿔 2008.05.25 01:02 address edit & delete reply

    설치해봤는데, 이거 정말 좋습니다.

    여기에는 위아래에 그림도 있고, 누르면 바로 입력이 돼서 사용하기 훨씬 쉽군요.
    나중에 저도 한번 도전해봐야겠습니다.

    근데, 그림을 누르면 꼭 정해진 자리에만 bbcode가 들어가는 것 같습니다.
    커서를 글 중간에 두고 그림을 눌러도 커서 자리에는 삽입이 안되요.--;

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

      위아래 그림을 넣는 방법은 설명이 좀 복잡하기도 하지만, 다른 블로그에서 배운 기술이라 굳이 설명하기 뭣해서 생략했습니다.

      그리고, 코드 삽입 위치는… 자바스크립트로 그 이상 구현하기가 어렵더군요. 그래서 무조건 맨마지막에 붙이도록 했습니다. ;)

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2008.05.29 21:46 address edit & delete

      [ur=http://nzlediary.tistory.com/]엔즐군[/ur] 님의 블로그를 참고해서 커서 위치에 삽입되도록 수정했습니다.

      엔즐군님께 다시 한 번 감사드립니다.

    • 개뿔 2008.05.30 15:56 address edit & delete

      주말에 도전해봐야겠군요.
      블루님도 엔즐님도 모두 수고하셨습니다.

  5. Favicon of http://pennyway.net BlogIcon 페니웨이™ 2008.05.30 19:57 address edit & delete reply

    다시 깔아야겠다능..

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2008.05.30 21:04 address edit & delete

      100% 똑같이 반복하면 됩니다.
      홧팅!

  6. Favicon of http://totoromori.tistory.com/ BlogIcon 샬럿 2008.06.04 00:54 address edit & delete reply

    네이버 블로그 방명록과는 달리 티스토리는 그림같은게 안 들어가져서 너무 아쉬웠는데 그점을 해결하신 분이 계셨군요!+ㅁ+
    너무 좋아보여서 저도 달아보려 똑같이 해봤습니다만 어째서인지 아무 반응 없이 같은 댓글창이군요ㅠ.ㅠ
    무엇의 문제일려나요~

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2008.06.04 01:01 address edit & delete

      아무 문제 없는데요.
      잘 됩니다.

  7. Favicon of http://societism.tistory.com BlogIcon Societism 2008.11.15 17:21 address edit & delete reply

    감사합니다~~~ 저도 됩니다!!!

    덧. 여기 밑에 있는 버튼은 어떻게 만든거신건가요?

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2008.11.15 21:36 address edit & delete

      설명이 너무 길어져서 별도로 포스팅하지 않았습니다.
      조금 복잡합니다만, 엔즐님 블로그를 보시면 대략의 개념이 올라와있습니다. ^^;;;

  8. Favicon of http://noneway.tistory.com BlogIcon 꿈틀꿈틀 2008.12.13 13:47 address edit & delete reply

    먼저 친절한 개발자님께 감사를 드립니다.
    제가 비비코드를 쓰다보니 한가지 불편한 점을 발견하게 되었습니다.
    코드의 시작 가령 b를 열고 b를 닫을때 /의 종결자를 빼먹는 실수를 하면 그 아래달린 댓글까지 죄다 굵은글자 태그가 적용된다는 겁니다.
    이것은 오류가 아닌 당연한 현상임을 압니다만, 댓글러의 이런 사소한 실수를 만회(?) 해줄수 있는 특수한 기능을 삽입해 주실수는 없는지? 제가 기술적으로 잘 몰라서 여쭈어 봅니다.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2008.12.13 15:02 address edit & delete

      잘못 생각하시는 것 같습니다.
      열고 닫는 태그가 정확히 일치하지 않으면 변환하지 않도록 해뒀습니다.

  9. Favicon of http://mindeater.tistory.com BlogIcon Mr.MindEater™ 2009.01.03 01:52 address edit & delete reply

    감사합니다..적용했습니다. 완전 잘쓸께요~~^^
    살짝 질문있는데요 ^^ 엔즐님 GUI 스크립트가 IE6에서는 동작하지 않잖아요??
    그런데 블루님은 먹는데..혹시 힌트를 주실수 있으신지 href="javascript: x()" 이게 차이가 나는거 같아 추가했지만 먹질 않더라구요 ^^;;

    새해 복 많이 받으시구요~~~ 다시한번 감사드립니다..;)

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

      엔즐님스크립트에 그런 문제가 있군요.
      저는 IE6은 포기한 상태라 도움을 드리기 힘들 것 같습니다.

  10. Favicon of http://moro.tistory.com BlogIcon MORO 2009.01.04 12:34 address edit & delete reply

    참 [b]좋은 기능[/b]이라 저도 한번 해보려했는데
    안되네요..!!

    아주간단한데 안되네요
    파일 업로드후
    스킨 변경 helper작동시켜 븥여넣기만 하면 되는데
    그게 안되네요..!!

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

      열심히 해보시란 말씀 외엔 드릴 말씀이 없군요... 쿨럭.

  11. Favicon of http://goohwan.net BlogIcon goohwan 2009.01.15 17:05 address edit & delete reply

    BBCode 적용은 잘 되었는데요~
    Blue'nlive님 처럼 댓글 입력창 위아래에 아이콘이 표시 되지는 않네요;;
    도와주세용~^^*

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.01.15 18:04 address edit & delete

      시간 나면 포스팅하겠습니다만... 요즘 정말로 바쁩니다. ㅠ.ㅠ

    • Favicon of http://goohwan.net BlogIcon goohwan 2009.01.15 18:20 address edit & delete

      넴~^^* 바쁜게 좋은거죠
      전 조금 한가해서 탈인데요^^;;

  12. Favicon of http://nooegoch.net BlogIcon nooe 2009.04.16 06:57 address edit & delete reply

    [img]http://farm4.static.flickr.com/3647/3441414894_75d27d78dc_o.jpg[/img]

    BBcode 설치하여 누에의 낙서댓글을 받으시오!

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

      잘 봤습니다.
      전 그림 잘 그리는 사람이 언제나 부럽더군요. 흑.

  13. Favicon of http://loved.pe.kr BlogIcon 윤초딩 2009.04.26 14:07 address edit & delete reply

    비비코드 여기서 지금 살펴보고 있습니다.. ㅎㅎ
    잼나네요 이거.. 적용시켜보고 글하나 올려야 겠어요..
    물건입니다.. 고생좀 하셨겠어요.. ^^

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

      설치법 등은 이 글을 참조하시구요, 다운은 버전2.5를 받으시기바랍니다. ^^;

  14. Favicon of http://kwangjae.com BlogIcon 아름다운시끼 2009.06.20 02:37 address edit & delete reply

    댓글이 생명력을 넣고 싶어서 bbc 코드를 설치하고 싶은데 설치가 되지 않네요.

    어떤이유일까요..그냥 저렇게 설치를 해도 적용이되지 않고 평상시의 평온한 모습을 그대로 유지하네요.

    문제점을 알고계시면 부탁드립니다. 적용하고싶군요

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

      말씀해주신 것만으로는 도와드릴 방법이 없습니다.

  15. Favicon of http://kwangjae.com BlogIcon 아름다운시끼 2009.06.20 10:13 address edit & delete reply

    티스토리의 기본 스킨 중에 life in mono 라고 하는 아주 보편적인걸 수정해서 사용중입니다.

    이 스킨으로 안된다고 이야기하시는 분들이 있었는지요?

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

      1. 스킨에 따라 되고 안 되는 경우는 없습니다.
      2. 지금 BBCode를 이용한 답글을 달고 보니 BBCode를 적용하지 않았네요.

  16. Favicon of http://kwangjae.com BlogIcon 아름다운시끼 2009.06.20 12:25 address edit & delete reply

    BBC코드가 안되는 상태에서 코드를 넣어놓기 그래서 다시 뺐습니다만, 한번 시간날때 찾아봐야겠습니다. 답글 감사합니다.^^

  17. Favicon of http://nalrari.tistory.com BlogIcon 날라리 2009.07.07 21:26 address edit & delete reply

    [embed=https://www.youtube.com/watch?v=8poQxrykDpg&feature=related]

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

      티스가 알아서 휴지통에 보냈더군요. ㅡㅡ;
      복원해놓았습니다.

    • Favicon of http://nalrari.tistory.com BlogIcon 날라리 2009.07.08 20:27 address edit & delete

      함 셤 삼아 해봤는데...웬일인지 거부 당해서 순간 당황을 했읍니다..머 그럴수도 있겠지 했는데..
      이렇게 배려를 해주실줄은 몰랐읍니다.감동했읍니다.BLUEnLIV님 고맙습니다.
      오늘 함 스킨에 적용해봐야겠어요..^^ 즐거운 밤 되시고 행복하세요.

  18. Favicon of http://comgoon.com BlogIcon 해맑은탱쟈 2009.09.19 04:43 address edit & delete reply

    [ur=http://zockr.tistory.com/493]이 글[/ur] 보고 도우미 설치 했습니다.
    수정버전이 따로 있는지 BLUEnLIV님 도우미랑 좀 다르네요...
    OTL같은건 안먹히는데...따로 추가해줘야 하는건가요?

    • Favicon of http://comgoon.com BlogIcon 해맑은탱쟈 2009.09.19 05:17 address edit & delete

      후~ 새벽 내내 BBCode설치 했네요.....
      벌써 시간이 ;;

      결국 OTL과 007 훗 까지 삽입했어요~^^;
      감사합니다~

      그런데 그 옆쪽에 있는 이모티콘 고르기는 잘 모르겠네요...
      따로 포스팅이 없는 것 같아서 현재로써는 포기입니다...
      지쳤어요 ㅋㅋ

  19. Favicon of http://elkha.tistory.com/ BlogIcon 엘카 2009.09.21 08:46 address edit & delete reply

    이게 뭘까... 한참을 생각하면서 여러번 읽었는데..

    완전 따봉이군요 =_+

    감사합니다.

  20. 툴툴스 2010.02.01 23:55 address edit & delete reply

    [emo=055]잘보구 갑니다.

  21. Favicon of http://univpond.textcube.com BlogIcon 영명준예 2010.08.27 22:57 address edit & delete reply

    [emo=125]음, 텍큐, 티스토리 모두 적용했습니다.
    [ur=http://univpond.textcube.com]텍스트큐브[/ur]
    [ur=http://ym9507.tistory.com]티스토리[/ur]
    매우 감사드려요.
    홍보라고 생각하시면 뻘줌.
    솔직히 쓴 글도 별로 없는데.