티스토리용 BBCode v1.0 공개 (전문가 여러분의 손길을 기다립니다)

사용자 삽입 이미지

BBCode가 제대로 지원되려면 아직 멀었습니다…


티스토리용 BBCode v1.1a로 업데이트했습니다. 설치법 및 구조에 관한 부분은 현재의 글을 읽으시면 됩니다.


티스토리용 BBCode 구현. 그러나…에서 포스팅했던 티스토리용 BBCode의 Working version 1.0을 공개합니다.
시스템 자체에서 지원해주는 것처럼 깔끔하지는 않겠지만, 아쉬운대로 쓸만은 한 수준입니다.

혹시 관심있으신 분들은 적용해보시기 바랍니다.
그리고, (혹시 더 관심이 있으신 분들은) 코드를 보시고 개선방안을 가르쳐주시면 고맙겠습니다.



1. 설치방법

a. bbcode.js 업로드

위 파일을 다운받은 후 압축을 풀면 bbcode.js와 bbcode2.js의 두 개의 파일이 나옵니다.
bbcode.js원본 파일이고, bbcode2.jsCreativyst의 JavaScript Compression으로 bbcode.js를 압축한 파일입니다.
(당연한 얘기지만, 둘의 동작은 완벽하게 동일합니다)
이 두 파일 중 하나를 선택해서 스킨→직접올리기 메뉴를 통해 업로드합니다.


b. skin.html 수정 #1

스킨→HTML/CSS 편집 메뉴를 통해서 skin.html을 수정합니다.

우선, 헤더의 마지막을 표시하는 </head> 앞에서 위의 a.에서 업로드한 bbcode.js를 읽도록 지정합니다.
<script language="javascript" src="./images/bbcode.js"></script>
</head> <!-- 이 줄은 추가할 필요 없음. 위치 표시용 -->
다음, 스킨 맨 아래쪽에 있는 </body> 앞에 아래의 코드를 추가합니다.
<script language="javascript">
BBDecode.UpdateBBCodeNow();
</script>
</body> <!-- 역시 추가할 필요 없음 -->


c. skin.html 수정 #2

본문의 치환자들 중에 rp_onclick_submit, rp_rep_onclick_delete, rp_rep_onclick_reply, guest_onclick_submit, guest_rep_onclick_delete, guest_rep_onclick_reply를 찾아 치환자 앞에 모두 BBDecode.ResetTimer(); 를 추가합니다.
(어렵죠? 아래 코드를 보시면 쉽습니다)

원래의 코드가
<a href="#" onclick="[#\#_guest_rep_onclick_delete_#\#]" class="modify">
라면 아래와 같이 BBDecode.ResetTimer();를 추가하면 됩니다.
<a href="#" onclick="BBDecode.ResetTimer(); [#\#_guest_rep_onclick_delete_#\#]" class="modify">
각 치환자는 모두 1번씩 나오는데, *_onclick_delete2번 나옵니다.
즉, BBDecode.ResetTimer();8군데 추가하면 됩니다.


d. skin.html 수정 #3

본문의 치환자들 중에 rp_rep_desc, guest_rep_desc를 찾아 치환자 앞뒤에 각각  <textarea name="bbcode"></textarea> 를 추가합니다.
(역시 아래 코드를 보시면 쉽습니다)

