BBCode 3.5

2011. 10. 30. 20:32

BBCode를 이용하면 댓글에서도 html을 간접적으로 이용할 수 있습니다.(간접적이라 보안문제 無)

여기에도 적용했습니다. 테스트 해보세요.~_~

BBCode35.zip

위의 압축파일을 압축푼뒤 TiStory 폴더의 내용을 몽땅 HTML/CSS 편집→파일 업로드에 업로드합니다.

이제 Helper 폴더에 있는 BBCodehelper for TiStorySkin.exe를 실행합니다.

일단 블로그의 스킨(skin.html) 전체를 복사한 뒤 도우미 창에 붙입니다. 그리고 'BBCode 적용'버튼을 클릭하면 창에 붙인 스킨이 수정되는데, 이것을 다시 블로그 스킨에 덮어쓰면 됩니다.

적용 가능한 BBCode

[i]이탤릭[/i] : 이탤릭
[b]볼드[/b] : 볼드
[u]밑줄[/u] : 밑줄
[s]지우기[/s] : 지우기
[quote]인용문[/quote] : 인용문 (예제 생략)
[img]이미지 URL[/img] : 이미지 (예제 생략)
[url=http://qaos.com]QAOS[/url] : QAOS (링크)
[color=red]색깔[/color] : 색깔
[size=크기]글자 크기[/size] : 글자 크기
[ru]빨간 밑줄[/ru] : 빨간 밑줄
[bu]파란 밑줄[/bu] : 파란 밑줄
[rb]빨간 볼드[/rb] : 빨간 볼드
[bb]파란 볼드[/bb] : 파란 볼드
[red]빨간색[/red] : 빨간색
[blue]파란색[/blue] : 파란색
[ur=http://qaos.com]QAOS[/ur] : QAOS (링크) / 스팸필터 우회용#1
[link=http://qaos.com]QAOS[/link] : QAOS (링크) / 스팸필터 우회용#2
[c=red]색깔[/c] : 색깔
[q]인용문[/q] : 인용문 (예제 생략)
[embed=주소 (폭) (높이)] : 동영상 embed
[embed=http://kr.youtube.com/watch?v=sxA2FZANE2o]
[embed=http://kr.youtube.com/v/sxA2FZANE2o 500 300]
[embed=http://youtu.be/sxA2FZANE2o 500 300]
※ embed에서 폭과 높이는 생략 가능하며, 생략시 425x355로 자동 설정
[list][*][/list] : 리스트
[spoiler]스포일러[/spoiler] : 스포일러
[code]코드[/code] : 소스코드

이모티콘

:) ;) :P 8D :( --; :D :O :x

치환자 입력 기능

\#를 입력하면 \가 사라집니다.
즉, [#\#치환자#\#]를 입력하면 치환자만 남습니다.

출처 : http://zoc.kr/971

아래부터는 댓글과 방명록에 달려있는 BBCode 삽입 도우미를 다는 방법입니다.

bbcode_helper_images.zip

위에 파일도 역시 파일 업로드에 올립니다.

그 다음은 당연히 스킨편집ㅋ

이번엔 style.css 파일을 수정하는데 맨 마지막에

/* BBCode 도우미 버튼들 */
.emoticonborder { border-style: solid; border-width: 1px; border-color: #cbcbcb; padding: 5px; margin: 0 0 7px 0; height: 22px;}
.emoticons { cursor:pointer; float: left; margin:2px 2px 1px 0; }
.emoticonspace { float: left; margin-right:0px; }
.emoticonusage { cursor:pointer; float: right; }
a.rollover img { border-width:0px; display:block; }
a.rollover img.rollover { display:none; }
a.rollover:hover { position:relative; background-color:transparent !important;}
a.rollover:hover img { display:none; }
a.rollover:hover img.rollover { display:block; }

위에 내용을 추가합니다.

그리고 skin.html 파일을 수정해야 하는데 <title>~</title> 바로 아랫줄에 다음 내용을 추가합니다.

<script>
//이모티콘 추가
function insertAtCursor(myField, openTag, closeTag)
{
	var box = document.getElementById(myField);
	//IE support
	if (/msie/i.test (navigator.userAgent))
	{
		box.focus();
		var sel = document.selection.createRange();
		sel.text = openTag + sel.text + closeTag;
	}
	//Mozilla/Firefox/Netscape 7+ support
	else
	{
		var startPos = box.selectionStart;
		var endPos = box.selectionEnd;
		box.value = box.value.substring(0, startPos) + openTag + box.value.substring(startPos, endPos) + closeTag + box.value.substring(endPos, box.value.length);
		box.selectionStart = box.selectionEnd = endPos + openTag.length + closeTag.length;
	}
	box.focus();
}
function bbcodeintro(){
alert('1. 일반 BBCode\n\n[i]이탤릭[/i] : 이탤릭\n[b]볼드[/b] : 볼드\n[u]밑줄[/u] : 밑줄\n[s]지우기[/s] : 지우기\n[code]소스 코드[/code] : 소스 코드\n[quote]인용문[/quote] : 인용문\n[img]이미지 URL[/img] 또는 [img=이미지 URL] : 이미지\n[url=http://qaos.com]QAOS[/url] : QAOS (링크)\n[color=red]색깔[/color] : 색깔\n[email=주소]이름[/email] 또는 [email]주소[/email] : 전자우편 주소\n\n2. 확장 BBCode\n\n[size=폰트크기]내용[/size] : 글자 크기 지정\n[ru]빨간 밑줄[/ru] : 빨간 밑줄\n[bu]파란 밑줄[/bu] : 파란 밑줄\n[rb]빨간 볼드[/rb] : 빨간 볼드\n[bb]파란 볼드[/bb] : 파란 볼드\n[red]빨간색[/red] : 빨간색\n[blue]파란색[/blue] : 파란색\n[ur=http://qaos.com]QAOS[/ur] : QAOS (링크) \n[link=http://qaos.com]QAOS[/link] : QAOS (링크) \n[c=red]색깔[/c] : 색깔\n[q]인용문[/q] : 인용문\n[embed=주소 (폭) (높이)] 또는 [embed]주소 (폭) (높이)[/embed]: 동영상 embed \n  [embed=http://kr.youtube.com/watch?v=sxA2FZANE2o]\n  [embed=http://kr.youtube.com/v/sxA2FZANE2o 500 300]\n  ※ embed에서 폭과 높이는 생략 가능하며, 생략시 425x355로 자동 설정한다.[list][*][/list] : 불릿이 달린 리스트\n[spoiler]스포일러[/spoiler] : 스포일러\n\n3. 이모티콘\n\n:) ;) :P 8D :( --; :D :O :x');
}
</script>

이제 댓글과 방명록을 수정할 차례!

일단 댓글부터 수정합시다.

아래랑 비슷한 부분을 찾으시구요.

<textarea name="[#\#_rp_input_comment_#\#]" rows="10" cols="50"></textarea>

그 부분을 아래처럼 수정합니다.

<textarea name="[#\#_rp_input_comment_#\#]" id="comment_[#\#_article_rep_id_#\#]" rows="10" cols="50"></textarea>

즉, id만 추가하면 됩니다. 다른 값이 지정되어 있을 경우 이 값으로 바꾸세요.

그리고 이 부분 앞에 아래 내용을 추가합니다.

<div class="emoticonborder" style="/*width:630px;*/">
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[b]','[/b]');return false;" title="진하게" class="rollover">
<img src="./images/bb_b.gif" align="texttop" class="rollover">
<img src="./images/bb_bb.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[i]','[/i]');return false;" title="기울임" class="rollover">
<img src="./images/bb_i.gif" align="texttop" class="rollover">
<img src="./images/bb_ib.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[u]','[/u]');return false;" title="밑줄" class="rollover">
<img src="./images/bb_u.gif" align="texttop" class="rollover">
<img src="./images/bb_ub.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[color=red]','[/color]');return false;" title="글자색" class="rollover">
<img src="./images/bb_c.gif" align="texttop" class="rollover">
<img src="./images/bb_cb.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[quote]','[/quote]');return false;" title="인용" class="rollover">
<img src="./images/bb_q.gif" align="texttop" class="rollover">
<img src="./images/bb_qb.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[img]','[/img]');return false;" title="그림 넣기" class="rollover">
<img src="./images/bb_img.gif" align="texttop" class="rollover">
<img src="./images/bb_imgb.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[ur=http://]','[/ur]');return false;" title="하이퍼링크" class="rollover">
<img src="./images/bb_url.gif" align="texttop" class="rollover">
<img src="./images/bb_urlb.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','','[embed=주소 폭 넓이]');return false;" title="영상 넣기" class="rollover">
<img src="./images/bb_emb.gif" align="texttop" class="rollover">
<img src="./images/bb_embb.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_[#\#_article_rep_id_#\#]', '', ':)');return false;" title=":)" class="rollover">
<img src="./images/bbemo1.gif" align="texttop" class="rollover">
<img src="./images/bbemo1g.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_[#\#_article_rep_id_#\#]', '', ';)');return false;" title=";)" class="rollover">
<img src="./images/bbemo2.gif" align="texttop" class="rollover">
<img src="./images/bbemo2g.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_[#\#_article_rep_id_#\#]', '', ':P');return false;" title=":P" class="rollover">
<img src="./images/bbemo3.gif" align="texttop" class="rollover">
<img src="./images/bbemo3g.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_[#\#_article_rep_id_#\#]', '', '8D');return false;" title="8D" class="rollover">
<img src="./images/bbemo4.gif" align="texttop" class="rollover">
<img src="./images/bbemo4g.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_[#\#_article_rep_id_#\#]', '', ':(');return false;" title=":(" class="rollover">
<img src="./images/bbemo5.gif" align="texttop" class="rollover">
<img src="./images/bbemo5g.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_[#\#_article_rep_id_#\#]', '', '--;');return false;" title="--;" class="rollover">
<img src="./images/bbemo6.gif" align="texttop" class="rollover">
<img src="./images/bbemo6g.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_[#\#_article_rep_id_#\#]', '', ':D');return false;" title=":D" class="rollover">
<img src="./images/bbemo7.gif" align="texttop" class="rollover">
<img src="./images/bbemo7g.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_[#\#_article_rep_id_#\#]', '', ':O');return false;" title=":O" class="rollover">
<img src="./images/bbemo8.gif" align="texttop" class="rollover">
<img src="./images/bbemo8g.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_[#\#_article_rep_id_#\#]', '', ':x');return false;" title=":x" class="rollover">
<img src="./images/bbemo9.gif" align="texttop" class="rollover">
<img src="./images/bbemo9g.gif"></a></div>
<div class="emoticonusage">
<a href="#" onClick="bbcodeintro();return false;" title="BBCode 사용법" class="rollover">
<img src="./images/bb_help.gif" align="texttop" class="rollover">
<img src="./images/bb_helpb.gif"></a></div>
</div>

이제 방명록을 수정하죠. 방식은 같습돠.

역시 아래랑 비슷한 부분을 찾습니다.

<textarea name="[#\#_guest_textarea_body_#\#]" cols="50" rows="6"> </textarea>

여기도 아래처럼 id만 추가하면됩니다.

<textarea name="[#\#_guest_textarea_body_#\#]" id="[#\#_guest_input_comment_#\#]" cols="50" rows="6"> </textarea>

그 다음으로 댓글처럼 그 앞에 아래 내용을 추가하면 완성!!

<div class="emoticonborder" style="/*width:630px;*/">
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[b]','[/b]');return false;" title="진하게" class="rollover">
<img src="./images/bb_b.gif" align="texttop" class="rollover">
<img src="./images/bb_bb.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[i]','[/i]');return false;" title="기울임" class="rollover">
<img src="./images/bb_i.gif" align="texttop" class="rollover">
<img src="./images/bb_ib.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[u]','[/u]');return false;" title="밑줄" class="rollover">
<img src="./images/bb_u.gif" align="texttop" class="rollover">
<img src="./images/bb_ub.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[color=red]','[/color]');return false;" title="글자색" class="rollover">
<img src="./images/bb_c.gif" align="texttop" class="rollover">
<img src="./images/bb_cb.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[quote]','[/quote]');return false;" title="인용" class="rollover">
<img src="./images/bb_q.gif" align="texttop" class="rollover">
<img src="./images/bb_qb.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[img]','[/img]');return false;" title="그림 넣기" class="rollover">
<img src="./images/bb_img.gif" align="texttop" class="rollover">
<img src="./images/bb_imgb.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[ur=http://]','[/ur]');return false;" title="하이퍼링크" class="rollover">
<img src="./images/bb_url.gif" align="texttop" class="rollover">
<img src="./images/bb_urlb.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','','[embed=주소 폭 넓이]');return false;" title="영상 넣기" class="rollover">
<img src="./images/bb_emb.gif" align="texttop" class="rollover">
<img src="./images/bb_embb.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('[#\#_guest_input_comment_#\#]', '', ':)');return false;" title=":)" class="rollover">
<img src="./images/bbemo1.gif" align="texttop" class="rollover">
<img src="./images/bbemo1g.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('[#\#_guest_input_comment_#\#]', '', ';)');return false;" title=";)" class="rollover">
<img src="./images/bbemo2.gif" align="texttop" class="rollover">
<img src="./images/bbemo2g.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('[#\#_guest_input_comment_#\#]', '', ':P');return false;" title=":P" class="rollover">
<img src="./images/bbemo3.gif" align="texttop" class="rollover">
<img src="./images/bbemo3g.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('[#\#_guest_input_comment_#\#]', '', '8D');return false;" title="8D" class="rollover">
<img src="./images/bbemo4.gif" align="texttop" class="rollover">
<img src="./images/bbemo4g.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('[#\#_guest_input_comment_#\#]', '', ':(');return false;" title=":(" class="rollover">
<img src="./images/bbemo5.gif" align="texttop" class="rollover">
<img src="./images/bbemo5g.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('[#\#_guest_input_comment_#\#]', '', '--;');return false;" title="--;" class="rollover">
<img src="./images/bbemo6.gif" align="texttop" class="rollover">
<img src="./images/bbemo6g.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('[#\#_guest_input_comment_#\#]', '', ':D');return false;" title=":D" class="rollover">
<img src="./images/bbemo7.gif" align="texttop" class="rollover">
<img src="./images/bbemo7g.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('[#\#_guest_input_comment_#\#]', '', ':O');return false;" title=":O" class="rollover">
<img src="./images/bbemo8.gif" align="texttop" class="rollover">
<img src="./images/bbemo8g.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('[#\#_guest_input_comment_#\#]', '', ':x');return false;" title=":x" class="rollover">
<img src="./images/bbemo9.gif" align="texttop" class="rollover">
<img src="./images/bbemo9g.gif"></a></div>
<div class="emoticonusage">
<a href="#" onClick="bbcodeintro();return false;" title="BBCode 사용법" class="rollover">
<img src="./images/bb_help.gif" align="texttop" class="rollover">
<img src="./images/bb_helpb.gif"></a></div>
</div>

출처 : http://zoc.kr/493

추가로 양파군 이모티콘을 추가하고 싶으시면 http://www.e-forever.co.cc/73

'티스토리' 카테고리의 다른 글

Prism으로 코드 하이라이트 적용 (0)	2018.11.10
블로그에 로딩바 넣기 (0)	2014.07.09
카테고리 항상 펼쳐놓기 (0)	2011.12.11
관리자로 로그인하면 애드센스 안보이게 하기 (3)	2011.10.23
글 위에 애드센스 두 개 나란히 삽입하기 (0)	2011.10.18
블로그 주소 하나로 통일하기 (11)	2011.10.12
애드센스 가입방법 (2)	2011.10.06
티스토리 단축키 (4)	2011.10.03

joyfuI의 잡동사니 블로그

BBCode 3.5

'티스토리' 카테고리의 다른 글

+ Recent posts

티스토리툴바