BBCode for Tistory 2.1 수정 공개

2008/05/29 11:53
Posted by BLUE'nLIVE Posted in " 컴퓨터야그/블로그 관련 "
블로그를 돌아다녀보니 제가 개발한 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 for TiStory 2.2 업데이트 공개  (21) 2008/06/24
Firefox3 download day 참가!  (18) 2008/06/18
티스토리에서 정말 고쳐주지 않는 LineCalendar 버그  (4) 2008/06/07
BBCode for Tistory 2.1 수정 공개  (28) 2008/05/29
Moving Box 스킨 버그 해결방법  (10) 2008/05/24
최근 발견한 티스토리의 버그 또는 한계점들 7가지  (11) 2008/05/23
정규식으로 구현한 BBCode [embed]  (3) 2008/05/23
BBCode for Tistory 2.0 공개  (12) 2008/05/22
Disclaimer: 이 글은 전기통신기본법 제47조 1항에 따른 공익을 해할 목적이 전혀 없음은 물론, 저는 지금 허위의 통신을 한다는 일체의 인식이 없음을 밝힙니다.
이 아름다운 정부가 나라 일을 정말 아름답게 해서 국민들 생활을 최고로 아름답게 만들었으니, 이 어찌 아름답지 않을소냐?
TAG , , ,
Trackback ( 11 ), Comments ( 28 )

Comments

  1. BlogIcon okto 2008/05/23 13:38

    굿굿!!!
    [embed=http://flvs.daum.net/flvPlayer.swf?vid=RyRLdXkJBHc$ 502 399]
    [embed=http://www.youtube.com/v/zx5w2ditREo]

    perm. |  mod/del. |  reply.
    • BlogIcon BLUE'nLIVE 2008/05/23 13:41

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

      perm. |  mod/del.
  2. BlogIcon 엔즐군 2008/05/23 14:21

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

    perm. |  mod/del. |  reply.
  3. 그냥 2008/05/23 14:52

    글자가 커지던데..?

    perm. |  mod/del. |  reply.
    • BlogIcon BLUE'nLIVE 2008/05/23 14:55

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

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

      perm. |  mod/del.
  4. 오류 2008/05/23 15:03

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

    perm. |  mod/del. |  reply.
  5. BlogIcon 개뿔 2008/05/25 01:02

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

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

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

    perm. |  mod/del. |  reply.
    • BlogIcon BLUE'nLIVE 2008/05/25 03:09

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

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

      perm. |  mod/del.
    • BlogIcon BLUE'nLIVE 2008/05/29 21:46

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

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

      perm. |  mod/del.
    • 개뿔 2008/05/30 15:56

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

      perm. |  mod/del.
  6. BlogIcon 페니웨이™ 2008/05/30 19:57

    다시 깔아야겠다능..

    perm. |  mod/del. |  reply.
  7. BlogIcon 샬럿 2008/06/04 00:54

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

    perm. |  mod/del. |  reply.
  8. BlogIcon Societism 2008/11/15 17:21

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

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

    perm. |  mod/del. |  reply.
    • BlogIcon BLUE'nLIVE 2008/11/15 21:36

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

      perm. |  mod/del.
  9. BlogIcon 꿈틀꿈틀 2008/12/13 13:47

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

    perm. |  mod/del. |  reply.
    • BlogIcon BLUE'nLIVE 2008/12/13 15:02

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

      perm. |  mod/del.
  10. BlogIcon Mr.MindEater™ 2009/01/03 01:52

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

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

    perm. |  mod/del. |  reply.
    • BlogIcon BLUE'nLIVE 2009/01/03 16:10

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

      perm. |  mod/del.
  11. BlogIcon MORO 2009/01/04 12:34

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

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

    perm. |  mod/del. |  reply.
    • BlogIcon BLUE'nLIVE 2009/01/04 16:01

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

      perm. |  mod/del.
  12. BlogIcon goohwan 2009/01/15 17:05

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

    perm. |  mod/del. |  reply.
    • BlogIcon BLUE'nLIVE 2009/01/15 18:04

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

      perm. |  mod/del.
    • BlogIcon goohwan 2009/01/15 18:20

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

      perm. |  mod/del.
  13. BlogIcon nooe 2009/04/16 06:57

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

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

    perm. |  mod/del. |  reply.
    • BlogIcon BLUE'nLIVE 2009/04/16 10:26

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

      perm. |  mod/del.

Why So Serious?

댓글 입력 폼

 
 
 
 
 
 
 
     
 
 
 
 
 
     
 
 
 / 
이모티콘 고르기

prev
next
1 ... 115116117118119120121122123 ... 355