도아 :: 태터 플러그인: 댓글 미리 보기 및 문자 변환 플러그인

태터 플러그인: 댓글 미리 보기 및 문자 변환 플러그인(4/1/1110)

2006/05/12 19:23 :: 컴퓨터/태터툴즈 ::인쇄

어제 울블로그

를 타고 JWC님의 블로그

를 방문했습니다. 요즘 반 구글세가 확산하는 경향이 있고 글의 제목이 구글한테 속은 느낌

이라 관심이 갔기 때문입니다. 이 글의 댓글에서도 알 수 있듯이 저 역시 Google AdSense를 사용하면서 다소 못마땅한 부분이 있었기 때문입니다.

그런데 댓글을 달다 보니 댓글로 입력한 내용이 입력창 아랫부분에 나타나는 것이었습니다. 확인해보니 WordPress

의 Live Comment Preview

라는 플러그인 때문이었습니다. 태터툴즈

에도 이러한 플러그인이 있다면 괜찮을 것 같아 Live Comment Preview

의 자바스크립트

를 이용해서 태터툴즈

용 플러그인으로 구현했습니다.

사실 플러그인이라고 해봤자 Live Comment Preview

의 자바스크립트

코드를 삽입하는 치환자만 만들면 되기 때문에 플러그인을 만드는 것은 별 어려움이 없었습니다. 플러그인의 기능을 알아보기 위해 댓글을 입력하던 중 ( C )를 치자 미리 보기 화면에는 (C)가 나타나는 것이었습니다. 물론 미리 보기에는 (C)로 나타나지만 실제 글을 등록하면 다시 ( C )로 나타납니다.

자바스크립트

를 확인하자 ( C )를 (C)로 변환하는 코드가 삽입되어 있었습니다. 아마 WordPress

에는 코드를 자동으로 변환하는 부분이 담겨있는 모양입니다. 이왕이면 태터툴즈

에도 이러한 기능을 입히면 좋을 것 같다는 생각이 들어서 이러한 코드 변환기능까지 댓글 미리 보기 플러그인에 집어넣었습니다.

이 플러그인에서 지원하는 기능은 다음과 같습니다.

댓글 미리 보기

입력창에 댓글을 입력하면 입력한 내용이 입력창 상단이나 하단에 나타납니다. 이 댓글 미리 보기 기능은 댓글뿐만 아니라 다른 입력창에도 상당히 유용할 것으로 생각됩니다. 그 이유는 간단합니다. 입력창의 열과 행은 제한되고 이 제한된 창에 글을 입력하다 보면 이전 내용을 확인하기 위해 수직 이동 막대를 위로 끌어올려야 하는 경우가 종종 발생하기 때문입니다.

이 플러그인을 이용하면 댓글을 확인하면서 글을 올릴 수 있습니다.

문자 변환 기능

WordPress

플러그인의 미리 보기 기능을 이용하다 보면 ( C )로 입력하면 자동으로 (C)로 변환되는 것을 알 수 있습니다. 그러나 태터툴즈

에서는 이 기능을 지원하지 않기 때문에 미리 보기에서는 (C)로 나타나도 글을 등록하면 다시 ( C )로 표시됩니다. 이 문제를 해결하기 위해 플러그인에 문자를 자동으로 변환하는 기능도 포함했습니다. 변환 가능한 문자는 다음과 같습니다.

- - -	---
- -	--
. . .	...
' s	's
큰따옴표	"큰따옴표"
작은따옴표	'작은따옴표'
` `	``
( tm )	(tm)
( c )	(c)
( r )	(r)
12 x 10	12x10

설치하는 방법은 간단합니다. 그러나 치환자를 사용하기 때문에 skin.html 파일을 변경해야 정상적으로 동작합니다.

내려받기: CommentPreview.zip

플러그인 설치

내려받은 파일을 푼 후 폴더째 태터툴즈

의 플러그인 폴더(plugins/)에 올리고 태터툴즈

의 관리도구/환경설정/플러그인 관리에서 댓글 미리 보기를 미사용에서 사용중으로 변경하면 됩니다.

스킨 변경

이 플러그인에서 지원하는 치환자는 두 가지입니다. 하나는 자바스크립트

