2.5 웹편집기
인쇄
 
2009-07-09 17:11:37
조회:215627
답글지움수정 아랫글 목록 윗글

2.5 웹편집기



  쎄지오의 기본 기능으로 포함된 게시판, 웹메일 등의 애플리케이션에서는 필요에 따라 위지윅 웹편집기를 사용하고 있습니다. 위지윅 웹편집기는 공유웹자원인 /icons/fckeditor/ 디렉토리 하위에 위치하고 있습니다.

DHTML로 구성된 위지윅 에디터는 여러 종류가 있으며 다른 에디터로 교체하여 사용할 수 있습니다. 쎄지오의 기본 웹편집기의 칼라선택 기능은 인트라넷 환경설정, 웹메일 환경설정, 개인환경설정, 동호회 환경설정, 게시판 환경설정등에서 공통적으로 사용되고 있으므로 fckeditor 이외의 에디터를 사용한다고 하더라도 지우지 말고 유지시켜야 합니다

 

1) 웹편집기의 구성

맨위로

 

 

 

 

  게시판의 글쓰기 필터나, 웹메일의 쓰기 필터에는 웹편집기를 삽입하고 있는데 다음과 같은 구문의 조합에 의해 가능합니다.

<html>
<head>
<script type="text/javascript" src="/icons/s_editor/lang_en.js"></script>
<script type="text/javascript" src="/icons/s_editor/editor.js"></script>
...생략 ...
</head>

<body 0nload="editor_init('context');">
... 생략 ...
<textarea id="context" name="context" ...생략... >
... 생략 ...
 

  외부 파일로 존재하는 두개의 자바스크립트("lang_en.js", "editor.js" 파일은 각각 언어설정과 HTML에디터를 구현하는 기능을 담당합니다. <body>태그에서는 페이지가 로드된 이후에 "editor_init('context');"함수가 실행하도록 지정하여야 하며, 텍스트 편집을 위한 <textarea> 의 ID 속성과 함수의 인자를 동일하게 지정해야 합니다.

다음 그림은 게시판에 게시물을 등록하기 위하여 새로운 글을 편집하는 화면으로 게시판의 편집필터에 의해 구현되고 있습니다.

 

 

그림에서 보는 바와 같이 게시판의 본문을 꾸미기 위해서 HTML에디터가 구비되어 있습니다.

 
 

2) 편집기 툴바

맨위로

 

 

 

 

  HTML 에디터에서는 기본적으로 텍스트가 입력되면 HTML형태로 직접 작성하여 줍니다. 에디터의 상단에는 두줄로 된 문서편집 툴바가 위치하고 있습니다. 다음은 툴바 그림입니다.

 

 

  툴바의 윗줄은 문단의 정렬옵션, 볼드체, 이탤릭체, 언더라인, 하첨자속성, 위첨자 속성, 들여쓰기 옵션 및 내어쓰기 옵션, 평행선, 링크, , 실행취소, 재실행,  HTML원문으로 보기 등의 도구가 나열되어 있습니다.  아랫줄에서는  텍스트의 속성을 지정하기 위한 도구들이 위치하고 있습니다. 문단스타일, 폰트 종류 설정, 글자크기 설정, 스트라이크, 그림삽입, 표삽입, 문자색상, 배경색상 등을 지정할 수 있습니다.

 
편집기 툴바 변형하기

  앞서 보여준 툴바는 HTML에디터의 표준 툴바입니다. HTML에디터를 구성할 때 "editor.js"를 호출하기 전에 다음과 같은 자바스크립트를 표시하면 툴바의 일부를 선택적으로 보여줄 수 있습니다.

 

