티스토리 댓글창에 이모티콘추가와 에디터사용하기[BBCode]

이리저리 쑤시고 다니다 특이한 것들을 발견해서 티스토리 블로그에 한 번 적용해 보았더니 댓글 에디터와 이모티콘을 추가로 사용할수 있더군요.

게시물이 여러 곳에 흩어져 있어서 한 곳에 정리 해봤습니다. 제가 적용해 놓은 모습으로 댓글 에디터를 사용하시려면 여러 가지 소스 추가 및 수정 작업이 필요합니다. 소스 적용을 하기 이전에 반드시 사용중인 스킨을 저장하시고 백업도 하셔야 합니다. 소스 적용 시 문제가 생기면 바로 복구를 할 수 있도록 반드시 스킨 백업은 필수입니다.

티스토리 댓글 창에 이모티콘 추가

1단계 BBCode 적용하기

~~BBCode for Tistory 2.5 재업~~으로 가면 해당 파일을 다운로드 받을 수 있습니다.

~~BBCode for Tistory 2.1 수정 공개~~ 로 가면 자세한 사용 방법이 있습니다. 아래에 간단하게 설명했으니 편하신걸로 보시면 되고요.

BBCode25 사용방법
다운로드 받은 압축 파일을 풀면 2개의 파일이 나옵니다. bbcode25.js 파일은 티스토리 관리 페이지에서 스킨 -> HTML/CSS 편집 -> 파일 업로드 하시고

BBCodehelper for TiStorySkin.exe 를 실행 시킨 후 skin.html 소스 내용을 모두 복사해서 실행화면 빈창에 붙여 넣고 1번 BBCode 적용 버튼 클릭한 후 2번 확인 메시지를 확인, 3번 클립보드로 복사 버튼 클릭으로 복사 후 skin.html 에 그대로 붙여넣고 저장합니다.

위에 내용까지 무사히 완료가 되었다면 BBCode 를 사용할 수 있습니다. 댓글 텍스트의 색상 지정, 링크, 이미지 삽입, embed 동영상 삽입 등의 기능을 사용할 수 있습니다. 사용 가능한 코드의 예제는 아래와 같습니다.


1. 일반 코드 

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

2. 편리한 코드

