'공부하자 공부~/Javascript'에 해당되는 글 2건

  1. 2009.04.17 네이버 오픈 소스 - 스마트 에디터..
  2. 2008.07.22 [문자처리] CSS로 문자열 정확히 자르기.

네이버 오픈 소스 - 스마트 에디터..


네이버에서 제공되는 위지윅 에디터인 스마트 에디터 입니다.

웹상에서만 사용되고 있는 줄알았는데..

이게 오픈소스로 공개 했군요..

상용 사이트에 사용해도 무리가 없을 정도로 퀄리티가 있는 것 같은데..

적용을 해 봐야 겠습니다.


http://dev.naver.com/projects/smarteditor

[문자처리] CSS로 문자열 정확히 자르기.


<HTML>
<HEAD>
<TITLE>문자열 자르기</TITLE>
<STYLE type = "text/css">
td { word-break: break-all; }
.shorttitle { width: 305; height: 18;  display: block; overflow: hidden; }
</STYLE>
</HEAD>
<SCRIPT>
String.prototype.trim = function()
{
 return this.replace(/(^\s*)|(\s*$)/g, "");
}
function textCutter()
{
 trSize = 5; // 글 갯수

 for( i = 0; i < trSize; i++ ) // 글 갯수만큼 반복
 {
  row = eval( "tr" + i );

  if( row.scrollHeight >= 24 ) // 한줄이 넘어가는 글에 대해서
  {
   text = row.innerText; // text 변수에 삽입한다.

   while( true ) // 무한 loop
   {
    text = text.substring( 0, text.length - 1 ); // 텍스트를 끝에서 한글자씩 잘라가면서
    row.innerText = text; // 값을 수정한다.

    if( row.scrollHeight < 24 ) break; // 한줄이 되면 loop 를 끝낸다.
   }

   row.innerText = text.trim() + "..."; // 끝에 공백이 있다면 자른 다음  ... 을 붙여서 값을 수정한다.
   row.style.width = 320; // width 를 310에서 320으로 넓힌다. ( ... 이 보일 수 있도록 )
  }
 }
}
</SCRIPT> 
<BODY onLoad = "textCutter()">
<TABLE width = "550" border = "1" cellspacing = "0" cellpadding = "2">
<TR>
 <TD>NO</TD>
 <TD width = "320">SUBJECT</TD>
 <TD>NAME</TD>
 <TD>DATE</TD>
 <TD>HIT</TD>
</TR>
<TR>
 <TD>5</TD>
 <TD>
  <A href = "http://jsguide.net">
  <SPAN id = "tr0" class = "shorttitle">제목 길게 쓰면 누가 알아나 주나? 제발 좀 제목은 간단하게 쓰라구! 누가 본다고.. 쯧쯧</SPAN>
  </A>
 </TD>
 <TD>짜증남</TD>
 <TD>2001.10.17</TD>
 <TD>2</TD>
</TR>
 <TR>
 <TD>4</TD>
 <TD>
  <SPAN id = "tr1" class = "shorttitle">짧게 좀 씁시다. 잘 안보이자나여.</SPAN>
 </TD>
 <TD>딴지남</TD>
 <TD>2001.10.17</TD>
 <TD>8</TD>
</TR>
<TR>
 <TD>3</TD>
 <TD>
  <SPAN id = "tr2" class = "shorttitle">나도 길게 쓸래. 짧게 쓰면 뭔가 허전해서 말이쥐, 왜냐구? 내맘이지 모야!</SPAN>
 </TD>
 <TD>졸라맨</TD>
 <TD>2001.10.17</TD>
 <TD>19</TD>
</TR>
<TR>
 <TD>2</TD>
 <TD>
  <SPAN id = "tr3" class = "shorttitle">이렇게 짧게 써도 되는데</SPAN>
 </TD>
 <TD>낙천맨</TD>
 <TD>2001.10.17</TD>
 <TD>7</TD>
</TR>
<TR>
 <TD>1</TD>
 <TD>
  <SPAN id = "tr4" class = "shorttitle">꼭 이렇게 제목을 길게 써야지만 직성이 풀리는 유별난 사람들이 많은 모양이예요.</SPAN>
 </TD>
 <TD>순진녀</TD>
 <TD>2001.10.17</TD>
 <TD>26</TD>
</TR>
</TABLE>
</BODY>
</HTML>

출처 http://www.jsguide.net/ver2/examples/index.php?mode=view&category=&qstr=&uid=471&page=5


참고 : 파폭에서는 "..." 이 안 나타남.  오페라, 익스 정상 작동

prev 1 next