<script type="text/javascript">
<!--
var my_toolbar =
[
["formatblock","fontname","fontsize","bold","italic",
   "underline","strikethrough","separator"],
["forecolor","hilitecolor",/*"textindicator",*/],
["subscript","superscript"],
["linebreak","justifyleft","justifycenter","justifyright",
   "justifyfull","separator"],
["insertorderedlist","insertunorderedlist","outdent",
   "indent","separator"],
["inserthorizontalrule","createlink","insertimage",
   "inserttable","separator"],
["undo","redo"], ["cut","copy","paste"], ["separator"],
["removeformat", "htmlmode"]

];
-->
</script>
<script type="text/javascript" src="/icons/fckeditor/fckeditor.js"></script>
<noscript>
위지윅 편집기를 호출하는 자바스크립트
</noscript>
<script type="text/javascript">
<!--
var ImageWidthFit='$#b.widthfit#;';
window.0nload=function ()
{
   editor_init('context');
}
-->
</script>
<noscript></noscript>
$#fi#;
를 미리 선언하면 "editor.js"이 시작하면서 선언된 툴바를 먼저 적용시킵니다. 
위에 선언된 툴바 목록은 표준툴바 목록과 같으며 삭제하고자 하는 것을 삭제하여 툴바를 조절할 수 있습니다.
 

3) 본문으로의 이미지 업로드

맨위로

 

 

 

  쎄지오 웹솔루션의 경우 게시판이나 이메일에서 사용자는 PC의 그림을 본문편집의 내용물로 업로드해 넣을 수 있도록 되어있습니다. 뿐만 아니라 기존의 웹주소(URL)로 접근 가능한 이미지를 추가하여 본문을 편집할 수 있습니다.

이미지 삽입을 위해서 이미지 아이콘을 클릭하면 다음과 같은 이미지 삽입을 위한 다이얼로그 윈도가 생성됩니다.

 

 

위 그림에서 "찾아보기"를 클릭하면 다음과 같은 파일 브라우징 윈도우가 나타납니다.

 

  파일을 선택하면 브라우징 윈도는 사라지고 파일 삽입 윈도에 해당 그림이 표시되며 그림에 대한 옵션을 설정하고 완료하면 이미지가 삽입됩니다.

이미지 삽입윈도에서는 "Image alt"에는 이미지 태그의 "alt" 속성의 값을 지정합니다.. Image size는 그림의 가로 세로 픽셀크기를 나타냅니다. 가로 크기가 500보다 큰경우 자동으로 비율축소 옵션이 실행되는데 비율축소란 그림을 축소할 때 가로크기와 세로크기를 같은 비율로 축소하여 그림이 일그러지지 않도록 하는 기능입니다. 비율축소(Rational)을 선택한 상태에서 width 를 입력하거나 선택하면 그에 따라 자동으로 height도 변경됩니다.

위지윅 에디터를 다른 것으로 교체할 경우 이미지 업로드에 대해서는 fckeditor 의 기능을 참조하여 추가하시기를 권장합니다.

 

답글지움수정인쇄 아랫글 목록 윗글
댓글달기