[ru]빨간 밑줄[/ru] : 빨간 밑줄
[bu]파란 밑줄[/bu] : 파란 밑줄
[rb]빨간 볼드[/rb] : 빨간 볼드
[bb]파란 볼드[/bb] : 파란 볼드
[red]빨간색[/red] : 빨간색
[blue]파란색[/blue] : 파란색
[ur=https://qaos.com]QAOS[/ur] : QAOS (링크) 
[c=red]색깔[/c] : 색깔
[q]인용문[/q] : 인용문 (예제 생략)
 : 동영상 embed 


※ embed에서 폭과 높이는 생략 가능하며, 생략시 425x355로 자동 설정합니다

2단계 BBCode를 에디터 형식으로 꾸미기

BBCode 코드를 적용하여 사용이 가능하더라도 댓글을 작성하는 방문자가 알지 못한다면 무용지물이 됩니다. 코드로 직접 넣어야 하기 때문에 사용법에 어려움을 격는 분들도 있을것으로 예상되므로 댓글에 BBCode를 에디터 형식으로 누구나 손쉽게 사용할 수 있게 만들어 주어야 합니다.

~~BBCode 삽입 도우미 만들기~~로 가시면 자세한 설명과 첨부파일이 있습니다. 해당 게시물이 워낙 자세하게 설명이 되어있으니 차분히 따라하시면 됩니다. 삽입 도우미 어감이 맘에 안들고 에디터가 맞는거 같아서 저는 에디터라고 쭈~~욱 부르겠습니다.

백업용으로 BBCode 댓글 에디터 적용 소스(BBCode_댓글_에디터_적용_소스.txt) 첨부합니다.

3단계 이모티콘 추가하기

Forevler님께서 이모티콘 추가 사용하시던데요. 이모티콘 추가 하는 방법은 게시물이 존재하는 걸 찾지 못해서 그냥 소스 긁어봤습니다. 머리 굴리기 귀찮아서 그냥 끍어온 그대로 적용시켰습니다. ^^ 찾아보니 사용된 이미지는 https://blog.roodo.com/onion_club 에서 배포중이며 라이센스 CC BY-NC-ND입니다.

이미지는 원하시는대로 수정,삭제,추가 하시면 되고요.

구글 드라이브에서 onion_club.rar 파일 다운로드 받아서 압축을 풀면 105개의 이미지와 toggle.js, 이모티콘.TXT 파일이 있습니다. 이미지와 toggle.js 파일들을 티스토리 관리 페이지에서 스킨 -> HTML/CSS 편집 -> 파일업로드 하시고 skin.html 에서 <head></head> 사이에 아래 소스한줄 추가를 합니다.


<script type="text/javascript" src="./images/toggle.js"></script>

2단계에서 추가한 소스와 <textarea> 사이에 첨부 파일 중 이모티콘.TXT 내용 전부를 붙여넣습니다. 방명록, 댓글 2군대 모두 적용하시려면 2군데 모두 소스 추가 하셔야 합니다. 스크롤의 압박이 장난 아닐겁니다. ㅋㅋㅋ

– 수정 추가 09년 05월 01일 01:00 —————————————————————
piera님께서 잘못된 부분을 알려주셔서 수정합니다. 댓글과 방명록 id 값이 다르다는걸 깜박했습니다. ^^ 수정 추가 날짜와 시간에 맞춰 onion_club.rar 파일 교체 했습니다.

첨부파일 이모티콘.TXT 소스에 방명록 이모티콘추가 소스를 별도로 추가했습니다.

2단계에서 추가한소스와 <textarea> 사이에 첨부파일 이모티콘.TXT 내용중 “댓글창에 이모티콘추가하기” 와 “방명록에 이모티콘 추가하기” 소스가 다르니 댓글 창과 방명록에 맞는 소스를 추가해 주셔야 합니다.
————————————————————————————————–

소스내용중 이모티콘 제작자와 라이센스 부분도 적어 두었으니 유지 사용하세요.
주의 – 라이센스상 표기하고 사용하셔야합니다.

그리고 2단계에서 추가한 소스 하단 부분을 아래와 같이 수정 하시면 됩니다. 마찬가지로 방명록 , 댓글 2군대 모두 적용하셨다면 두 군데 모두 수정하셔야 합니다.

2단계에서 추가한 하단소스부분 원본내용

<strong>BBCode 사용법</strong></a></span></div>

아래의 소스로 덮어씌우시면 됩니다.


<div class="emoticonusage">
<a style="cursor: pointer;" onclick="showHide('emoselect')">이모티콘 더보기<//a> / 
<span style="cursor:pointer">
<a onclick="javascript:bbcodeintro();" title="에디터 사용법" class="rollover">
<strong>에디터 사용법</strong></a></span></div>

제작자분께서 GPL 라이센스의 “그 유명한 구글코드의 Code Highlighter를 뜯어고쳐 적용하기로 했습니다.”라고 하셔서 GPL 인줄 알고 여러 가지 추가 작업된 것을 수정, 배포 하려고 했으나 재배포 문의를 들였더니 재배포를 허락치 않는다고 하셔서 글 내용도 전부 수정하느라 좀 늦어졌네요. 위에 작업을 순서대로 다하시면 제가 현재 적용 시켜 사용중인 모양으로 안 나오고 위의 스샷처럼 나올겁니다.

GPL은 같은 라이센스로 배포해야 하는것으로 알고있지만 안된다니 배포는 하지않겠지만 소스 보기로 긁어가셔서 사용 하신다면 아무런 문제가 없다고 판단됩니다.

사용된 이미지는 https://mr-ok.com/tc/entry/bbcode-plugin-for-textcube?category=11 TC용 BBCode plugin + 버튼바 게시물의 하단부분에서 bb_helper.zip 받으시면 되고요.

2단계에서 하신 작업 중 아래의 파란색 문자로된 소스 부분을 붉은색 소스로 대체하시면 됩니다. 문자로 된부분을 이미지로 대체하실분들은 아래처럼 하시면 되겠죠. 이모티콘더보기 에디터 사용법 텍스트도 원하시면 같은방법으로 수정하시면 됩니다.


<strong>가</strong>
<img class="rollover" align="texttop" src="./images/bb_b1.gif"/>
<img src="./images/bb_b2.gif"/>

<em>가</em>
<img class="rollover" align="texttop" src="./images/bb_i1.gif"/>
<img src="./images/bb_i2.gif"/>

<u>가</u>
<img class="rollover" align="texttop" src="./images/bb_u1.gif"/>
<img src="./images/bb_u2.gif"/>

<font color="red">가</font>
<img class="rollover" align="texttop" src="./images/bb_c1.gif"/>
<img src="./images/bb_c2.gif"/>

"인용"
<img class="rollover" align="texttop" src="./images/bb_q1.gif"/>
<img src="./images/bb_q2.gif"/>