도아 :: 텍스트큐브: 인쇄 플러그인

[MBC파업] 텍스트큐브: 인쇄 플러그인

2008/05/27 20:58 :: 도아(@doax) :: 컴퓨터/텍스트큐브 :: 인쇄 :: PDF 저장 :: 읽은횟수(5/0/12842)

즐 거 운 약 속
반대: 한미FTA
총선: 59일전
대선: 311일전
퇴임: 378일전

인쇄 기능을 지원합니다에서 설명한 것처럼 인쇄 플러그인은 필자의 숙원사업(?) 중 하나였다. 그러나 텍스트큐브 의 구조를 잘 모르는 필자로서는 섣부르게 시도하기도 힘든 플러그인이었다. 다행이 텍스트큐브에 사용된 함수를 플러그인에서 사용할 수 있다는 것을 알게된 덕에 의외로 쉽게 인쇄 플러그인을 만들 수 있었다.

미공개 플러그인 중 가장 먼저 만든 플러그인이 Firefox에서도 동작하도록 AnyLink를 적용한 수평분류 플러그인이고 그 다음에 만든 플러그인이 오즈용 최저가 주유소 검색 프로그램을 공개하면서 만든 dp.SyntaxHighlighter 플러그인지만 인쇄 플러그인을 가장 먼저 공개하는 것은 바로 이런 맥락이다. 플러그인을 설치하는 방법은 따로 설명하지 않겠다. 텍스트큐브 를 사용하는 사람이라면 이미 알고 있을 것으로 생각하기 때문이다. 따라서 이 글에서는 환경설정과 스킨 및 Style.css 파일을 만드는 방법에 대해서만 설명하겠다.

내려받기

플러그인은 다음 링크에서 내려받을 수 있다. 내려받은 플러그인을 폴더채 플러그인 폴더(plugins/)에 올리면 된다.

vPrintArticle2.zip

환경설정

보통 플러그인에서는 $blogURL과 $plugURL 변수를 사용할 수 있다. 그러나 가상의 plugin 디렉토리로 호출하는 경우 이 두 개의 변수를 사용할 수 없었다. 따라서 이 항목까지 환경설정에서 설정해 주어야 한다.

관리도구/플러그인/인쇄 버튼 3를 클릭한 뒤 환경설정 링크를 클릭한다.

다음 항목을 설정한다.

블로그 주소	자신의 블로그 주소를 입력한다. 루트 폴더에 텍스트큐브를 설치한 것이 아니라면 설치한 폴더의 주소까지 입력한다. 예를 들어 tc라는 폴더에 텍스트큐브를 설치했다면 블로그 주소는 http://offree.net/tc를 입력해야 한다. 마지막에 /를 입력하지 않도록 주의한다.
플러그인 주소	보통은 기본값을 사용하면 된다. 그러나 플러그인을 vPrintArticle2 폴더가 아닌 다른 폴더에 설치했다면 플러그인 주소에 이 폴더에 대한 경로를 입력하면 된다.
선행 문자	인쇄 기능을 이용하려면 블로그 페이지에 인쇄 링크를 달아야 한다. 이 인쇄링크의 앞 부분에 삽입할 문자를 입력하면 된다. 기본 값은 :: 이다.
후행 문자	선행 문자와 마찬가지로 인쇄 링크 뒷 부분에 출력될 문자이다. 자신이 사용하고 있는 스킨에 맞춰 설정하면 된다.
인쇄 라벨	인쇄 링크의 이름을 입력한다. 기본값은 인쇄이며, 프린트처럼 인쇄 링크임을 표시하는 라벨을 입력하면 된다.

환경 설정이 끝났다면 저장 단추를 클릭해서 플러그인의 환경을 저장한다.

스킨에 치환자 삽입

