MYWIZZBLOG

CodeTagHelper.zip
changelog
v0.11
- (fixed) 다른 플러그인과 충돌하지 않습니다.
- (IE only) 탭 입력시 선택된 문자가 있으면 선택된 문자를 삭제하지 않고 탭을 추가합니다.
- (IE only) 탭 입력시 두 줄 이상이면 줄마다 탭이 추가됩니다.
- (IE only) 탭 입력시 선택 영역의 시작이 탭 문자이고 shift키가 눌러진 상태라면 시작되는 탭이 제거됩니다.


소개
태터툴즈 에디터의 CODE 툴바의 기능을 확장해 주는 플러그인입니다.
지금의 CODE 툴바는 사실 어떻게 작동하는 것인지 모르겠습니다.

이 플러그인을 만들게 된 것은, 이전 글에 트랙백 된 leigh님의 글 때문인데요. C 코드를 태터툴즈에 원하는대로 넣지 못하시는 모습이 안습.. (포맷팅을 위해서 perl까지 이용하셨던)

태터툴즈 개발팀은 에디터 개선에 많은 노력을 기울여야 할 것으로 보입니다.
너무 많은 기능을 제공하기보다는 작더라도 사용자가 원하는대로 정확히 동작하는 에디터가 있으면 좋겠습니다. 더불어 위지윅 에디터를 사용하지 않는 옵션도 있으면 좋겠구요 :)

설치방법
압축 푸시고 업로드, 활성화시켜주시면 됩니다.

사용방법
설치 후 에디터의 CODE 버튼을 누르면 왼쪽의 화면과 같은 코드 입력 창이 나옵니다. 입력시 tab키는 실제 탭이 입력되니깐 자유롭게 들여쓰기 하실 수 있습니다.
< 나 > 등도 그냥 입력하시면 됩니다.
입력이 완료되면 apply버튼을 누르시면 되고, 이전에 입력해 놓은 코드들은 아래의 드롭다운 메뉴에 히스토리로 간단하게 남아있어서 선택하시면 이전에 입력해 놓은 코드를 복원할 수 있습니다.
사용언어를 선택하는 드롭다운 메뉴는 실제로는 code태그에 class로 들어갑니다.


위와 같이 입력 후 apply 버튼을 누르면 태터툴즈 에디터에 왼쪽과 같이 입력됩니다.
이 화면에서 직접 수정할 수도 있으나 이 영역은 태터툴즈 에디터가 관리하는 영역이라 원치 않은 결과가 나올지도 모르니 주의하세요.



실제로 방문자들이 보는 화면은 왼쪽과 같습니다. 줄바꿈이나 탭 키 등이 입력한 그대로 보이게 됩니다.




아래와 같은 CSS를 스킨 파일에 추가하셔야 위와 같이 표시됩니다.

code
{
	display:block;
	padding:6px;
	width:480px;
	height:auto;
	overflow-x:auto;
	overflow-y:auto;
	color:#82786C;
	font: 10px "Lucida Console",helvetica,sans-serif;
	line-height:1.3;
	white-space:pre;
	background-color:#FBF8F3;
	border:2px dotted #E1D0BB;
}

폰트나 색깔 등은 입맞에 맞게 수정하시면 됩니다.
더불어, CodeHighlighter같은 프로그램과 연결해서 사용하시라고 code 태그마다 언어별 class를 넣어주고 있으니 참고하세요. CodeHighlighter에 대한 사용예는 이 블로그 뒤져보시면 되구요.



CodeHighlighter를 붙인 화면은 왼쪽과 같습니다. 테스트로 돌려보는 태터에 붙여보니 잘 붙네요 :)



주의사항
- IE와 Firefox에서 작동하는 것을 확인했습니다.
- Firefox에서는 탭 입력 후 캐럿이 사라지는 문제가 있습니다. 원인은.. 모르겠습니다 --;
- 시간이 나면 block 단위의 탭 기능도 한번 :0