그런데, 사용하다 보니 두 가지 커다란 문제가 있었습니다.
1. 설치 과정이 너무 복잡함
설명을 최대한 쉽게 적는다고 적었지만, 블로그 스킨을 바꾸면서 직접 적용해보니 상당히 어렵더군요.
2. <textarea> 태그가 보기 어색함
처음 댓글을 달면 <textarea> 속에 생성되고, 다시 <div>로 변환되는데, 이 과정이 어색해보이더군요.
사실, 이렇게 된 이유는 제가 JavaScript를 잘 몰라서 생긴 문제였습니다.
설명을 최대한 쉽게 적는다고 적었지만, 블로그 스킨을 바꾸면서 직접 적용해보니 상당히 어렵더군요.
2. <textarea> 태그가 보기 어색함
처음 댓글을 달면 <textarea> 속에 생성되고, 다시 <div>로 변환되는데, 이 과정이 어색해보이더군요.
사실, 이렇게 된 이유는 제가 JavaScript를 잘 몰라서 생긴 문제였습니다.
이러한 문제를 완벽하게 해결한 티스토리용 BBCode 2.0을 공개합니다.
이 BBCode의 장점은 아래와 같습니다.
1. 티스토리의 답글에 생명력을 불어넣을 수 있음
물론, 이것은 BBCode의 특징입니다.
2. 설치방법이 쉬움
파일 1개를 업로드한 뒤 스킨 수정 프로그램만 돌리면 됩니다.
스킨 수정을 한칼에 해주는 프로그램이 있기 때문에 설치가 쉽습니다.
(실제로 수정되는 내용은 v1.1a와 거의 같습니다)
3. 제거도 간단함
스킨을 수정해주는 프로그램은 원복도 간단하게 해줍니다.
4. 티스토리 버그로 인해 [url=]을 입력할 수 없던 문제 해결
기존 BBCode 쓰면서 발견한 현상인데, [url=] 코드를 사용하면 댓글이 차단되어 버립니다.
그래서, [url=] 대신에 [ur=]을 사용해도 동일하게 동작하도록 했습니다.
물론, 이것은 BBCode의 특징입니다.
2. 설치방법이 쉬움
파일 1개를 업로드한 뒤 스킨 수정 프로그램만 돌리면 됩니다.
스킨 수정을 한칼에 해주는 프로그램이 있기 때문에 설치가 쉽습니다.
(실제로 수정되는 내용은 v1.1a와 거의 같습니다)
3. 제거도 간단함
스킨을 수정해주는 프로그램은 원복도 간단하게 해줍니다.
4. 티스토리 버그로 인해 [url=]을 입력할 수 없던 문제 해결
기존 BBCode 쓰면서 발견한 현상인데, [url=] 코드를 사용하면 댓글이 차단되어 버립니다.
그래서, [url=] 대신에 [ur=]을 사용해도 동일하게 동작하도록 했습니다.
w0rm9 님처럼 망설이시던 분들… 이젠 써보셔도 좋습니다!
1. 첨부파일 다운받기
위 압축파일을 다운받은 뒤 풀면 두 개의 파일이 들어있습니다.
두 파일은 아래와 같습니다.
- bbcode20.js : BBCode → HTML 변환기 본체
- BBCodehelper for TiStorySkin.exe : 스킨 수정 도우미
2. bbcode20.js 업로드
관리메뉴의 스킨→직접올리기에서 bbcode20.js 파일을 업로드합니다.
3. 스킨 파일 수정
BBCodehelper for TiStorySkin.exe(이하 도우미)를 실행합니다.
다음, 역시 관리메뉴의 스킨→HTML/CSS 편집에서 skin.html 파일을 복사한 뒤 도우미에 붙여넣습니다.
그리고는 도우미에서 BBCode 적용 버튼을 클릭해서 내용이 바뀌면 이것을 다시 skin.html에 붙여넣습니다.
마지막으로 HTML/CSS 편집 화면에서 저장 버튼을 클릭하면 됩니다.
※ 이 프로그램에는 BBCode 관련 코드가 중복되는 것을 방지하는 코드도 삽입되어 있습니다
BBCode4TiStory.zip위 압축파일을 다운받은 뒤 풀면 두 개의 파일이 들어있습니다.
두 파일은 아래와 같습니다.
- bbcode20.js : BBCode → HTML 변환기 본체
- BBCodehelper for TiStorySkin.exe : 스킨 수정 도우미
2. bbcode20.js 업로드
관리메뉴의 스킨→직접올리기에서 bbcode20.js 파일을 업로드합니다.
3. 스킨 파일 수정
얘가 다 알아서 해줍니다.
다음, 역시 관리메뉴의 스킨→HTML/CSS 편집에서 skin.html 파일을 복사한 뒤 도우미에 붙여넣습니다.
그리고는 도우미에서 BBCode 적용 버튼을 클릭해서 내용이 바뀌면 이것을 다시 skin.html에 붙여넣습니다.
이 화면에서는 그저 복사/붙이기만 하면 됩니다
※ 이 프로그램에는 BBCode 관련 코드가 중복되는 것을 방지하는 코드도 삽입되어 있습니다
지원되는 BBCode는 아래와 같습니다.
1. 일반적으로 널리 사용되는 코드 (v1.1a와 동일)
[i]이탤릭[/i] : 이탤릭
[b]볼드[/b] : 볼드
[u]밑줄[/u] : 밑줄
[quote]인용문[/quote] : 인용문 (예제 생략)
[img]이미지 URL[/img] : 이미지 (예제 생략)
[url=http://qaos.com]QAOS[/url] : QAOS (링크)
[color=red]색깔[/color] : 색깔
2. 티스토리의 문제 해결 또는 편리성을 위해 임의로 만든 코드 (새로 추가)
[ru]빨간 밑줄[/ru] : 빨간 밑줄
[bu]파란 밑줄[/bu] : 파란 밑줄
[rb]빨간 볼드[/rb] : 빨간 볼드
[bb]파란 볼드[/bb] : 파란 볼드
[red]빨간색[/red] : 빨간색
[blue]파란색[/blue] : 파란색
[ur=http://qaos.com]QAOS[/ur] : QAOS (링크) / 티스토리 문제 해결
[c=red]색깔[/c] : 색깔
[q]인용문[/q] : 인용문 (예제 생략)
3. 치환자 입력 기능 (v1.1a와 동일)
\#를 입력하면 \가 사라집니다.
즉, [#\#치환자#\#]를 입력하면 치환자만 남습니다.
[i]이탤릭[/i] : 이탤릭
[b]볼드[/b] : 볼드
[u]밑줄[/u] : 밑줄
[quote]인용문[/quote] : 인용문 (예제 생략)
[img]이미지 URL[/img] : 이미지 (예제 생략)
[url=http://qaos.com]QAOS[/url] : QAOS (링크)
[color=red]색깔[/color] : 색깔
2. 티스토리의 문제 해결 또는 편리성을 위해 임의로 만든 코드 (새로 추가)
[ru]빨간 밑줄[/ru] : 빨간 밑줄
[bu]파란 밑줄[/bu] : 파란 밑줄
[rb]빨간 볼드[/rb] : 빨간 볼드
[bb]파란 볼드[/bb] : 파란 볼드
[red]빨간색[/red] : 빨간색
[blue]파란색[/blue] : 파란색
[ur=http://qaos.com]QAOS[/ur] : QAOS (링크) / 티스토리 문제 해결
[c=red]색깔[/c] : 색깔
[q]인용문[/q] : 인용문 (예제 생략)
3. 치환자 입력 기능 (v1.1a와 동일)
\#를 입력하면 \가 사라집니다.
즉, [#\#치환자#\#]를 입력하면 치환자만 남습니다.
오오오~~훌륭해요~~ [ru]내친김에 embed까지[/ru] 고고!!
답글삭제c하고 q 훔쳐갑니다.(여태 저생각을 못했다니OTL)
@okto - 2008/05/22 18:00
답글삭제embed는 시도해봤는데, 불가능할 것 같더군요.
size를 업어올 수 없는 경우가 많아서 말이죠. ㅠ.ㅠ
(client side script의 한계라…)
@BLUEnLIVE - 2008/05/22 18:02
답글삭제size까지 입력할 수 있게끔 하면 어떨까요?
대충 둘러보니 사이즈를 중복 입력한 경우, 먼저입력한 크기로 나오는 경우가 많더군요. 그래서 제경우는 size입력 안했을때는 400x300정도로 나오게끔 해줬는데.. 정규식을 알면 편하겠지만;; 좀 다른 문제인가요?
지금보니 댓글에 달린 댓글의 오른쪽 한글자가 살짝 잘리는군요^^;
@okto - 2008/05/22 18:00
답글삭제흠... okto님 블로그를 보니 embed 태그에 width와 height가 있더군요.
원래 [bu]BBCode 문법[/bu]에서 embed 태그에 width, height가 있었나요?
(이런 생각을 하다보면 또 구현하려고 설치는데… [rb]안돼![/rb])
@okto - 2008/05/22 18:00
답글삭제댓글이 씹히는 원인을 곰곰 생각해보니 계층적으로 구성된 스킨의 크기 문제인 것 같습니다.
지금은 제 메인 PC가 아니라서 작업은 어렵네요.
(세컨 PC엔 아무것도 안 깔려있거든요…)
댓글 창 크기를 좀 더 검토해봐야겠습니다.
그리고, embed 태그는 포기하기로 했습니다.
또 빠지면 헤어나오지 못할 것 같습니다. [bb]v^.^[/bb]
@BLUEnLIVE - 2008/05/22 18:56
답글삭제엥? 뭔가 실수로 댓글을 지웠네요ㅠㅠ
저는 [ embed]를 "embed src="로 치환하고 [ /embed]는 뒤에 width, height 적어넣었어요.
그래서 사이즈 입력안하면 적어넣은 사이즈가 되고 입력하면 중복입력인데 먼저 입력한것으로 되니까... 주먹구구식입니다.
BBCode 문법이라는게 사실 마음속에 있는 거니까요.. 규식이와 친분이 있는 [c=blue]Blue'nLive[/c]님이라면 깔끔하게 구현될수 있지 않을까 싶네요^o^
@okto - 2008/05/22 18:00
답글삭제댓글의 오른쪽이 잘리는 문제는 완벽하게 해결했습니다!!!
[rb]FF3[/rb]+[bb]Web Developer[/bb]의 힘이 컸습니다.
@okto - 2008/05/22 18:00
답글삭제지금 사용하시는 [rb]embed 의 소스[/rb]를 보내주시면 안될까요?
규식이랑 짝짜꿍해서 그럴싸해보이는 놈으로 만들어보겠습니다.
[bu](이런식으로 말리는 겁니다 ㅎㅎㅎ)[/bu]
덧. 티스토리가 맘대로 댓글을 지웁니다.
혹시나하고 휴지통 갔더니 쌓여있네요 --;
@okto - 2008/05/22 18:00
답글삭제embed 태그 완성했습니다.
좀 정리해서 포스팅하겠습니다. [rb]ㅠ.ㅠ[/rb]
[embed=http://kr.youtube.com/watch?v=sxA2FZANE2o]
@BLUEnLIVE - 2008/05/23 03:04
답글삭제이제서야 봤는데, 제가 결국 노가다 유인 성공했군요^^
멋집니다!!
스킨 수정 도우미도 스킨 수정에서 구동이 되는 줄 착각하고..
답글삭제요래 조래 훑어보고 있는중에 그게 아닌걸 알고 혼자 실실 웃고 있음돠..
물밀듯 밀려오는 이 창피함...불그락 울그락..
[emo=011]
히히 이모티콘 골라 먹는재미..완전 사랑해요^^
제 스킨에도 함 적용해봐야겠어요..
근데 바탕색이 붉은빛이라..어울릴까 몰겠네요..[emo=006]
@날라리 - 2009/01/22 19:52
답글삭제날라리 님의 배경은 너무 붉은색이라 좀 부담되긴 하더군요. ^^;;;