- BBCode 삽입 도우미 만들기 (수정 공개)
- 컴퓨터야그/블로그 관련
- 2009. 6. 4. 18:46
- BBCode, it, tistory, 도우미, 블로그, 업데이트, 티스토리
기존 포스팅에서 수정된 내용은 아래와 같다.
1. insertAtCursor() 함수 수정 (버그 패치 및 약간의 속도 증가)
2. 아이콘 링크 인자 수정 (버그 패치)
티스토리에서 BBCode for TiStory 3.0를 통해 BBCode를 사용할 수 있게 만들었다.
하지만, 막상 이걸 입력하려니 의외로 손이 많이 가더라.
(기술이 발달하면 편리성을 가져다준다지만, 더 불편해지는 경우가 훨씬 많다는 거~)
하지만, 스킨을 조금만, 아주 조금만 수정하면 아래와 같은 BBCode 입력 도우미 버튼(이하 도우미)을 달 수 있다.

Forevler님의 버튼 배치를 업어왔습니다. 이게 구성하기도 깔끔하고 예쁘더군요.
1. 추가 파일 설치
그 파일 12개를 모두 스킨→직접올리기에서 업로드한다.
쉽죠잉?
2. 추가 스타일 지정
HTML/CSS 편집 메뉴에서 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; }
3. skin.html 수정 #1 : javascript 코드 삽입
내용이 길고 약간 (아주 약간) 복잡하므로 셋으로 나누어 올린다.
아래의 javascript 코드를 삽입한다.
삽입 위치는 헤더의 <title> ~ </title> 바로 다음이다.
<script type="text/javascript">
//<![CDATA[
//이모티콘 추가
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[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[list][*][/list] : 불릿이 달린 리스트\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로 자동 설정한다.');
}
//]]>
</script>
4. skin.html 수정 #2 : 방명록 수정
하나는 방명록, 다른 하나는 댓글 입력창으로 둘 다 수정해야 한다.
우선은 방명록을 수정하겠다.
아래와 비슷하게 생긴 부분을 찾는다.
<textarea name="[#\#_guest_textarea_body_#\#]" cols="50" rows="6"> </textarea>여기서 굳이 "비슷하게"란 표현을 쓴 이유는 뒤의 인자가 조금씩 다르기 때문이다.
cols, rows는 대부분 다르고, 가끔은 id가 적혀있는 경우마저 있다.
이곳에 id를 아래와 같이 추가한다.
<textarea name="[#\#_guest_textarea_body_#\#]" id="[#\#_guest_input_comment_#\#]" cols="50" rows="6"> </textarea>id만 추가한 것인데, 혹시나 다른 id 값이 적혀있었으면 그 내용을 지우고 이것으로 대체하면 된다.
다음으로 할 일은 이 부분 즉, <textarea> 태그 바로 앞에 다음의 내용을 추가하는 것이다.
이 부분이 바로 방명록의 도우미 부분이다.
<div class="emoticonborder" style="/*width:604px;*/">
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[b]','[/b]');return false;" title="진하게" class="rollover">
<strong>가</strong></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[i]','[/i]');return false;" title="기울임" class="rollover">
<em>가</em></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[u]','[/u]');return false;" title="밑줄" class="rollover">
<u>가</u></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[color=red]','[/color]');return false;" title="글자색" class="rollover">
<font color="red">가</font></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[quote]','[/quote]');return false;" title="인용" class="rollover">
"인용"</a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[img]','[/img]');return false;" title="그림 넣기" class="rollover">
<img class="rollover" 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 class="rollover" 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 class="rollover" 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 class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon06.gif">
<img src="./images/bb_emo6.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('[#\#_guest_input_comment_#\#]', '', ';)');return false;" title=";)" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon01.gif">
<img src="./images/bb_emo1.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 class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon02.gif">
<img src="./images/bb_emo2.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 class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon03.gif">
<img src="./images/bb_emo3.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('[#\#_guest_input_comment_#\#]', '', ':(');return false;" title=":(" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon04.gif">
<img src="./images/bb_emo4.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('[#\#_guest_input_comment_#\#]', '', '--;');return false;" title="--;" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon05.gif">
<img src="./images/bb_emo5.gif"></a></div>
<div class="emoticonusage">
<a href="#" onClick="bbcodeintro();return false;" title="BBCode 사용법" class="rollover">
<strong>BBCode 사용법</strong></a></span></div>
</div>
맨 앞부분에 주석처리되어 있는 /*width:604px*/ 부분은 스킨에서 폭을 별도로 지정하는 경우엔 적절한 값을 스킨에다 적기 위해 빼놓은 부분이다.
필요시 주석을 제거하고 원하는 값을 지정하면 더 깔끔한 화면을 볼 수 있다.
5. skin.html 수정 #3 : 댓글창 수정
<textarea name="[#\#_rp_input_comment_#\#]" rows="10" cols="50"></textarea>여기도 앞과 같은 이유로 "비슷하게"란 표현을 썼다.
이곳에 id를 아래와 같이 추가한다.
<textarea name="[#\#_rp_input_comment_#\#]" id="comment_[#\#_article_rep_id_#\#]" rows="10" cols="50"></textarea>역시 id만 추가한 것인데, 혹시나 다른 id 값이 적혀있었으면 역시 그 내용을 지우고 이것으로 대체하면 된다.
마지막으로 할 일은 이 부분 즉, <textarea> 태그 바로 앞에 다음의 내용을 추가하는 것이다.
이 부분은 댓글창의 도우미 부분이다.
<div class="emoticonborder" style="/*width:604px;*/">
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[b]','[/b]');return false;" title="진하게" class="rollover">
<strong>가</strong></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[i]','[/i]');return false;" title="기울임" class="rollover">
<em>가</em></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[u]','[/u]');return false;" title="밑줄" class="rollover">
<u>가</u></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">
<font color="red">가</font></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[quote]','[/quote]');return false;" title="인용" class="rollover">
"인용"</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 class="rollover" 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 class="rollover" 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=주소 폭 넓이]','[/img]');return false;" title="영상 넣기" class="rollover">
<img class="rollover" 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 class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon06.gif">
<img src="./images/bb_emo6.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_[#\#_article_rep_id_#\#]', '', ';)');return false;" title=";)" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon01.gif">
<img src="./images/bb_emo1.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 class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon02.gif">
<img src="./images/bb_emo2.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 class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon03.gif">
<img src="./images/bb_emo3.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_[#\#_article_rep_id_#\#]', '', ':(');return false;" title=":(" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon04.gif">
<img src="./images/bb_emo4.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_[#\#_article_rep_id_#\#]', '', '--;');return false;" title="--;" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon05.gif">
<img src="./images/bb_emo5.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticonusage">
<a href="#" onClick="bbcodeintro();return false;" title="BBCode 사용법" class="rollover">
<strong>BBCode 사용법</strong></a></div>
</div>
이렇게 수정하면 앞에서 본 것과 같은 도우미를 장착할 수 있다.
그리고, 여기서는 이모티콘 플러그인을 설치한 것으로 가정하고, 이모티콘을 삽입해주는 부분도 함께 구현했다.
만약, 이모티콘을 사용하지 않는 경우에는 적절히 수정해서 사용하시기 바란다.
(게으르니즘이 결코 아니다. 쿨럭)
'컴퓨터야그 > 블로그 관련' 카테고리의 다른 글
노무현 대통령님 배너를 계속 유지하겠습니다 (15) | 2009.06.06 |
---|---|
iNove 스킨 버그 수정: 댓글 아이콘 버그 수정 (2) | 2009.06.06 |
BBCode 삽입 도우미 만들기 (수정 공개) (92) | 2009.06.04 |
예쁜 제목줄 만들기 (21) | 2009.05.24 |
카테고리의 마우스 커서가 제대로 나오지 않을 때 수정방법 (2) | 2009.05.24 |
짜잔~ Cumulus for TiStory 공개 (버그수정) (181) | 2009.05.21 |
- 이전 댓글 더보기
-
감허 2009.04.04 03:49
우선 고맙습니다~ 좋은 자료를 가르쳐주셔서...^^;
저도 적용은 했는데요.. 아이콘을 누르면 하나만 나와야 하는데, 전 네개씩 나오는군요~
예를 들어 웃는얼굴을 클릭하면 : ) 요렇게 나와야 하죠~ 근데, 전 : ) : ) : ) : ) 이렇게 나와요.
죄송하지만 해결책이 없을까요? ㅠ,.ㅜ -
-
-
Forevler 2009.06.04 01:06
[code]<a onclick="insertAtCursor('','[b]','[/b]')" title="진하게" class="rollover">[/code] 여기에는 href="#" 와 return false 안 넣어도 되나요?
그 아래 것들도 몇개가 return false가 안들어 있네요 8D - 그럼 bbcode버튼을 누를 때마다 최상단으로? ^^ -
miru 2009.06.05 11:56
BLUEnLIVE님 안녕하세요~!
BBCode 삽입도우미가 수정되었네요~?
현재 위 적용방법되로 따라해서 잘 적용하였습니다~ ^^
근데 이상하게 댓글 textarea만 좁아지네요?
방명록 textarea는 포스트 영역만큼 나오는데, 댓글 입력 부분만 좁아져요
위 주석처리 되어있는 부분 픽셀값도 수정해봤는데,,, 그건 도우미 영역 지정값이더라구요.
댓글 입력부분 행과 열 부분 수정을 해봤는데,,, 잘 안되네요
귀찮으시지만, 한번 살펴봐 주실 수 있나요??-
BLUEnLIVE 2009.06.05 13:16
textarea의 속성에서 뭔가 빠진 것 같군요.
지금 스킨의 댓글 textarea가 아래와 같은 모양일 겁니다.
[code]<textarea name="어쩌고저쩌고" id="어쩌고저쩌고" cols="50" rows="8">[/code]
여기에 아래와 같이 크기를 추가하면 됩니다.
[code]<textarea name="어쩌고저쩌고" id="어쩌고저쩌고" cols="50" rows="8" style="width:701px; font-size:12px;">[/code]
※ 물론 701px 대신 적절한 값을 정해줘야 됩니다.
덧. font-size를 같이 적은 이유는 현재 사용하시는 테마에선 댓글창 안의 글자가 너무 커보이기 때문입니다.
-
-
miru 2009.06.05 16:47
항상 감사합니다~! [emo=011]
스타일로 width값을 지정해주니, 포스트영역만큼 댓글입력 영역이 지정되더군요~!
댓글입력영역의 글자가 커보이나요?
IE8에서는 일반적인 크기인데요?? IE6에서는 커보이는 것일까요? --;
그리고 iNOVE 스킨의 스타일 중 블로그 아이콘 영역이 어느 부분과 충돌되나 봅니다. BLUEnLIVE님 블로그도 블로그 아이콘 왼쪽이 조금 잘리네요~? -
starfield 2009.06.17 19:34
BBCode 3.1에서 안 된다고 칭얼거렸던 starfield입니다.
덕분에 잘 마무리 했습니다.
제 나름대로 아이콘 좀 바꿔봤는데, 잘 했는지 모르겠네요.
감사요~~ -
EmilyJ 2009.06.22 08:15
원래 댓글창에 html코드까지 다 나오는건가요?[emo=006]
[b]볼드체 [/b]설정하면[b] 까지 나다오는데
이모티콘도 [emo=]이런식으로 표시되고..
바로 글씨체에 적용되진 않나요?? -
Richpapa 2009.08.03 11:35
궁금한 것이 있어 또 들렀습니다.
1. BBCode 도움말 폭
파이어폭스로 주로 사용하기에 아래 태그 중에 cols=81로 조정을 했습니다.
<textarea name="" id="comment_" cols="81" rows="8" ></textarea>
그런데, IE로 보니까. 쭉 늘어나서 안 맞네요. 이것은 어디서 고쳐야 하는건가요?
2. 태그구름을 보고 따라 했는데, BLUEnLIVE님과 좀 다르게 나오네요.
(2-1) BLUEnLIVE님의 폰트가 더 이쁘고. ^^
(2-2) 옆으로 늘어나는 폭도 현실감 있어 보이는데...
(2-3) 게다가 IE에서는 나오지가 않아요. ㅜㅜ
이게 버전이 낮은 건가요? 사실 버전 낮은 것을 설치를 하면 안 나옵니다. ㅜㅜ-
Richpapa 2009.08.03 23:52
BLUEnLIVE 님의 글과 더불어 댓글까지 꼼꼼히 읽어야 하는군요. 완전 삽질했다는... 웹하는 사람들 존경스럽습니다.
그러나, 태그구름은 포기!! IE에서는 색상반영이 안되더군요. 제것만 이상한것인지....
-
-
jong970105 2010.01.19 18:55
이것도 텍스트큐브닷컴에 적용 될까요?
그리고 이 페이지에 들어가니 스압이 걱정 되었는데 글보다 덧글이 더 많은 거였군요...-_-a -
-
죠리퐁 2010.10.14 04:29
좋은 글 잘 보았습니다. 글 대로 적용해 보았는데요. 에디터는 뜨는데 이상하게 페이지 오류가 생기네요...몇번을 해봐도...ㅠㅠ 왜 그런걸까요? 도와주세요.^^;
-
-
Rinne 2011.06.06 21:20
BLUEnLIVE님의 HTML소스를 그대로 배껴서 제 블로그 스킨에 적용해 봤는데요~
그래도 안되는걸로 보아...~ 제 블로그에서 명령어 충돌이 있는듯 싶네요~??
랄까, 포기입니다 ㅋㅋㅋㅋㅋ
-
Rinne 2011.06.05 22:36
제가...바보라서 BLUEnLIVE님이 쓰신글을 잘 못따라 하겠어요...ㅜㅜ
BLUEnLIVE님과 똑같이 적용하고 싶은데...
일단 적용시켜놨긴 했는데...기능이 전혀 안되네요..ㅜㅜ
어디서부터 잘못된건지...ㅜㅜ;
도와주세요!! ㅜㅜ
ps. 이 어려운걸...이렇게 다른분들께 배포하시는...BLUEnLIVE님이 존경스럽네요..ㄷㄷ; -
Swan。 2011.12.14 07:17
음... 설치는 무사히 했습니다만, 효과적용이 전혀 안 되고 있습니다. ㅠ_ㅠ
댓글에 태그가 그대로 출력될 뿐, 아무런 효과도 없습니다... -
Recent comment