2008년 5월 29일 목요일

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가 정상적으로 표시되지 않았는데, 이 경우에도 정상적으로 표시되도록 약간 수정했습니다.



  
작성자: 시간:
라벨: , , , , ,

댓글 51개:

  1. BLUEnLIVE2008년 5월 23일 오후 1:41

    @okto - 2008/05/23 13:38
    고맙습니다.

    그간의 작업이 헛되지 않았다는 것을 느낄 수 있었습니다.

    답글삭제
  2. 엔즐군2008년 5월 23일 오후 2:21

    우와, 정말 수고하셨습니다! 한번 설치해봐야겠네요. :)

    답글삭제
  3. BLUEnLIVE2008년 5월 23일 오후 2:40

    @엔즐군 - 2008/05/23 14:21
    잘 사용하시기 바랍니다.

    답글삭제
  4. 그냥2008년 5월 23일 오후 2:52

    글자가 커지던데..?

    답글삭제
  5. BLUEnLIVE2008년 5월 23일 오후 2:55

    @그냥 - 2008/05/23 14:52
    <div>와 <p> 태그에 대한 스타일이 따로 지정된 경우 스타일이 바뀔 수도 있습니다.

    하지만, 기본적으로 <div>를 <div>로 변환하기 때문에 거의 그럴 일은 없을 것 같네요.



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

    답글삭제
  6. 오류2008년 5월 23일 오후 3:03

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

    답글삭제
  7. BLUEnLIVE's diary++2008년 5월 23일 오후 3:06

    trackback from: 정규식으로 구현한 BBCode [embed]
    정규식(Regular Expression)은 문자열을 검색 및 치환할 때 사용할 수 있는 강력한 도구입니다. 더욱이 상대적으로 속도가 느린 JavaScript 환경에서는 복잡한 문자열 처리를 빠르게 할 수 있는 도구이기도 합니다. 이번에 BBCode for Tistory 2.1를 만드는 과정에서 동영상을 올릴 수 있는 embed 태그를 추가했는데, 만드는 과정에서 의외의 어려움이 있었고, 이 문제를 해결하는 과정이 재미있었습니다. 이 과정을 지금부터..

    답글삭제
  8. 개뿔2008년 5월 25일 오전 1:02

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



    여기에는 위아래에 그림도 있고, 누르면 바로 입력이 돼서 사용하기 훨씬 쉽군요.

    나중에 저도 한번 도전해봐야겠습니다.



    근데, 그림을 누르면 꼭 정해진 자리에만 bbcode가 들어가는 것 같습니다.

    커서를 글 중간에 두고 그림을 눌러도 커서 자리에는 삽입이 안되요.--;

    답글삭제
  9. BLUEnLIVE2008년 5월 25일 오전 3:09

    @개뿔 - 2008/05/25 01:02
    위아래 그림을 넣는 방법은 설명이 좀 복잡하기도 하지만, 다른 블로그에서 배운 기술이라 굳이 설명하기 뭣해서 생략했습니다.



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

    답글삭제
  10. 엔즐군의 다이어리::Chameleon Edition2008년 5월 29일 오후 1:10

    trackback from: BBCode for Tistory 활용하기
    BLUEnLIVE님(이하 블루님)이 개발하신 BBCode for Tistory를 댓글에 적용시켰습니다. 이제 댓글을 다실 때, 댓글의 색상과 모양을 지정할 수 있고, 그림을 넣을 수도 있으며 주소를 링크시킬 수도 있습니다. 인용문을 삽입하실 수도 있구요. 심지어 동영상도 넣을 수 있지만, 개인적으로 댓글에 동영상같은 무거운게 들어가는 걸 싫어하기 때문에 삽입하시려면 BBCode를 직접 입력하셔야 됩니다. 물론, 제가 단순히 BBCode만 설치했다면..

    답글삭제
  11. BLUEnLIVE2008년 5월 29일 오후 9:46

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



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

    답글삭제
  12. 개뿔2008년 5월 30일 오후 3:56

    @BLUEnLIVE - 2008/05/29 21:46
    주말에 도전해봐야겠군요.

    블루님도 엔즐님도 모두 수고하셨습니다.

    답글삭제
  13. 페니웨이™2008년 5월 30일 오후 7:57

    다시 깔아야겠다능..

    답글삭제
  14. BLUEnLIVE2008년 5월 30일 오후 9:04

    @페니웨이™ - 2008/05/30 19:57
    100% 똑같이 반복하면 됩니다.

    홧팅!

    답글삭제
  15. 샬럿2008년 6월 4일 오전 12:54

    네이버 블로그 방명록과는 달리 티스토리는 그림같은게 안 들어가져서 너무 아쉬웠는데 그점을 해결하신 분이 계셨군요!+ㅁ+

    너무 좋아보여서 저도 달아보려 똑같이 해봤습니다만 어째서인지 아무 반응 없이 같은 댓글창이군요ㅠ.ㅠ

    무엇의 문제일려나요~

    답글삭제
  16. BLUEnLIVE2008년 6월 4일 오전 1:01

    @샬럿 - 2008/06/04 00:54
    아무 문제 없는데요.

    잘 됩니다.

    답글삭제
  17. 엔즐군의 다이어리::Chameleon Edition2008년 6월 20일 오전 3:16

    trackback from: BBCode for Tistory를 W3C 표준에 맞게 적용하기
    지난번 "BBCode for Tistory 활용하기"라는 포스트에서 BLUEnLIVE님의 BBCode for Tistory를 소개해드리면서 댓글과 방명록에 BBCode 삽입 버튼을 달 수 있는 방법을 올린 적이 있습니다. 그 포스트가 올라온 뒤 여러 반응들이 있었는데요, 그 중에는 BBCode를 설치한 이후 W3C의 웹표준 규정에 어긋난다는 문의도 있었습니다. 사실 저 역시 블로그를 표준화하는 작업을 진행 중이었기에 그 문의에 적지 않은 신경이 쓰..

    답글삭제
  18. Societism2008년 11월 15일 오후 5:21

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



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

    답글삭제
  19. BLUEnLIVE2008년 11월 15일 오후 9:36

    @Societism - 2008/11/15 17:21
    설명이 너무 길어져서 별도로 포스팅하지 않았습니다.

    조금 복잡합니다만, 엔즐님 블로그를 보시면 대략의 개념이 올라와있습니다. ^^;;;

    답글삭제
  20. Ubuntu와 한국사회2008년 11월 30일 오후 11:33

    trackback from: 한국에서 MS윈도우 없이 보낸 하루
    안써도 되는 MS를 굳이 사용하고, 안써도 되는 네이버를 굳이 사용하면서. 입으론 병신들 존내게 써대네라고 하면서, 본인은 쓸수밖에 없다라.. 이건 뭐 누워서 침뱉고 화풀이하는것도 아니고.. 사람들은 사용료를 지불하고 윈도우를 사용할 권리가 있고, 광고를 보면서 네이버에 검색하러 들어갈 권리가 있고, 돈을 주고 삼성 제품을 사용할 권리가 있어요. 누구도 거기에 대해 간섭을 할 이유는 없죠. - 내 블로그를 방문한 자가 싸갈린 댓글임 30만원짜리 MS..

    답글삭제
  21. Societism network2008년 12월 9일 오후 3:09

    trackback from: 물질 만능주의 사회
    인간 사회의 잔인함. 물질 -Societism. 2008.11.15

    답글삭제
  22. 꿈틀꿈틀2008년 12월 13일 오후 1:47

    먼저 친절한 개발자님께 감사를 드립니다.

    제가 비비코드를 쓰다보니 한가지 불편한 점을 발견하게 되었습니다.

    코드의 시작 가령 b를 열고 b를 닫을때 /의 종결자를 빼먹는 실수를 하면 그 아래달린 댓글까지 죄다 굵은글자 태그가 적용된다는 겁니다.

    이것은 오류가 아닌 당연한 현상임을 압니다만, 댓글러의 이런 사소한 실수를 만회(?) 해줄수 있는 특수한 기능을 삽입해 주실수는 없는지? 제가 기술적으로 잘 몰라서 여쭈어 봅니다.

    답글삭제
  23. BLUEnLIVE2008년 12월 13일 오후 3:02

    @꿈틀꿈틀 - 2008/12/13 13:47
    잘못 생각하시는 것 같습니다.

    열고 닫는 태그가 정확히 일치하지 않으면 변환하지 않도록 해뒀습니다.

    답글삭제
  24. MindEater™ - PhotoLog2009년 1월 3일 오전 1:43

    trackback from: Sky, Blue Sky
    Canon DIGITAL IXUS 870 IS | Multi-Segment | 1/500sec | F/5.6 | 0EV | 5mm | ISO-100 | No Flash ▒ ▒ Canon DIGITAL IXUS 870 IS | Multi-Segment | 1/250sec | F/5.6 | 0EV | 5mm | ISO-80 | No Flash ▒ ▒ Canon DIGITAL IXUS 870 IS | Multi-Segment | 1/640sec | F/5..

    답글삭제
  25. Mr.MindEater™2009년 1월 3일 오전 1:52

    감사합니다..적용했습니다. 완전 잘쓸께요~~^^

    살짝 질문있는데요 ^^ 엔즐님 GUI 스크립트가 IE6에서는 동작하지 않잖아요??

    그런데 블루님은 먹는데..혹시 힌트를 주실수 있으신지 href="javascript: x()" 이게 차이가 나는거 같아 추가했지만 먹질 않더라구요 ^^;;



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

    답글삭제
  26. MindEater™ - PhotoLog2009년 1월 3일 오후 1:09

    trackback from: 블로그 댓글창에 BBCode 적용했습니다.
    티스토리의 댓글창은 텍스트와 플러그인 활성화시 6가지의 이모티콘( )만 사용이 가능합니다. 또한 댓글창에 html을 제공할경우 잘못사용으로 인해 페이지가 깨질수 있어 생겨난 BBCode가 있습니다. 티스토리에서는 지원을 한했었는데 BlueNLive님이 사용가능하도록 수정을 하셨답니다. 현 블로그는 BlueNLive님의 BBCode가 적용이 되어있고 BBCode Shortcuts 이미지들은 엔즐군님 의 설명대로 추가했습니다. 티스토리에서 정식 지원하기..

    답글삭제
  27. BLUEnLIVE2009년 1월 3일 오후 4:10

    @Mr.MindEater™ - 2009/01/03 01:52
    엔즐님스크립트에 그런 문제가 있군요.

    저는 IE6은 포기한 상태라 도움을 드리기 힘들 것 같습니다.

    답글삭제
  28. MORO2009년 1월 4일 오후 12:34

    참 [b]좋은 기능[/b]이라 저도 한번 해보려했는데

    안되네요..!!



    아주간단한데 안되네요

    파일 업로드후

    스킨 변경 helper작동시켜 븥여넣기만 하면 되는데

    그게 안되네요..!!

    답글삭제
  29. BLUEnLIVE2009년 1월 4일 오후 4:01

    @MORO - 2009/01/04 12:34
    열심히 해보시란 말씀 외엔 드릴 말씀이 없군요... 쿨럭.

    답글삭제
  30. 점아저씨의 까칠한 하루2009년 1월 15일 오후 5:04

    trackback from: 티스토리용 BBcode 설치 및 테스트
     블로그도 리뉴얼 했겠다. 이것 저것 블로그에 유용한팁들을 찾던 중 Blue'nlive님 블로그에서 티스토리용 BBcode를 찾았다. 물론 오래전에 나왔는데 뒤늦은 감이 있지만~ BBcode를 넣어보았다~ BBCode24patched.zip 출처 : http://zoc.kr/entry/BBCode-for-TiStory-24-minor-update BBCode 설치법 : http://zoc.kr/352 PS : 스킨을 외부스킨..

    답글삭제
  31. goohwan2009년 1월 15일 오후 5:05

    BBCode 적용은 잘 되었는데요~

    Blue'nlive님 처럼 댓글 입력창 위아래에 아이콘이 표시 되지는 않네요;;

    도와주세용~^^*

    답글삭제
  32. BLUEnLIVE2009년 1월 15일 오후 6:04

    @goohwan - 2009/01/15 17:05
    시간 나면 포스팅하겠습니다만... 요즘 정말로 바쁩니다. ㅠ.ㅠ

    답글삭제
  33. goohwan2009년 1월 15일 오후 6:20

    @BLUEnLIVE - 2009/01/15 18:04
    넴~^^* 바쁜게 좋은거죠

    전 조금 한가해서 탈인데요^^;;

    답글삭제
  34. nooe2009년 4월 16일 오전 6:57

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



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

    답글삭제
  35. BLUEnLIVE2009년 4월 16일 오전 10:26

    @nooe - 2009/04/16 06:57
    잘 봤습니다.

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

    답글삭제
  36. 나는 Programmer 다.2009년 4월 19일 오후 9:07

    trackback from: BBCode for Tistory 적용
    BLUEnLIVE님이 개발하신 BBCode for Tistory를 최근 2.5 버전으로 적용시켰습니다. 추가로 엔즐군님이 만들으신 이미지버튼을 적용시켰습니다. 괜찮아보이네요. ^.^

    답글삭제
  37. 윤초딩2009년 4월 26일 오후 2:07

    비비코드 여기서 지금 살펴보고 있습니다.. ㅎㅎ

    잼나네요 이거.. 적용시켜보고 글하나 올려야 겠어요..

    물건입니다.. 고생좀 하셨겠어요.. ^^

    답글삭제
  38. BLUEnLIVE2009년 4월 26일 오후 2:09

    @윤초딩 - 2009/04/26 14:07
    설치법 등은 이 글을 참조하시구요, 다운은 버전2.5를 받으시기바랍니다. ^^;

    답글삭제
  39. 아름다운시끼2009년 6월 20일 오전 2:37

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



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



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

    답글삭제
  40. BLUEnLIVE2009년 6월 20일 오전 9:47

    @아름다운시끼 - 2009/06/20 02:37
    말씀해주신 것만으로는 도와드릴 방법이 없습니다.

    답글삭제
  41. 아름다운시끼2009년 6월 20일 오전 10:13

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



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

    답글삭제
  42. BLUEnLIVE2009년 6월 20일 오전 11:55

    @아름다운시끼 - 2009/06/20 10:13
    1. 스킨에 따라 되고 안 되는 경우는 없습니다.

    2. 지금 BBCode를 이용한 답글을 달고 보니 BBCode를 적용하지 않았네요.

    답글삭제
  43. 아름다운시끼2009년 6월 20일 오후 12:25

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

    답글삭제
  44. 날라리2009년 7월 7일 오후 9:26

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

    답글삭제
  45. BLUEnLIVE2009년 7월 8일 오전 12:01

    @날라리 - 2009/07/07 21:26
    티스가 알아서 휴지통에 보냈더군요. ㅡㅡ;

    복원해놓았습니다.

    답글삭제
  46. 날라리2009년 7월 8일 오후 8:27

    @BLUEnLIVE - 2009/07/08 00:01
    함 셤 삼아 해봤는데...웬일인지 거부 당해서 순간 당황을 했읍니다..머 그럴수도 있겠지 했는데..

    이렇게 배려를 해주실줄은 몰랐읍니다.감동했읍니다.BLUEnLIV님 고맙습니다.

    오늘 함 스킨에 적용해봐야겠어요..^^ 즐거운 밤 되시고 행복하세요.

    답글삭제
  47. 해맑은탱쟈2009년 9월 19일 오전 4:43

    [ur=http://zoc.kr/493]이 글[/ur] 보고 도우미 설치 했습니다.

    수정버전이 따로 있는지 BLUEnLIV님 도우미랑 좀 다르네요...

    OTL같은건 안먹히는데...따로 추가해줘야 하는건가요?

    답글삭제
  48. 해맑은탱쟈2009년 9월 19일 오전 5:17

    @해맑은탱쟈 - 2009/09/19 04:43
    후~ 새벽 내내 BBCode설치 했네요.....

    벌써 시간이 ;;



    결국 OTL과 007 훗 까지 삽입했어요~^^;

    감사합니다~



    그런데 그 옆쪽에 있는 이모티콘 고르기는 잘 모르겠네요...

    따로 포스팅이 없는 것 같아서 현재로써는 포기입니다...

    지쳤어요 ㅋㅋ

    답글삭제
  49. 엘카2009년 9월 21일 오전 8:46

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



    완전 따봉이군요 =_+



    감사합니다.

    답글삭제
  50. 툴툴스2010년 2월 1일 오후 11:55

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

    답글삭제
  51. BLUEnLIVE2010년 8월 27일 오후 10:57

    @영명준예 - 2010/08/27 22:57
    잘 쓰세요

    답글삭제

피드 구독하기: 댓글 (Atom)