- BBCode for Tistory 2.0 공개
- 컴퓨터야그/블로그 관련
- 2008. 5. 22. 14:49
- BBCode, it, 블로그, 티스토리
그런데, 사용하다 보니 두 가지 커다란 문제가 있었습니다.
설명을 최대한 쉽게 적는다고 적었지만, 블로그 스킨을 바꾸면서 직접 적용해보니 상당히 어렵더군요.
2. <textarea> 태그가 보기 어색함
처음 댓글을 달면 <textarea> 속에 생성되고, 다시 <div>로 변환되는데, 이 과정이 어색해보이더군요.
사실, 이렇게 된 이유는 제가 JavaScript를 잘 몰라서 생긴 문제였습니다.
이러한 문제를 완벽하게 해결한 티스토리용 BBCode 2.0을 공개합니다.
이 BBCode의 장점은 아래와 같습니다.
물론, 이것은 BBCode의 특징입니다.
2. 설치방법이 쉬움
파일 1개를 업로드한 뒤 스킨 수정 프로그램만 돌리면 됩니다.
스킨 수정을 한칼에 해주는 프로그램이 있기 때문에 설치가 쉽습니다.
(실제로 수정되는 내용은 v1.1a와 거의 같습니다)
3. 제거도 간단함
스킨을 수정해주는 프로그램은 원복도 간단하게 해줍니다.
4. 티스토리 버그로 인해 [url=]을 입력할 수 없던 문제 해결
기존 BBCode 쓰면서 발견한 현상인데, [url=] 코드를 사용하면 댓글이 차단되어 버립니다.
그래서, [url=] 대신에 [ur=]을 사용해도 동일하게 동작하도록 했습니다.
w0rm9 님처럼 망설이시던 분들… 이젠 써보셔도 좋습니다!
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는 아래와 같습니다.
[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와 동일)
\#를 입력하면 \가 사라집니다.
즉, [#\#치환자#\#]를 입력하면 치환자만 남습니다.
'컴퓨터야그 > 블로그 관련' 카테고리의 다른 글
| 최근 발견한 티스토리의 버그 또는 한계점들 7가지 (11) | 2008.05.23 |
|---|---|
| 정규식으로 구현한 BBCode [embed] (3) | 2008.05.23 |
| BBCode for Tistory 2.0 공개 (12) | 2008.05.22 |
| 불펌 방지가 적용된 블로그에 레몬펜 글 남기는 법 (Firefox) (27) | 2008.05.19 |
| 티스토리 링크의 팝업메뉴 구현 방법 (10) | 2008.05.16 |
| 블로그 스킨(Moving Box) 변환기 #3 (14) | 2008.05.15 |
-
-
BLUEnLIVE 2008.05.22 18:02
embed는 시도해봤는데, 불가능할 것 같더군요.
size를 업어올 수 없는 경우가 많아서 말이죠. ㅠ.ㅠ
(client side script의 한계라…) -
okto 2008.05.22 18:31
size까지 입력할 수 있게끔 하면 어떨까요?
대충 둘러보니 사이즈를 중복 입력한 경우, 먼저입력한 크기로 나오는 경우가 많더군요. 그래서 제경우는 size입력 안했을때는 400x300정도로 나오게끔 해줬는데.. 정규식을 알면 편하겠지만;; 좀 다른 문제인가요?
지금보니 댓글에 달린 댓글의 오른쪽 한글자가 살짝 잘리는군요^^; -
BLUEnLIVE 2008.05.22 18:32
흠... okto님 블로그를 보니 embed 태그에 width와 height가 있더군요.
원래 [bu]BBCode 문법[/bu]에서 embed 태그에 width, height가 있었나요?
(이런 생각을 하다보면 또 구현하려고 설치는데… [rb]안돼![/rb]) -
BLUEnLIVE 2008.05.22 18:56
댓글이 씹히는 원인을 곰곰 생각해보니 계층적으로 구성된 스킨의 크기 문제인 것 같습니다.
지금은 제 메인 PC가 아니라서 작업은 어렵네요.
(세컨 PC엔 아무것도 안 깔려있거든요…)
댓글 창 크기를 좀 더 검토해봐야겠습니다.
그리고, embed 태그는 포기하기로 했습니다.
또 빠지면 헤어나오지 못할 것 같습니다. [bb]v^.^[/bb] -
okto 2008.05.22 18:57
엥? 뭔가 실수로 댓글을 지웠네요ㅠㅠ
저는 [ embed]를 "embed src="로 치환하고 [ /embed]는 뒤에 width, height 적어넣었어요.
그래서 사이즈 입력안하면 적어넣은 사이즈가 되고 입력하면 중복입력인데 먼저 입력한것으로 되니까... 주먹구구식입니다.
BBCode 문법이라는게 사실 마음속에 있는 거니까요.. 규식이와 친분이 있는 [c=blue]Blue'nLive[/c]님이라면 깔끔하게 구현될수 있지 않을까 싶네요^o^ -
BLUEnLIVE 2008.05.22 19:35
댓글의 오른쪽이 잘리는 문제는 완벽하게 해결했습니다!!!
[rb]FF3[/rb]+[bb]Web Developer[/bb]의 힘이 컸습니다. -
BLUEnLIVE 2008.05.22 21:35
지금 사용하시는 [rb]embed 의 소스[/rb]를 보내주시면 안될까요?
규식이랑 짝짜꿍해서 그럴싸해보이는 놈으로 만들어보겠습니다.
[bu](이런식으로 말리는 겁니다 ㅎㅎㅎ)[/bu]
덧. 티스토리가 맘대로 댓글을 지웁니다.
혹시나하고 휴지통 갔더니 쌓여있네요 --; -
BLUEnLIVE 2008.05.23 03:04
embed 태그 완성했습니다.
좀 정리해서 포스팅하겠습니다. [rb]ㅠ.ㅠ[/rb]
[embed=http://kr.youtube.com/watch?v=sxA2FZANE2o]
-
-
날라리 2009.01.22 19:52
스킨 수정 도우미도 스킨 수정에서 구동이 되는 줄 착각하고..
요래 조래 훑어보고 있는중에 그게 아닌걸 알고 혼자 실실 웃고 있음돠..
물밀듯 밀려오는 이 창피함...불그락 울그락..
[emo=011]
히히 이모티콘 골라 먹는재미..완전 사랑해요^^
제 스킨에도 함 적용해봐야겠어요..
근데 바탕색이 붉은빛이라..어울릴까 몰겠네요..[emo=006]
Recent comment