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

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

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

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

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

---

1. 설치방법

a. bbcode.js 업로드

BBCode.zip

위 파일을 다운받은 후 압축을 풀면 bbcode.js와 bbcode2.js의 두 개의 파일이 나옵니다.
bbcode.js가 원본 파일이고, bbcode2.js는 Creativyst의 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_delete는 2번 나옵니다.
즉, 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를 구현해보겠습니다. 아자자자잣!