쎄지오 매뉴얼 게시판의 게시물 목록
번호 파일 글제목 작성자 일시 조회
61 gif 파일 ticon10.4 CMS개요 케이시크 09-07-21 150343
60   ticon4.5 환경설정 케이시크 09-07-17 186633
59 jpg 파일 ticon6.8 게시판자동생성 [3] 관리자 09-07-14 188039
58 jpg 파일 ticon6.7 게시판아이콘 관리자 09-07-14 187967
57 jpg 파일 ticon6.6 게시판환경설정 관리자 09-07-14 187744
56 jpg 파일 ticon6.5 게시판관리 관리자 09-07-14 172475
55 jpg 파일 ticon3.7 환경 설정 관리자 09-07-14 204985
54 jpg 파일 ticon3.6 웹메일 필터 관리자 09-07-14 209222
53 gif 파일 ticon8.7 사용자관리 관리자 09-07-13 189120
52 jpg 파일 ticon10.3 플래시쇼 관리 sysop 09-07-10 197353
51 jpg 파일 ticon10.3 플래시쇼 개요 sysop 09-07-10 196515
50 gif 파일 ticon10.2 메뉴관리 sysop 09-07-10 176200
49 gif 파일 ticon10.1 프론트페이지 sysop 09-07-10 198470
48 jpg 파일 ticon9.4 업무용 메신저 sysop 09-07-10 468679
47 jpg 파일 ticon9.3 명함관리 sysop 09-07-10 203430
46 jpg 파일 ticon9.2 업무진행 sysop 09-07-10 197099
45 bmp 파일 ticon9.1 전자결재 sysop 09-07-10 209722
44 jpg 파일 ticon9.2 시스템구성 sysop 09-07-10 193126
43   ticon9.1 전자결재개요 sysop 09-07-10 188481
42   ticon8.6 자바환경설정 sysop 09-07-10 196588
41   ticon8.5 웹게시판 sysop 09-07-10 184612
40   ticon8.4 웹쪽지 sysop 09-07-10 191150
39   ticon8.3 웹메신저 sysop 09-07-10 382437
38 jpg 파일 ticon8.2 웹메일 서비스 sysop 09-07-10 260989
37 jpg 파일 ticon8.1 사용자 웹서비스 sysop 09-07-10 212437
36   ticon7.8 커뮤니티 게시판관리 sysop 09-07-10 207715
35   ticon7.7 커뮤니티 회원관리 sysop 09-07-10 213220
34 jpg 파일 ticon7.6 사용자 환경설정 sysop 09-07-10 210842
33   ticon7.5 동호회 연결하기 sysop 09-07-10 714776
32 jpg 파일 ticon7.4 신규동호회 개설 sysop 09-07-10 218449
31 jpg 파일 ticon7.3 커뮤니티 관리도구 sysop 09-07-10 221243
30 jpg 파일 ticon7.2 동호회, 사용자 홈페이지 로그인 sysop 09-07-10 201735
29   ticon7.1 커뮤니티 개요 sysop 09-07-10 196182
28 jpg 파일 ticon6.3 게시판 관리와 응용 sysop 09-07-09 209966
27 jpg 파일 ticon6.2 게시판 스타일 sysop 09-07-09 203577
26 jpg 파일 ticon6.1 게시판 목록/인증필터 sysop 09-07-09 346370
25 jpg 파일 ticon6.1 게시판 편집/보기필터 sysop 09-07-09 205248
24   ticon5.4 확장개발-JSP sysop 09-07-09 205076
23   ticon5.3 확장개발-사용자 관리 sysop 09-07-09 207499
22 jpg 파일 ticon5.2 확장개발-PHP sysop 09-07-09 189083
21 jpg 파일 ticon5.1 확장개발-CGI 바이너리 sysop 09-07-09 283949
20 jpg 파일 ticon4.4사용기록보기 sysop 09-07-09 196269
19 jpg 파일 ticon4.3 사용자관리 sysop 09-07-09 210972
18 jpg 파일 ticon4.2 로그인 및 관리도구 [1] sysop 09-07-09 220417
17 jpg 파일 ticon4.1 인트라셀이란 sysop 09-07-09 1254043
16 jpg 파일 ticon3.5 스팸메일 설정 sysop 09-07-09 612000
15 jpg 파일 ticon3.4 웹메일 사용자 기능 sysop 09-07-09 241894
14 jpg 파일 ticon3.3 웹메일 구성 sysop 09-07-09 246037
13 jpg 파일 ticon3.2 웹메일 환경설정 sysop 09-07-09 569519
12 jpg 파일 ticon3.1 웹메일 개요 sysop 09-07-09 238150
11   ticon2.6 기초필터파일 sysop 09-07-09 412675
10 jpg 파일 ticon2.5 웹편집기 sysop 09-07-09 215627
09 jpg 파일 ticon2.4 웹 디렉토리 sysop 09-07-09 241099
08 jpg 파일 ticon2.3 웹 레이아웃 sysop 09-07-09 266754
07 jpg 파일 ticon2.2 웹필터링 sysop 09-07-09 347804
06 jpg 파일 ticon2.1 쎄지오 웹자원 sysop 09-07-09 348488
05 jpg 파일 ticon1.5 쎄지오 관리 sysop 09-07-09 235604
04 jpg 파일 ticon1.4 처음 로그인 하기 sysop 09-07-09 241061
03 jpg 파일 ticon1.3 쎄지오 설치 2 sysop 09-07-09 450386
02 gif 파일 ticon1.2 쎄지오 설치 sysop 09-07-09 820475
01 gif 파일 ticon1.1 intro sysop 09-07-09 194278