*블루님이 알려주신 문제점을 반영해서 글 내용과 스크립트를 수정했습니다. ^^
*제가 사용 중인 버튼 이미지를 함께 업로드했습니다. (포스트 맨 하단 참조)
*Internet Explorer6.0에서는 스크립트 에러가 나며 제대로 작동하지 않습니다. ㅠㅠ

BLUE'nLIVE님(이하 블루님)이 개발하신 BBCode for Tistory를 댓글에 적용시켰습니다.
이제 댓글을 다실 때, 댓글의 색상과 모양을 지정할 수 있고, 그림을 넣을 수도 있으며 주소를 링크시킬 수도 있습니다. 인용문을 삽입하실 수도 있구요. 심지어 동영상도 넣을 수 있지만, 개인적으로 댓글에 동영상같은 무거운게 들어가는 걸 싫어하기 때문에 삽입하시려면 BBCode를 직접 입력하셔야 됩니다.

물론, 제가 단순히 BBCode만 설치했다면 이런 포스트까지 올리지는 않았을 겁니다.
이 포스트의 제목이 <BBCode for Tistory 활용하기>인 만큼, BBCode를 조금 더 유용하게 적용시키는 방법을 이야기할까 합니다.

BBCode for Tistory의 개발자이신 블루님의 블로그에 가보시면, 코멘트 입력하는 곳에 작은 버튼들이 보이실 겁니다. 눈치가 빠르신 분은 아셨겠지만, 그 버튼들을 누르면 자동으로 BBCode가 댓글란에 입력됩니다.
즉, BBCode를 하나하나 입력할 필요 없이 클릭 한번이면 끝난다는 것이죠.
BBCode 인터페이스

블루님 블로그에 적용된 BBCode 입력


물론 댓글 입력란을 아예 위지위그(WYSIWYG) 방식으로 바꾸면 가장 좋겠지만 티스토리를 사용하는 사람들 입장에서는 거의 불가능에 가까운 이야기죠. 그래서 블루님이 하신 것처럼 BBCode를 이용해 WYSIWYG에 근접한 인터페이스를 만드는 방법을 소개하겠습니다.

우선 제가 블로그에 적용시킨 BBCode 버튼들을 살펴보겠습니다.
사용자 삽입 이미지


네... 솔직히 말씀드리자면 버튼 모양은 블루님 것을 거의 배꼈습니다 (그래도 직접 만든 것임ㅠ).
하지만 저도 나름대로 연구한 것이 있었으니... 그건 바로 BBCode가 삽입될 때 필요한 코드를 강화(?)해서 짠 일입니다.

일단 블루님의 BBCode 버튼들 눌러보면 아시겠지만, BBCode가 무조건 댓글의 맨 끝에 붙습니다.
하지만 제 블로그 같은 경우, 블럭설정이 되어있으면 선택된 부분의 시작과 끝에 BBCode를 넣어주고,
블럭설정이 안 되어있으면 커서가 위치한 곳에 BBCode를 삽입하게 되어있습니다.
(해 보시면 뭔 말인지 아실겁니다...)
i)블럭설정(문장이 선택되어있는 상태)이 되어있으면 선택된 부분 앞과 뒤에 BBCode가 붙음.

값 싸고 질 좋은 쇠고기 → 값 싸고 [b]질 좋은[/b] 쇠고기
(*파란 부분이 선택된 문장 부분)

ii) 블럭설정이 없으면 커서가 있는 곳에 코드 삽입.

값 싸고 질 좋은| 쇠고기 → 값 싸고 질 좋은[b][/b] 쇠고기
(*붉은색 막대가 커서의 위치)
**근데 블럭설정된 부분에 여러 BBCode버튼을 누르면 약간의 에러가 있습니다.
    귀찮아서 나중에 고칠지 안 고칠지는 솔직히 모르겠습니다만..;;

자, 그럼 본격적으로 시작해봅시다.
일단은 BBCode 입력에 사용할 버튼이 있어야겠죠. 이건 각자 스킨에 어울리게 디자인해야하는 것이니 넘어가도록 하겠습니다.

