BBCode for TiStory 3.0 업데이트

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

사용자 삽입 이미지

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


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

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

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

1. 속도 향상(아싸!)
2. BBCode 코드 관련 js는 HTML의 헤더에만 위치하도록 수정
3. 코드 구조를 안정적으로 수정
4. 댓글 펼침 여부에 상관없이 같은 방식으로 안정적으로 처리되도록 수정
5. 타이머 방식에서 load, scroll 이벤트에서 동작하는 방식으로 변경[각주:1]

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


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


  1. KUNA님이 수정하신 BBCode+ v2.2의 아이디어를 빌려왔습니다. KUNA님께 감사드립니다. [본문으로]
Trackback 1 Comment 36
  1. Favicon of http://goohwan.net BlogIcon goohwan 2009.05.19 20:21 address edit & delete reply

    기존에 설치된 bbcode2.2를 먼저 해제 한뒤 이용해야 하는 건가요? 바로 적용하였습니다.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.05.19 20:34 address edit & delete

      맞습니다. 잘 쓰시기 바랍니다.
      그리고... 홍보 감사드립니다. ;)

  2. Favicon of http://e-forever.co.cc BlogIcon Forevler 2009.05.19 20:50 address edit & delete reply

    속도가 초대박 향상되었습니다 ;;

    그나저나 강좌 수정해야 되는.. ㅡㅠ

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.05.19 20:57 address edit & delete

      흠흠... 왜 이러세요...
      3.0 브랜치의 출시를 독촉하신 분께서요... ^^;

      농담이구요... 잘 쓰시기 바랍니다.

    • Favicon of http://e-forever.co.cc BlogIcon Forevler 2009.05.19 21:07 address edit & delete

      그나저나 스크립트에 문제가 없는데 전 블록 앞뒤에 구현되지 않는군요 ;
      혹시 뜯어주실 수 있나요~? OTL

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

      지금 보니 IE에선 잘 동작하지 않는군요.
      워낙에 IE를 안 써서 몰랐습니다.

      이 죽일 놈의 IE...

      방법을 한번 찾아보겠습니다.

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

      지금 여러가지로 검토해봤는데, 뭔가 이상하군요.
      forevler님의 코드는 제 블로그에서 사용하는 것과 100% 일치합니다만, 제 블로그에선 정상동작하는 것이 잘 동작하지 않네요.
      허미~

    • Favicon of http://e-forever.co.cc BlogIcon Forevler 2009.05.19 22:52 address edit & delete

      애초부터 IE6에서는 작동을 안했고..
      BLUEnLIVE 님 블로그에선 IE8 잘 작동 합니다.

      지금 말씀주신 대로 수정 일단 해보고 있습니다 호호
      제 블로그에 잠시 후에 답글 달게요~

  3. Favicon of http://oktoya.net BlogIcon okto 2009.05.19 21:43 address edit & delete reply

    [red]드뎌![/red] 완성하셨군요. 감축드립니다. 이제 티스토리 사용자 중 BBCode 모르는 사람 없겠어요ㅎ

  4. Favicon of http://oneniner.net BlogIcon oneniner 2009.05.20 08:58 address edit & delete reply

    ㅎㅎ 적용하니 잘 되는 군요~
    근디 머가 바꾸었지? ㅋㅋㅋ
    아참... 글구 만드는 김에 혹시 Syntex Highlighter 도 이렇게 해줄 생각은 없는지? ㅋㅋ [emo=031]

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

      기능은 달라진 것이 없고, 구조 변경으로 속도만 향상되었다능~
      SH는 작업 소요가 별로 없으니 걍 쓰시라능~

  5. Favicon of http://freddo.wo.tc BlogIcon Freddo 2009.05.20 10:25 address edit & delete reply

    스킨을 교체하면서 업데이트 소식을 듣고 업데이트를 하였는데 추가되질 않네요.
    작동은 하는데 말이죠..

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

      확인해봤는데, BBCode는 잘 동작하는군요.
      추가되지 않는다는 말뜻을 이해를 못하겠군요.
      뭐가 추가되지 않는단 뜻인가요?

  6. Favicon of http://freddo.wo.tc BlogIcon Freddo 2009.05.20 12:06 address edit & delete reply

    위쪽 도구 메뉴 라고 불러야할지.. ==a

    도움말과 이모티콘 고르는 메뉴가 추가가 되질 않네요.

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

      그 내용은 따로 포스팅하지 않았습니다.
      그 도구상자는 알아서 추가하셔야 합니다. 텨텨텨~

    • Favicon of http://freddo.wo.tc BlogIcon Freddo 2009.05.20 13:54 address edit & delete

      헐 소리가 절로 나오는군요.. ==a

  7. Favicon of http://freddo.wo.tc BlogIcon Freddo 2009.05.20 14:51 address edit & delete reply

    이전에 추가해보았는데 너무 오래되서 기억이 나질 않네요..

    도와주세요-

    =3=3

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

      열심히 해보세요. 설치는 셀프입니다. ^^;

  8. Favicon of http://kkamguny.tistory.com BlogIcon 깜군 2009.05.20 16:36 address edit & delete reply

    햐~ 이걸로 수정하고 한참 이모티콘 안되서 고생했어요.[emo=009] 알고보니, 스킨에 BBcode25.js 요걸 새로 수정 안해줬네요. ^^ 좋은 배포 감사드립니다.`[emo=079]

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

      도우미를 이용해서 스킨을 재설정하면 불필요한 코드 일부를 제거해줍니다.

  9. Favicon of http://docuya.tistory.com BlogIcon DocuYa 2009.05.20 19:31 address edit & delete reply

    고맙습니다. :)

    덕분에 업데이트 잘했습니다^^
    [emo=091]

  10. Favicon of http://koc2000.tistory.com/ BlogIcon koc2000/SALM 2009.05.21 00:39 address edit & delete reply

    QAOS 글 보고 왔습니다. salm2000 입니다. 고맙습니다.

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

      잘 쓰시기바랍니다. ^^;

  11. Favicon of http://freddo.wo.tc BlogIcon Freddo 2009.05.21 20:12 address edit & delete reply

    차후 다시 시도해봐야겠습니다.

    =3=3

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

      열심히 하시기바랍니다. ^^;

  12. Favicon of http://kuna.wo.tc BlogIcon 쿠나 2009.05.22 22:57 address edit & delete reply

    뒤늦게 왔습니다~ 저도 스크롤 아이디어는 lazierLoad 자바스크립트 플러그인 보고 응용한 거라서 말이죠 ^^;.. 텍큐쪽은 덧글창 부분이 수정불가하기에 통합시킬수가 없어서 아쉬웠는데 이렇게 티스토리용이 나오니 기쁘긴 합니다 :).

    그런데 프로토타입을 쓴 이유가 브라우저 간 호환성을 맞추기 위해서 그렇게 쓰긴 했는데.. 대체할 수 있는 방법이 있나 보네요. 저도 소스 참고 해보겠습니다 :).

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

      크로스 브라우징을 위한 코드들이 많이 있습니다.
      프로토타입은 그런 코드들을 집대성한 것이구요.

      BBCode에선 이벤트 등록하는 부분과 <div class="bbcode"> 찾는 부분만 적용하면 되기 때문에 그냥 구현했습니다.

  13. Favicon of http://coreanboi.tistory.com BlogIcon 꾼이 2009.06.05 00:34 address edit & delete reply

    우왕 ㅋㅋ 잘쓰겠습니다.
    제 블로그에서는 글 쓰고 바로 수정버튼 눌르면 댓글창이 닫아지는 버그가 있네요.
    제가 뭔가를 잘못해서 그런건가요?
    테스트: [b]bold [/b][i]italic [/i][u]underline [/u][color=red]red [/color][quote]quote [/quote][ur=http://]hyperlink[/ur]

    • Favicon of http://coreanboi.tistory.com BlogIcon 꾼이 2009.06.05 00:37 address edit & delete

      아. 보니까 bold italic이런것들이 제대로 적용 안되었을 때(로딩 중에) 눌러버리면 그렇게 되는군요.

  14. Favicon of http://Freddo.wo.tc BlogIcon Freddo 2009.06.06 13:03 address edit & delete reply

    어제 BBCode를 다시 시도하여 결국 성공했습니다 :D

    그런데 문제가 하나 있더군요.

    바로 답글에는 BBCode 가 적용이 되지 않는 문제입니다.

    [color=red]이렇게[/color] 을 적어두면 [*color=red]이렇게[*/color] 이 답글에 고스란히 나옵니다.

    수정 부탁드립니다.

    =3=3

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

      무슨 뜻인지 이해를 못하겠군요.
      조금 더 자세히 설명을 해주시기 바랍니다.

  15. Favicon of http://freddo.wo.tc BlogIcon Freddo 2009.06.06 14:44 address edit & delete reply

    [img]http://freddof.wo.to/bbcode.png[/img]

    위 이미지와 같이 bbcode 가 적용이 안 됩니다. ==a

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

      코드를 좀 더 가볍게 만들기 위해 타이머 방식을 버리고 스크롤 이벤트를 감시하도록 만들었습니다.
      댓글을 단 뒤에 전혀 스크롤이 없으면 적용이 안 됩니다.

      그 변화는 의도적인 부분입니다.

  16. zzz 2010.01.10 22:56 address edit & delete reply

    [emo=117][emo=118][emo=119][emo=120]