이제 남은 일은 스킨에 인쇄 링크를 달기 위해 치환자를 삽입하면 된다. 인쇄용 링크 치환자는 [##_print_article_##] 이므로 스킨의 적당한 위치에 이 치환자를 삽입하면 그림처럼 인쇄 링크가 나타난다.

인쇄 플러그인용 스킨

인쇄 플러그인은 자신이 사용하고 있는 스킨과 가장 비슷한 출력 화면을 만들기 위해 skin.html 파일을 사용한다. 아울러 사용되는 치환자는 텍스트큐브에서 사용하는 치환자와 똑 같다. 다만 지원하는 치환자가 별로없다. 따라서 자신만의 인쇄용 스킨을 만들고 싶은 사람은 다음 치환자를 이용해서 해서 인쇄용 스킨을 직접 만들 수 있다. 플러그인에 포함된 인쇄용 스킨은 현재 필자가 1단으로 고처 사용하고 있는 Moving Box(Green)을 인쇄용 스킨으로 수정한 것이다.

치환자 설명

[##_blogger_##]		블로거의 필명(예: 도아)
[##_desc_##]		블로그 설명(예: 당신의 한마디가 세상을...)
[##_blog_link_##]	블로그 주소(예: http://offree.net/)
[##_title_##]		블로그 타이틀(예: 도아의 세상사는 이야기)

[##_page_title_##]	페이지 제목(글의 제목과 같음)

[##_article_rep_title_##]	글 제목
[##_article_rep_link_##]	글 주소
[##_article_rep_date_##]	글 작성일
[##_article_rep_desc_##]	글 내용

인쇄용 스킨 파일의 예

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta NAME="ROBOTS" CONTENT="NOARCHIVE">
<link title="skinStyle" rel="stylesheet" media="all" type="text/css" href="/plugins/vPrintArticle2/style.css" />
<title>[##_blogger_##] :: [##_page_title_##]</title>
<script type="text/javascript" src="/script/common2.js"></script>
</head>

<body onLoad='window.print(); return false;'>
<div id="wrap">
<!-- 포스팅 본문 -->
	<div class="article">
		<div class="article_head">
			<div class="article_title">
				<h2 class="title"><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a> by [##_blogger_##]</h2>
				<div class="article_info">
					<span class="date">[##_article_rep_date_##]</span> :: <a href="[##_article_rep_category_link_##]" class="category">[##_article_rep_category_##]</a> <br />
					<a href="[##_article_rep_link_##]">[##_article_rep_link_##]</a>
				</div>
			</div>
			<div class="clear"><img src="/skin/moving_box/images/bg_clear.gif" alt="" /></div>
		</div>

		<div class="article_post">
		[##_article_rep_desc_##]
		</div>
	</div>
	<div id="footer">
		<div class="copyright">
			<div class="footer_link">
			Copyright 2004~2008 <A href="[##_blog_link_##]" title="[##_desc_##]">[##_title_##]([##_blog_link_##])</A>
			</div>
			<div class="clear"></div>
		</div>
	</div>
</div>
</body>
</html>

사용하고 있는 플러그인 중 자바스크립트나 스타일쉬트를 이용하는 플러그인이 있다면 <HEAD>와 </HEAD> 사이에 플러그인이 사용하는 자바스크립트를 삽입해야 한다.

플러그인용 스크립트 삽입 예

<link rel="stylesheet" href="/plugins/vResampleLB/lightbox.css">
<script language="JavaScript" type="text/javascript" 
	src="/plugins/vResampleLB/lightbox_plus.js"></script>

페이지를 읽자마자 인쇄 창을 띄우고 싶다면 <BODY> 태그를 다음처럼 바꾸어야 한다.

인쇄 창 바로 띄우기

<body onLoad='window.print(); return false;'>

인쇄용 스타일쉬트

인쇄용 스킨에서 스타일쉬트를 사용하고 있다면 마찬가지로 스타일쉬트 역시 만들어 주어야 한다. 필자는 Moving Box(Green)의 스타일쉬트에서 스킨에서 참조하고 있는 부분만 남기고 나머지는 삭제하는 방법으로 스타일쉬트를 만들었다.

인쇄용 스타일쉬트의 예

@font-face {font-family: 우리바탕; src:url(http://offree.com/attachment/gk150000000000.eot);}
@font-face {font-family: 우리새봄; src:url(http://offree.com/attachment/fk040000000000.eot);}

@charset "utf-8"; 

/* 공통 요소 */
body {margin: 0; padding: 5px; background:/*@background-color*/ /*@*/
										/*@background-image*/ /*@*/
										/*@background-image-repeat*/repeat-x /*@*/
										/*@background-image-position*/0 /*@*/;
										/*@title-height:-62*/0/*@*/; font-size:small; line-height:180%; font-family:우리바탕,돋움;}
a {text-decoration: none; }
a:hover {text-decoration: underline; }
img {border: 0;}
.ib .click img	{vertical-align:baseline !important;}
hr {display: none; }
input {vertical-align: middle; }
ul, ol {margin: 0; padding: 0; list-style: none; }
li, dl, dt, dd {margin: 0; padding: 0; }
h1, h2, h3, h4 ,h5 ,h6 {margin: 0; padding: 0; line-height: 1em}
blockquote {margin-top: 0; margin-bottom: 0; padding: 0px 0 0px 24px; background: url('./images/icon_qoute.gif') no-repeat 0 0px; color: #868686; }
.clear {clear: both; }
.count {font-size: 11px; }
.body {/*@background-color*/ /*@*/
	/*@background-image*/ /*@*/ 
	/*@background-image-repeat*/ /*@*/ 
	/*@background-image-position*/ /*@*/}

/* 포스트 내부 요소 */
.imageblock img { margin:15px 0;}
.location	{line-height: 1.1em}
.article_post ul {padding: 0 15px; list-style-type: disc; }
.article_post ol {padding: 0 15px 0 45px; list-style-type: decimal; }
.article_post blockquote {margin-top: 0; margin-bottom: 0; padding: 10px 0 10px 24px; background: url('./images/icon_qoute.gif') no-repeat 0 0px; color: #868686; }
.article_post blockquote a {color: #868686; }
.article_post .moreless_fold {padding-left: 16px; background: url('./images/btn_more1.gif') no-repeat 0 50%; color: #5d5d5d; }
.article_post .moreless_top {padding-left: 16px; background: url('./images/btn_less1.gif') no-repeat 0 50%; color: #5d5d5d; }
.article_post .moreless_bottom {padding-left: 16px; background: url('./images/btn_less1.gif') no-repeat 0 50%; color: #5d5d5d; }
.article_post h1,
.article_post h2,
.article_post h3,
.article_post h4,
.article_post h5,
.article_post h6 {padding:10px 0; line-height:1.1em;}

/* content */
.separate	{color:#b8b8b8;}
.article	{width:/*@post-width*/700px/*@*/; overflow:hidden; margin-bottom:30px}

.article .article_head	{border-bottom:#d8d8d8 dashed 1px;}
.article_head .article_title	{float:left; width:/*@post-width:-64*/640px/*@*/; margin-left:10px;}
.article_title .title	{color:#678d01; font-size:/*@post-title-font-size*/1.3em/*@*/; font-family:/*@post-title-font-family*/우리새봄,Tahoma, gulim/*@*/; font-weight:bold; line-height:1.1em; letter-spacing:-0.09em; padding:7px 0 5px 0;}
.article_title .title a	{color:/*@post-title-color*/#678d01/*@*/;}
.article_head .article_info	{color:#838382; font-size:0.85em; font-family:우리새봄,Tahoma;}
.article_info a	{color:#838382;}
.article .article_post	{padding:25px 10px 25px 0; color:/*@post-body-color*/#565656/*@*/; font-family:/*@post-body-font-family*/우리바탕, Tahoma, gulim/*@*/; font-size:/*@post-body-font-size*/10pt/*@*/;}
.article .article_post a	{color: blue;}
.article .article_author	{clear:both; padding:20px 0; color:#565656; text-align:right; font-family:우리새봄, Tahoma, gulim, gulim; font-size: 11pt;}

/* footer */
.copyright	{border-top:1px solid #f0f0f0; color:#a6a6a6; font-size:1.2em; text-align: right; padding-right: 10px; width: 700px; font-family: 우리새봄}
.copyright a	{color:#a6a6a6;}
.footer_banner	{float:left; padding:3px 0 0 0; letter-spacing:-1px;}
.footer_banner img	{vertical-align:middle; margin-bottom:8px;}
.footer_link	{float:right; margin-top:12px; font-family:Tahoma;}

/* IE 핵 */
* html .ib	{height:18px;}
*:first-child+html	.ib	{height:18px;}

.article_etc .search {border: solid red 1px}
.hanrss {float: right}

마지막으로 작성된 스타일쉬트를 인쇄에서도 그대로 적용하고 싶다면 스킨에서 스타일쉬트를 지정하면 media 속성을 screen이 아니라 print나 all로 해야 한다.

예

<link title="skinStyle" rel="stylesheet" media="all"
	type="text/css" href="/plugins/vPrintArticle2/style.css" />

현재 이 플러그인은 단일 사용자 환경에 텍스트큐브를 루트에 설치해서 테스트했다. 다중 사용자 환경과 루트 폴더 이외의 폴더에서의 동작도 염두에 두었지만 시험해 보지 않았기 때문에 잘 동작하는지는 필자도 모르고 있다. 따라서 다른 환경에서 이 플러그인이 잘 동작하지 않는다면 플러그인을 활성화한 뒤 동작하지 않는 페이지를 필자에게 알려 주기 바란다.

다음은 인쇄용 플러그인을 적용한 뒤 출력된 인쇄용 화면이다.

Trackback

Trackback Address :: http://offree.net/trackback/1741

Facebook

댓글 · 통계

ResponseRSS Feed

Comments

흑익 2008/05/27 21:30
인쇄라....어떤 느낌인지 정확하게 감은 안잡히네요.

그래도 있으면 확실히 편할것 같은....

perm. | mod/del. | reply.
- 도아 2008/05/28 21:40
  인쇄 링크를 클릭해 보시면 됩니다.
  
  perm. | mod/del.
antisys 2008/05/28 03:46
관리자만 볼 수 있는 댓글입니다.

perm. | mod/del. | reply.
- 도아 2008/05/28 21:41
  질문은 비밀글로 남기지 마시고 기타의 묻고 답하기를 이용하시기 바랍니다.
  
  링크 옆의 새창열기 아이콘은 제가 배포한 바깥 고리 플러그인을 사용하면 됩니다. 그리고 복사 방지 태그에 관한을 글을 잘 읽어 보시면 해당 태그를 내려받을 수 있는 링크가 있는 것을 확인하실 수 있습니다.
  
  perm. | mod/del.
가별이 2008/05/28 22:46
웹페이지 이런건 영 젬병이라 보면 아 코드구나.. 이렇게만 생각하곤 합니다.

perm. | mod/del. | reply.
- 도아 2008/05/29 09:43
  처음에는 어려워 보여도 보다 보면 비교적 쉬운 것이 웹 코딩입니다. 다만 거의 막일 수준입니다. 디버깅이 힘들어서...
  
  perm. | mod/del.
antisys 2008/05/28 23:27
올리고 보니, 묻고 답하기가 있었더군요.
아무튼 감사합니다. ^^;;

perm. | mod/del. | reply.
- 도아 2008/05/29 09:45
  원래 관련글이 아니면 댓글을 달지 않는 것이 예의입니다. 그래서 보통 질문은 방명록에 많이 하는데 저는 방명록으로 올라온 질문이 많아서 별도의 질답 코너를 두고 있습니다. 그리고 다음부터 질답 코너로 올려 주시면됩니다.
  
  perm. | mod/del.
공상플러스 2008/05/30 13:41
햏자는 티스토리라서..

perm. | mod/del. | reply.
- 도아 2008/05/31 06:52
  TC로 바꾸심이...
  
  perm. | mod/del.
이수현 2008/06/09 21:56
설정을
블로그주소 :http://allsolution.kr/kls8
플러그인 주소 : /plugins/vPrintArticle2
선행 문자 : / 
이렇게 했는데..

선행문자대로 '/ 인쇄' 라고 잘 나옵니다만
링크를 클릭하면 http://www.allsolution.kr/plugin/print/?id=1 라는 링크로 가게 되고...
페이지가 없다라는 말이 나오네요..

어떻게 해야 하나요?

perm. | mod/del. | reply.
- 도아 2008/06/10 09:59
  오늘 수정본을 올리도록 하겠습니다.
  
  perm. | mod/del.
부사리 2008/11/04 15:30
도아님 도움감사합니다.
그런데 xml 경우처럼 각 블러그 특성마다 약간씩 다른 점이 있는 것인지 제가 부족함이 많은 것인지 블러그에 플러그인 적용하기가 힘드네요. ^^;

busari.net/blog(2단스킨)에도 적용해보고 krcafe.x-y.net/tc(1단스킨,테스트 블러그)에도 적용해 봤는데
두 곳 모두 인쇄버튼 클릭하면 데이터를 못 읽어오네요.

아무튼 매번 도움 감사했습니다.

항상 건강하세요~~~~~~~~~ ^^

perm. | mod/del. | reply.
- 도아 2008/11/05 08:09
  시간이 나는데로 다른 계정에서 확인한 뒤 답글을 올리도록 하겠습니다. 그런데 혹시 사용하는 TC판번호가 어떻게 되는지요?
  
  perm. | mod/del.
- 도아 2008/11/05 11:13
  무료 계정을 신청했으므로 계정이 나오면 시험해 보고 알려 드리겠습니다.
  
  perm. | mod/del.
NoSyu 2009/02/14 11:58
반갑습니다. Textcube 플러그인 페이지를 타고 왔습니다.
필요에 의해 찾다보니 이미 만들어져있네요.^^
덕분에 설치하여 사용할 수 있게 되었습니다.
좋은 플러그인 개발 및 공개해주셔서 고맙습니다.

perm. | mod/del. | reply.
- 도아 2009/02/14 12:24
  도움이 되셨다니 다행입니다. 별명을 보니 Mr.Dust님 블로그에서 자주 본것 같군요.
  
  perm. | mod/del.
- NoSyu 2009/02/14 12:49
  Mr.Dust 님 블로그에 최근 댓글을 달지 않았더니...
  눈팅만 하는지라...ㅎㅎ
  
  한가지 질문이 있습니다.
  스타일시트에서 overflow property에 hidden이 아니라 visible을 해야지 제대로 출력되는 것이 아닌가요?
  IE에서는 제대로 출력되나 FF에서는 본문이 짤려 나오기에 이를 수정(정확하게는 제 입맛에 맞게 수정하였지만 여튼 hidden을 visible로 바꾸었습니다.)하여 원하는 결과를 얻었습니다.
  CSS에 대해 잘 모르는지라 이렇게 질문 드립니다.
  
  perm. | mod/del.
- 도아 2009/02/14 13:01
  스타일시트는 자신의 스킨에 맞춰서 알아서 편집하면 됩니다. 포함된 스킨은 제가 사용하는 스타일시트일 뿐입니다. 그리고 overflow는 벗어나는 부분에 대한 항목이기 때문에 hidden이든 visible든 상관없습니다. visible를 설정하면 상자를 벗어나 내용이 표시되고 hidden을 설정하면 마지을 벗어나는 내용을 숨깁니다. 그러나 인쇄할 때에는 거의 갈은 결과가 나옵니다.
  
  perm. | mod/del.
성환이 2009/06/11 17:28
저도 부사리님과 같은 현상입니다.

인쇄버튼을 클릭하면 데이터를 읽어오지 못하고 없는 페이지로 출력되네요.

perm. | mod/del. | reply.
- 도아 2009/06/12 11:01
  예. 확인한 뒤 다시 글을 올리도록 하겠습니다.
  
  perm. | mod/del.
게토 2009/10/04 23:02
우앙;;

저도 인쇄 버튼을 누르면 아예 불러오지 못하고 허여멀건 창만 내보냅니다.
그 하얀 창에서 소스를 보면 아무것도 없다는;;

제가 연구해본 결과 텍스트큐브 플러그인 기본 경로가 /plugins 입니다.
도아님의 경우에는 /plugin 이신 것 같은데 그 차이 때문일까요?

일단 활성화는 해두었습니다. 테스트 부탁드립니다.

perm. | mod/del. | reply.
게토 2009/10/05 01:29
관련 없는 내용입니다만,
도아 님의 블로그에서 [인쇄]버튼 옆에 있는 [PDF저장]버튼은 누르면 페이지를 찾을 수 없다고 나오는군요;
사이트가 망한 듯 싶습니다;;

perm. | mod/del. | reply.
- 도아 2009/10/05 08:43
  잘못알고 있습니다. 모든 텍큐에서 모든 플러그인은 plugins에 설치됩니다. plugin은 가상 폴더죠. 그리고 요즘은 플러그인을 만들지 않기 때문에 따로 지원하지는 않습니다. 마지막으로 PDF는 사이트가 망한 것이 아니라 내부적으로 수정중입니다.
  
  perm. | mod/del.
서정호 2009/12/29 11:11
안녕하세요. 만들어주신 플러그인을 Textcube 1.7.8 : Con moto 판에서 다중 블로그 환경에서 사용하고 싶은데 에러가 납니다. 별도로 수정이 필요한 부분이 있을까요?

블로그 주소는 http://blog.changbi.com/weekly
플러그인 설치 주소는 /plugins/vPrintArticle2 로 했습니다.

블로그 글에 붙은 인쇄 링크를 클릭하면 에러가 납니다.

원본글 링크값 : http://blog.changbi.com/weekly/408
인쇄글 링크값 : http://blog.changbi.com/weekly/plugin/print/?id=408

경로의 문제인지 아니면 다른 원인인지 찾고 있는데 쉽지가 않습니다. 작은 도움이라도 주시면 감사하겠습니다.

perm. | mod/del. | reply.
- 도아 2010/01/03 07:50
  제가 요즘 다른 사람의 플러그인을 봐줄 정도의 여유가 없습니다. 미안합니다.
  
  perm. | mod/del.