그 다음 단계는 코딩 부분인데, 핵심부분은 제가 짜놓은 스크립트 파일을 이용하시면 됩니다.
파일을 다운받으신 후 압축을 푸시면 bbcodegui.js 라는 파일이 생길 겁니다.
그러면 그 파일을 관리자메뉴 → 스킨 → 직접올리기 에서 업로드합니다.

그 다음에는 skin.html 파일을 조금만 수정하면 됩니다.

가장 먼저 <script type="text/javascript" src="./images/bbcode21.js"></script> 부분을 찾은 다음,
그 바로 밑에 <script type="text/javascript" src="./images/bbcodegui.js"></script>를 입력합니다.

그 다음 #_rp_input_comment_# 부분을 찾습니다.
그러면 아마 <textarea ..... 로 시작하는 줄이 나올겁니다.
그 부분에 id="comment_[##_article_rep_id_##]"을 추가합니다. (댓글입력 상자에 id를 지정하는 것)
추가하고 나면 <textarea id="comment_[##_article_rep_id_##]"....... 이렇게 되겠죠?

여기까지하면 사실상 끝난 것과 마찬가지입니다.
이제 BBCode버튼을 적당한 위치에 넣어주시고, 그 이미지에 다음과 같은 코드를 넣으시면 됩니다.
<a onclick="insertAtCursor(document.getElementById('comment_[##_article_rep_id_##]'),
'시작코드','끝코드')">버튼이미지</a>


예를 들어 [b],[/b]코드를 입력해주는 버튼이라면, 아래와 같이 되겠죠.
<a onclick="insertAtCursor(document.getElementById('comment_[##_article_rep_id_##]'),
'[b]','[/b]')"><img src="./images/bbbold.gif"> </a>



그렇게해서 테스트해보시고.... 잘 된다면 성공하신거겠죠? <<
말이 복잡해서 그렇지 스킨을 제작해본 경험이 있으시거나 HTML/CSS를 조금만 아신다면 쉽게 하실 수 있으실 겁니다.

*방명록도 비슷한 방법으로 하시면 됩니다.
  아래 블루님이 다신 댓글을 참고하시면 도움이 될겁니다.

이 코드를 사용하고는 싶은데 버튼 디자인이 귀찮아서 포기하시는 분들을 위해 제가 사용 중인 버튼 이미지를 업로드 했습니다. 아래 파일을 다운 받으신 후 압축을 푸시면 9개의 gif파일이 등장합니다.
그러면 그 파일들을 관리자메뉴 → 스킨 → 직접올리기 에서 업로드합니다.

신고

'사소한 발견' 카테고리의 다른 글

동영상만 UCC? 이제는 문자다.  (8) 2008.05.30
BBCode for Tistory 활용하기  (34) 2008.05.29
블로그란 무엇일까...?  (8) 2008.05.23
윤동주의 서시.  (5) 2008.05.06

