BBCode for Textcube + Helper
• 탄생 설화
나비님으로부터 inureyes님의 BBCode 출력 플러그인을
소개받아 사용하던 어느날,
bluenlive님께서 텍스트큐브의
BBCode 플러그인을 탐내시더니 급기야 티스토리에서도 BBCode를 사용할 수 있는
BBCode for tistory를 개발하기에 이른다.
같은 티스토리 유저이신
엔즐님께서 버튼을 클릭하여 입력을 편리하게 할 수 있는
아이디어를 제공. 블럭을 설정해서 현재 선택된 부분에 코드를 적용하게끔 개선된다.
시간이 흘러 bluenlive님과 함께
킹크랩을 맛있게 먹음. 며칠 뒤 BBCode를 쉽게 적용할 수 있도록 '
BBCode 삽입 도우미 만들기'라는 팁을 게시. 옥토씨, 내심 wysiwyg 에디터 스타일의 버튼을 만들어야겠다고 생각했으나
Forevler님께서 이미
구현중... 이것을 보고 bluenlive님께서 자신의 블로그에 업어오신걸 옥토씨가 다시 업어옴. 왼손은 거들뿐...
어제밤,
규식아버님께서 플러그인의
embed 태그를 개선해 주셨다. 고마워요 (정)규식아빠~
도우미를 에디터의
버튼바 형식으로 꾸미고 일부 텍스트를 모두 아이콘으로 교체. 아이콘 그리는게 이렇게 어려운 줄 몰랐음ㅠㅠ (달랑 세개;;)
• 플러그인 설치
※ 주의 : BBCode 플러그인은 댓글/방명록 뿐만 아니라 본문에도 적용됩니다.
'
Textcube 설치 폴더/plugins' 폴더에 압축을 풀고 플러그인 설정 페이지에서 '
사용'으로 지정한다.
제공되는 코드는 대충 아래정도이다.
[b]...[/b] : 글씨를 굵게함
[i]...[/i] : 글씨를 기울임
[u]...[/u] : 글씨에 밑줄
[color=색상]...[/color] : 텍스트 색상 ('red/green' 등의 이름이나 '#ff0000'같은 색상 코드를 사용)
[url=주소]...[/url] : 하이퍼링크 연결
[quote]...[/quote] : 인용 상자
[img=주소] : 이미지 삽입
[embed=주소 너비 폭] : 동영상 삽입. '너비'와 '폭'은 생략이 가능하며, 생략시 425x355로 지정
▲
주황색은 블럭 상태에서 텍스트가 들어가는 위치
• BBCode 버튼바 설치
압축파일 안의
/images 폴더에 있는 파일은
skin폴더/images 폴더에 압축 해제한다.
style.css 수정..
skin 폴더의
style.css 파일에 상자 안의 내용을 추가한다.
/* ------------------------------------------------------------------- */
/* BBCode Helper */
/* ------------------------------------------------------------------- */
.emoticonborder { border-style: solid; border-width: 1px; border-color: #cbcbcb; padding: 3px; margin: 0 0 -2px 0; height: 21px;}
.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 수정..
1. 압축파일 속
타이틀.txt 파일의 내용을 복사하여 '
skin폴더/skin.html'의 '
...</title>' 뒤에 붙여넣는다.
2. '
<textarea'로 검색하면 두군데가 나올텐데 각각 아래와 같이 '
id=...' 부분을 추가해 준다.
<textarea name="[##_guest_textarea_body_##]" id="[##_guest_input_comment_##]" cols="50" rows="6"> </textarea>
▲ 방명록 / ▼ 댓글
<textarea name="[##_rp_input_comment_##]" id="comment_[##_article_rep_id_##]" cols="50" rows="6"> </textarea>
3. 압축파일 속
방명록.txt 파일의 내용을 복사하여 방명록의 '
<textarea' 앞에 붙여넣고
댓글.txt 파일의 내용은 댓글의 '
<textarea' 앞에 붙여넣는다.
※ 방명록.txt, 댓글.txt 파일에서 '스킨폴더'로 써있는 부분은 각자 블로그의 경로에 맞게 수정한다
-끝