원래의 코드는
<p>[#\#_rp_rep_desc_#\#]</p>
<p>[#\#_guest_rep_desc_#\#]</p>
의 형식인데, 태그를 앞뒤에 추가하면 아래와 같이 됩니다.
<p><textarea name="bbcode">[#\#_rp_rep_desc_#\#]</textarea></p>
<p><textarea name="bbcode">[#\#_guest_rep_desc_#\#]</textarea></p>
각 치환자는 모두 2번씩 나오므로 , <textarea name="bbcode"></textarea>4군데 추가하면 됩니다.


2. 사용법

사용은 댓글을 달면서 적절하게 BBCode를 적어주는 것으로 충분합니다.
그리고, 현재 지원 가능한 BBCode는 총 7가지입니다.

[i]이탤릭[/i] : 이탤릭
[b]볼드[/b] : 볼드
[u]밑줄[/u] : 밑줄
[quote]인용문[/quote] : 인용문 (예제 생략)
[img]이미지 URL[/img] : 이미지 (예제 생략)
[url=http://qaos.com]QAOS[/url] : QAOS (링크)
[color=red]색깔[/color] : 색깔

그리고, 댓글에 치환자를 적을 수 있도록 \#을 입력하면 #으로 변환해주는 기능과 태그를 적을 수 있도록 <[공백]태그 를 입력하면 공백을 없애주는 기능을 포함했습다.
즉, [#\#치환자#\#]를 입력하면 사이에 있는 \는 사라지고, < color>를 입력하면 공백이 사라져 <color>만 남습니다.

태그 입력 기능은 BBCode 변환과 스마일리 기능 등이 겹쳐 어쩔 수 없이 포함시킨 기능입니다.





3. 구현 개념 및 개선필요사항 (전문가 분들의 도움이 필요한 부분)

a. 구현 개념

전체 페이지를 다시 읽는 경우 페이지 마지막에 BBDecode.DecodeAll()함수를 호출하고, 이 함수는 웹페이지에서 <textarea name="bbcode">~</textarea>를 찾아 이 부분에 display='none' 속성을 추가하고, 내부에 있는 BBCode를 HTML로 변환해서 <textarea> 앞에 추가합니다.

댓글을 달거나 지우는 등의 댓글 일부를 수정하는 작업이 발생할 때는 작업 전에 BBDecode.ResetTimer()함수를 호출하고, 이 함수는 최초에 0.5초, 다음에 3초, 그 다음에 5초 간격(이후 계속 5초 간격)으로 BBCode를 HTML로 계속 변환을 시도하며, 변환이 1번 이루어지면 바로 종료됩니다.

이렇게 복잡하게 구성된 이유는 댓글의 갱신이 완료되었을 때 발생하는 이벤트를 모르기 때문입니다.
(그런데, 그런 이벤트가 있기는 한가요?)


b. 개선필요 사항

앞에도 적었듯이, 댓글이 갱신되었을 때 발생하는 이벤트를 알 수 있으면 타이머 부분을 제거하고, 더 단순하고 깔끔하게 수정할 수 있습니다.

또, 변환하는 코드도 짜깁기의 흔적이 역력하여 다소 지저분한 구석이 있고, (저도 왜 만들었는지 모르는) 빈 함수 몇 개가 굴러다닙니다. 불필요한 함수를 없애는 방법이 없을까요?
(자바스크립트도 의외로 어렵군요)





며칠간 티스토리에서 BBCode를 구현해보겠다는 일념으로 여기에만 매달렸더니 정신이 없습니다.
조금 쉬었다가 더 공부해서 완벽한 BBCode를 구현해보겠습니다. 아자자자잣!


 
Trackback 0 Comment 11
  1. Favicon of http://oktoya.net BlogIcon okto 2008.04.19 14:33 address edit & delete reply

    [color=black]앙~ 훌륭하십니다!!
    이제 느긋하게 기다리기만하면 되는건가요?ㅎㅎ
    [img]http://img153.imageshack.us/img153/293/sleepytigerhf0.jpg[/img]
    느긋~하게...


    다른 분들한테 광고하고 다녀야겠네요^^[/color]

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

      드디어 완성했습니다.
      timer 처리에 대해서 약간 개선할 계획이 있기는 하지만, 전체적으로는 현재 구조로 종결할 생각입니다.

      호랑이가 귀엽군요 ^^;;;

    • Favicon of http://oktoya.net BlogIcon okto 2008.04.19 14:35 address edit & delete

      아.. 작업 중이셨군요^^
      축하드립니다. 호박님이 젤먼저 달려오실듯...

      [quote]호랑이가 귀엽군요 ^^;;;[/quote]Sleepy Tiger랍니다^^

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

      드디어 여러줄 걸친 태그를 정상적으로 풀도록 만들었습니다.
      (원래는 [color]가 정확하게 동작하지 않았습니다)

  2. Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2008.04.19 18:56 address edit & delete reply

    [quote]인용
    [quote]이중 인용도 잘 동작합니다 :)[/quote][/quote]

  3. Favicon of http://badnom.com BlogIcon w0rm9 2008.04.28 22:01 address edit & delete reply

    와......짱 멋지시네요.
    [b]-_)b[/b]

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

      하지만 이걸 아무도 적용시키지 않더라는 --;

    • Favicon of http://badnom.com BlogIcon w0rm9 2008.04.28 22:23 address edit & delete

      사실 저도...막상....망설여 지네요^^;;;

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

      w0rm9님 미오미오 [b][color=red]ㅠ.ㅠ[/color][/b]

  4. Favicon of http://rbots.tistory.com BlogIcon rbots 2008.08.17 22:10 address edit & delete reply

    :) 다 좋은데 ㅜㅜ]~
    skin.html에 추가하는 부분이 조금 [b][color=red]헷갈리네요[/color][/b] @.@

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

      [ur=http://zockr.tistory.com/352]BBCode for Tistory 2.1 수정 공개[/ur]와 [ur=http://zockr.tistory.com/390]BBCode for TiStory 2.4 (마이너 업데이트)[/ur]를 읽어보시면 도움이 될 것 같습니다.