댓글은 당신의 얼굴입니다.
이곳에 당신의 아름다운 얼굴을 남겨주세요!

  1. BlogIcon BLUE'nLIVE 2008.05.29 13:13 신고  address  modify / delete  reply

    [b]잇힝![/b] 공부해서 잘 써먹겠습니다. 대단대단요!

  2. BlogIcon BLUE'nLIVE 2008.05.29 21:48 신고  address  modify / delete  reply

    생각난 것이 하나 있습니다.
    이렇게 textarea의 id를 몽땅 rpForm 과 같이 일방적으로 지정해놓으면 한 화면에 글 여러개를 띄운 경우에는 정상적으로 처리되지 않습니다. 여러개의 textarea의 id가 동일하니까요…

    저는 id를 [bb]guest_input_comment[/bb]랑 [bb]article_rep_id[/bb] 라는 치환자를 대입하도록 했습니다.
    (rep_id 앞에는 comment_ 라는 문구를 덧붙였습니다)

    참고하시기바랍니다.

  3. BlogIcon BLUE'nLIVE 2008.05.29 21:49 신고  address  modify / delete  reply

    성공적으로 적용했습니다!!!

    저는 함수 마지막에 textarea에 포커스를 주는 함수를 하나 추가했습니다.
    (제 경우에는 [bb]box.focus();[/bb] )

    FF를 사용하는데, 버튼을 클릭한 뒤에 엔터를 눌렀더니 포커스가 아이콘에 있어서 계속 BBCode가 추가되더군요.

    고맙습니다.

  4. BlogIcon 개뿔 2008.05.30 15:56 신고  address  modify / delete  reply

    일단 받아놓고, 내일부터 해봐야겠습니다.
    고맘습니다.

  5. BlogIcon 개뿔 2008.06.01 11:54 신고  address  modify / delete  reply

    설명해주신대로 해봤는데, BBCODE 버튼을 누르면 스크립트 오류가 나고, 아무 반응이 없습니다.
    제가 잘못설치한 줄 알고 엔즐님의 블로그에서 버튼을 눌러봤는데, 여기서도 똑같이 오류가 나는군요.

    • BlogIcon 엔즐군 2008.06.01 12:53 신고  address  modify / delete

      이것 참 이상하네요.
      현재 제 블로그는 IE6/7, Firefox2/3, Safari3, Opera9.27에서 정상작동을 모두 확인한 상태입니다. 혹시 캐시파일이 남아있거나 할 가능성도 있으니 새로고침을 해보시거나 임시인터넷파일 삭제등을 해보세요.
      위에 블루님도 잘 된다고 하시는 걸 보면 스크립트 자체에는 문제가 없다고 생각합니다.

      제가 개뿔님 블로그에서 테스트해보려고 했는데 주석처리를 해놓으셨네요;;

    • BlogIcon 개뿔 2008.06.01 14:19 신고  address  modify / delete

      잘되는건데, 저희집 컴퓨터가 이상한 모양입니다.
      다른 분들은 잘 되실테니 코드는 정상적으로 삽입해야겠습니다.
      저도 내일 다른 컴퓨터에서 해봐야겠네요.
      번거럽게 해드려서 죄송합니다.

  6. BlogIcon seevaa 2008.06.04 05:22 신고  address  modify / delete  reply

    흠, 열심히 해보았는데, div 내의 name 속성이 걸리네요~

  7. BlogIcon Luxury Q. 2008.06.21 14:47 신고  address  modify / delete  reply

    진짜 하고 싶었는데,

    저도 안되네요..
    눌러도 아무것도 안됨.. 오류가 뜨면 차라리 포기를 안하는데.. ㅠㅠ

    어찌되었든 좋은 강좌 감사드립니다

  8. BlogIcon 삼뇽이 2008.06.23 04:27 신고  address  modify / delete  reply

    저도 한번 달아보았습니다.
    하지만 디자인 실력이 없기에 엔즐님이 만드신 버튼 이미지 그대로 가져다 썼습니다.-_-
    죄송합니다. 좀 더 노력해서 스스로 만들어서 조만간 바꾸도록 하겠습니다.
    아무튼 좋은 활용법 감사드립니다.

  9. BlogIcon Luxury Q. 2008.06.29 00:22 신고  address  modify / delete  reply

    일단 도와주셔서 울트라 캡숑감사드립니다

    혹시나 해서인데 스크립트 창을 써서 넣을 수 있을까요??(인터넷 주소 등)

    스크립트는 아래와 같습니다

    <script>

    a(변수명) = prompt("스크립트창","내용(안써놓으면빈칸)" )

    document.write(a)
    </script>

    • BlogIcon 엔즐군 2008.06.29 03:06 신고  address  modify / delete

      BBCode를 이용해 스크립트를 넣을 수 있냐고 물으신다면 답은 [b]아니오[/b]입니다.

      그리고 저는 BBcodeGui 스크립트만 짰을 뿐, BBCode for Tistory 코드는 BLUE'nLIVE님이 작성하셨기 때문에 그에 관해서는 블루님에게 문의하셔야할 듯 합니다...

  10. BlogIcon Spero spera 2008.06.30 18:57 신고  address  modify / delete  reply

    와아~ 버튼~ 버튼~ 정말 감사드립니다 ^^
    덕분에 아주 깔끔하게 적용했어요.

    • BlogIcon 엔즐군 2008.07.01 00:57 신고  address  modify / delete

      축하드립니다:)
      이제 BBCode와 BBCode 버튼으로 더욱 멋진 블로그를 꾸며보세요:)

    • BlogIcon 엔즐군 2008.07.01 01:10 신고  address  modify / delete

      방금 Spero spera님 블로그에 가봤는데요,
      skin.html에
      [b][color=red]<script type="text/javascript" src="./images/bbcode22.js"></script>[/color][/b]
      구문을 빠트리셨습니다. 그래서 현재 댓글과 방명록이 올라가질 않네요. 부디 빠른 시일에 이 댓글을 발견하셔서 수정하시기 바랍니다...

    • BlogIcon Spero spera 2008.07.01 18:47 신고  address  modify / delete

      감사합니다~ 그새 Blue'n'Live님이 BBCode 2.3을 올려놓으셨더라구요. ㅎㅎ

  11. BlogIcon societism 2008.11.18 15:45 신고  address  modify / delete  reply

    엔즐님 블로그처럼 코멘트 위에다 적용하고 싶은데,
    [rb]어느 위치에다가 태그를 삽입해야 하나요?[/rb]

    • BlogIcon 엔즐군 2008.11.18 17:57 신고  address  modify / delete

      그건 블로그 스킨에 따라 달라서 뭐라 딱 집어말하기가 힘드네요;;
      HTML코드를 분석해서 넣어야하거든요.
      만약 HTML에 익숙치 않으시다면 제 메일로 블로그 스킨 html코드를 보내주시면 제가 수정해서 보내드리겠습니다.

  12. BlogIcon Mr.MindEater™ 2009.01.03 13:13 신고  address  modify / delete  reply

    엔즐님 감사합니다. 덕분에 BBCode Shortcuts 잘 적용했습니다..
    이미지두요 ^^;; 새해 福 많이 받으세요~~;)

    • BlogIcon 재밍 2009.01.09 04:28 신고  address  modify / delete

      저도 이터님 적용하신 것을 보고 다시금 용기를 얻어서 해보는 중입니다.
      최종 버전으로 하니 한번에 깔끔하게 적용이 되었네요. 다시 해보니 참 쉬운 것을...;;;
      자 이제 조금 더 어려운 GUI삽입하는 일만...

  13. BlogIcon 재밍 2009.01.09 05:28 신고  address  modify / delete  reply

    숏컷 적용했습니다. 감사합니다.
    IE6이라 말씀대로 오류로 동작을 안하는데,
    블루님 블로그에서는 제대로 뜨네요 흠...
    뭔가 또 다른 방법이 있는건지...
    알면 알수록 어려운 티스토리 스킨의 늪 ㅠㅠ

  14. BlogIcon BLUE'nLIVE 2009.01.18 15:41 신고  address  modify / delete  reply

    도우미를 포스팅했습니다.
    새로 만든 도우미는 IE6/IE7/FF3에서 모두 잘 동작하는 것 같습니다. ^^;;

  15. BlogIcon JuHoi 2009.04.20 12:53 신고  address  modify / delete  reply

    덕분에 [b]BBCode Shortcuts[/b] 이쁘게 적용했습니다.
    감사합니다. ^.^

  16. BlogIcon 착한외계인 2010.06.16 19:00 신고  address  modify / delete  reply

    감사합니다. 블로그 이전하려고 준비중인데 도움 많이 됐습니다.

  17. BlogIcon alaco 2010.07.27 09:32 신고  address  modify / delete  reply

    안녕하세요.. 정말 열심히 따라했는데...안되네요..
    도와주세요 ㅠㅠㅠㅠㅠㅠㅠㅠ스크립트 문구도 추가하고.. 두번째 문구도 찾아서 했는데..되지 않습니다..
    다 적용했다 싶어서 댓글들어가서 입력했는데도 불구하고 본문을 입력하라는 창이 뜹니다..
    저 좀 봐주세요...

  18. BlogIcon 삶의꿈 2011.05.11 00:24 신고  address  modify / delete  reply

    [img]좋은[/img] [quote]정보[/quote] [u]감사[/u]합니다.
    잠시[b] 테스트[/b]를...^^
    [ur=]http://starcatch.tistory.com/[/ur]

  19. BlogIcon 아침가온 2012.12.30 21:25 신고  address  modify / delete  reply

    감사합니다!

진하게 밑줄 기울림 인용문 그림 삽입 링크 걸기 색상

34
Comments

7
Trackbacks

티스토리 툴바