파일을 불러올 때 사용하는 [ ##_comment_preview_js_## ]이며, 또 다른 하나는 미리 보기 창의 위치를 지정하는 [ ##_comment_preview_id_## ]입니다. 이 두 개의 치환자는 가급적 다음과 같은 위치에 삽입하는 것이 좋습니다.

[ ##_comment_preview_js_## ]	<HEAD>...</HEAD> 태그 사이

예: 

<head>

<title>[##_blogger_##] :: [##_page_title_##]</title>

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<link rel="alternate" type="application/rss+xml" 

	title="RSS 2.0" href="index.xml" />

<link rel="stylesheet" type="text/css" href="/skin/style.css" />

<link rel="stylesheet" href="/plugins/lightbox/lightbox.css">

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

<script type="text/javascript" src="/UrimalSpellCheck/spellcheck.js"></script>

[ ##_comment_preview_js_## ]

</head>



[ ##_comment_preview_id_## ]	댓글 입력창 위 또는 아래, 방명록 입력창 위 또는 아래

				방명록 입력창에도 삽입

</s_rp_rep>

[ ##_comment_preview_id_## ]

		<s_rp_member>

이 플러그인은 "큰따옴표"와 '작은따옴표'를 변경합니다. 따라서 본문의 링크가 정상적으로 동작하지 않는 문제가 발생할 수 있습니다. 따라서 반드시 설치 후 링크가 정상적으로 동작하는지 확인하시기 바랍니다.

덧글 1. inureyes님의 지적처럼 이 플러그인 역시 블로그당 하나의 글만 표시하도록 설정한 사람만 사용할 수 있습니다.
덧글 2. PrintCode

플러그인과 충돌이 나는 경우 플러그인 폴더의 이름을 CommentPreview에서 vCommentPreview로 변경하고 다시 댓글 미리 보기를 사용중으로 변경하시기 바랍니다. 다시 내려받으면 폴더 이름이 변경된 파일을 내려받을 수 있습니다.

구독 & 책갈피 글이 마음에 드신다면

로 편하게 구독하세요!!!

책갈피 하기: WZD | 구글 | 네이버 | 뉴스2.0 | 다음 | 델리셔스 | 마가린 | 북마커 | 야후 | 한RSS | 정보

촛불 문화제 소식

컴관련

오늘의글

RSS : http://offree.net/rss/response/481

걸린글 : http://offree.net/trackback/481

Saver 2006/05/12 19:39
좋은 플러그인이네요.. ^^;

활용하기에 따라서 굉장한 기능이 될 지도;;
- 도아 2006/05/12 21:27
  감사합니다.
  
  그런데 문제는 제 블로그에 특화된 플러그인이 되버렸다는 점입니다.
inureyes 2006/05/12 20:19
이 플러그인은 아쉽게도 일반적인 경우에는 작동하지 않습니다 ㅠ_ㅠ

태터툴즈가 기본적으로 지원하는 id는 xhtml specification에 따라 중복을 피하기 위하여 각 코멘트 입력창의 id가 다르게 지정됩니다. 그런데 위의 자바스크립트와 플러그인 구조에는 그러한 고려가 되어 있지 않네요. 그냥 author나 comment의 id를 author, comment같이 항상 같은 id로 가정하고 프로그래밍 되어 있습니다.

그렇지만 일반적인 스킨 (태터툴즈 기본 스킨 포함)에서는 comment 입력창의 id는 comment_880 등의 형식이기 때문에 위의 플러그인이 동작하지 않습니다. 여기저기 수정을 좀 해야 올바르게 작동할 것 같네요 :)
- 도아 2006/05/12 20:32
  코멘트 ID에 번호가 붙는 것은 알고 있습니다. 아울러 ID가 이러한 방식으로 매겨진다고 해도 별 문제없이 동작합니다. 치환자를 삽입하는 지점을 제 글에서 설명한 위치로하면 잘 동작합니다.
  
  태터 1.0.5에 포함된 기본 스킨에서도 정상적으로 동작하는 것을 확인했습니다.
  
  다만 글을 한번 올리고 다시 올리려고 하면 그때는 정상적으로 동작하지 않습니다. 그 이유는 글 자체가 HTML 페이지에 삽입된 것이 아니라 자바스크립트로 페이지를 업데이트했기 때문에 발생한 현상 같습니다.
- inureyes 2006/05/12 20:41
  한 화면에 글이 두 개 이상 보이도록 사용하는 경우 두번째 글에 댓글을 달아보시면 어떤 현상이 발생하는지 보실 수 있습니다. getElementById로 핸들을 잡을 때, 핸들의 이름이 완전하지 않기 때문에 가상으로 첫번째 핸들만을 잡습니다.
  
  그리고, 마찬가지로 commentPreview라는 이름을 가진 id가 두개가 되기 때문에 id 중복의 문제가 생기죠. :)
- 도아 2006/05/12 20:57
  제가 블르그 당 한 페이지로 설정하고 사용하다보니 그 생각을 못했군요. 아울러 http://offree.net/478 패치를 적용했기 때문에 제 경우에는 블로그의 글을 하나 이상으로 표시하도록 설정해도 페이지당 하나만 나옵니다.
  
  1.0.4 버전에서는 관리자만 답글에 답글을 달 수 있도록 하고 사용했었는데 inureyes님이 답글에 답글을 달아 무척 놀랐습니다.
Caleb 2006/05/13 03:33
어떤 기능인지 글만보고는 잘 이해가 안되서..
테스트 삼아서 댓글을 한번 작성해 보고 있습니다~! ^^;;
신기하네요.. 좋은 기능같습니다~! ^^;;
- 도아 2006/05/14 08:02
  예...
  그런데 사용할 수 있는 환경이 제한된다는 단점이 있습니다.
monovision 2006/05/13 04:26
저의 경우에도 에러가 발생을 하네요. js 에는 무지해서 고치지는 못하겠고, 위의 inureyes 님의 경우와 비슷한거 같습니다.
오류 메세지가.. " document.getElementByld(...) 은 Null 이거나 개체가 아닙니다. " 라고 나오네요.

수정되어 저도 쓸 수 있으면 좋겠습니다.^^
- monovision 2006/05/13 04:27
  아~ TT 버전은 1.0.5 이었습니다.
  설치한지 하루된 따끈따끈한... 블로그입니다.
  또한, 치환자도 정확한 위치에 삽입을 했습니다.
  현재는 제거한 상태입니다.
- 도아 2006/05/14 08:03
  님의 블로그를 방문해보니 inureyes님이 언급한 문제와는 다른 문제입니다. 증상만으로는 문제의 원인을 파악할 수 없지만 inureyes님이 언급한 문제는 페이지당 글의 수가 하나 이상일때 발생하는 문제입니다.
소금이 2006/05/13 13:05
버그 보고입니다. ^^ 해당 플러그인을 동작시키고 본문에 '글'형식으로 글을 적으면 '앞에 /가 생기네요. 확인 좀 부탁드릴꼐요 ^^;
- 도아 2006/05/14 08:05
  문제를 수정한 버전을 올려두었습니다.
헤일리 2006/05/13 22:27
저도 소금이님과 같은 현상인 것 같습니다. 처음엔 1.05의 업뎃 버그인줄 알고 태터에 신고하려고 했는데 도아님의 플러그인 비활성화를 시키니 홑따옴표로 생기는 /나 \ 문자가 사라지네요. 스킨에 따라 홑따옴표로 인해 슬러시(/) 표시가 생기는 것도 있고 W표시가 생기는 것도 있습니다. 댓글이 아닌 본문 포스팅에서요.
- 도아 2006/05/14 08:06
  수정된 버전으로 다시 테스트해보시기 바랍니다. 제 경우에는 \가 생겨서 이 문제를 수정한 버전을 올려두었습니다.
- 헤일리 2006/05/14 23:40
  수정된 버전으로 다시 했더니 성공했습니다. 덕분에 더욱 편리한 블로그가 되었네요. 고맙습니다:)
flare 2006/05/13 17:16
수고하셨습니다..^^
- 도아 2006/05/14 08:06
  감사합니다.
예진아빠 2006/05/14 12:59
좋은 플러그인 감사드립니다.
그런데 플러그인을 활성화하면 댓글은 정상적인데 방명록에서 자바스크립트 오류가 발생합니다. 브라우저 상태표시줄 아랫부분에 오류내용을 자세히 보면 "유효하지 않은 문자입니다"라고 나옵니다.
도아님 블로그에도 같은 에러가 나는 것 같은데...
확인을 부탁드려도 될지요???
- 도아 2006/05/14 13:41
  수정한 버전을 다시 올려 두었습니다. 내려받아 확인해보시기 바랍니다.
예진아빠 2006/05/14 14:24
이젠 잘 되네요.
정말 고맙습니다.
이렇게 빨리 답변해 주실 줄은....
광서방 2006/05/15 10:52
저도 감사드립니다 ^^; 그런데 질문이 있어요.
1. 방명록과 덧글에다가는 적용을 했는데, 이걸 혹시 덧글이나 방명록에 대한 답글(Reply)에다가도 적용할 수는 없을까요?
2. 저 커멘트 적용 중에서 큰따옴표와 작은따옴표는 어떻게 쓰는 것인지 잘 모르겠네요. 어떻게 적용되는 건지 ^^;
- 도아 2006/05/15 13:52
  1. 적당한 이벤트가 없기때문에 패치하지 않고는 힘듭니다.
  2. 따로 적용할 필요는 없는 부분입니다. 글을 자세히 읽어 보시면 알 수 있지만 큰따옴표와 작은따옴표가 이 플러그인을 사용하지 않을 때와 다르게 표시되는 것을 알 수 있을 겁니다.
- 광서방 2006/05/15 22:08
  아. 네 그렇군요 ^^; 네 잘 알았습니다. 빠른 답변 감사드려요~
광서방 2006/05/15 23:46
하나만 더 여쭤볼께요... 오늘 문제점을 하나 발견했는데요, 이상하게 이 플러그인을 '사용중'으로 하면 이미지 갤러리가 아예 안 나오네요(페이지에 오류가 있다고 해서 찾아봤더니 이미지 갤러리 부분이 에러로 뜨네요). 저도 도아님처럼 'Lightbox TT EX'를 같이 사용하고 있구요, gallery.js 파일을 1.0.5에 맞는 걸 다운받아서 이미지 갤러리에도 Lightbox TT EX를 사용하고 있습니다. 그래서 문제일까요? 덧글 미리보기 플러그인을 켜면 이미지 갤러리가 안 나오구, 끄면 이미지 갤러리가 잘 나옵니다.
그래서 도아님 블로그에 이미지 갤러리 기능 혹시 사용하신 거 있는지 찾아봤는데 찾을 수가 없네요 ^^;. 한 번 체크해주시겠어요?
- 도아 2006/05/17 10:19
  덧글 2.에 나온 것처럼 다른 플러그인과 충돌이 있다면 이 플러그인의 이름을 vCommentPreview처럼 변경하시기 바랍니다. 변경해도 동일한 오류가 발생한다면 일단 이 플러그인을 죽이시고 다음 판올림때까지 기다려 주시기 바랍니다.
- 광서방 2006/05/17 13:19
  네. 도아님 덧글 보고 얼른 vCommentPreview로 변경해보았는데 여전히 안 되네요. 다음 버전 기다리겠습니다 ~_~
- 도아 2006/05/20 12:39
  확실한 것은 아니지만 광서방님의 문제도 자바 스크립트의 문제인 것 같습니다. 새로 올린 버전으로 시험해보시기 바랍니다.
- 광서방 2006/05/22 13:57
  오늘 다시 확인하고 다운받아서 해봤는데 역시 마찬가지네요 ^^;. 이미지 갤러리 있는 페이지에서 항상 오류의 노란삼각형 뜨고 이미지 갤러리가 안 뜨네요. 에휴.. 다음을 기약할께요 ^^;;... 그리고 죄송하지만 http://offree.net/478#comment3280 이 덧글에 답 좀 부탁드릴께요~
소금이 2006/05/20 01:49
해당플러그인과 Lane님의 embed Tag 자동 입력 플러그인이 충돌을 일으키네요. 두 플러그인을 같이쓰면, ie에서 동영상 화면부분이 없어지니, 참고하시길 바랍니다. ^^
- 도아 2006/05/20 12:39
  아마 자바 스크립트의 문제일겁니다. 자바스크립트 문제를 수정한 버전을 올려 두었습니다. 내려받아서 테스트해보시기 바랍니다.
- 소금이 2006/05/20 15:54
  적용해 보았는데, 문제가 아직 해결이 되지 않은 것같네요. ^^;
  일단 Lane님에게도 플러그인에 문제가 있는지 한 번 물어보겠습니다. 그럼, 즐거운 주말되세요 ^^
유마 2007/01/12 23:01
저도 설치해보았습니다.
저는 insertCCL이랑 충돌이 일어나는 것 같습니다.
CCL 의 테이블이 코멘트란을 모두 덮어버립니다. 그리고, Myeolin 플러그인은 전혀보이지 않게 되고
태그 부분도 모두 사리집니다.

한마디로.. http://farm1.static.flickr.com/147/3548 ··· 79_o.jpg 됩니다.
- 도아 2007/01/13 08:08
  CCL은 사용해보지 않아 모르겠지만 myEolin은 정상적으로 표시되더군요. 물론 사이드바는 사용하지 않았고 책갈피와 추천만 표시하도록 했습니다.