WebEditor_1[1][1][1].53_Build_43.tar.gz
|
예 : 웹문서 루트디렉토리(이하 루트, 최초 index.html 파일이 위치한 곳)에다가 복사
또한 거의 모든 디렉토리 설정은 루트를 기준("/")으로 설정을 합니다.
- class.WebEditorGenerator.js을 오픈을 합니다. (모든 설정은 이 파일에서 할수 있습니다.)
/////////////////////////////////////////////////////////////////////////////////////////////////
// config Start
/////////////////////////////////////////////////////////////////////////////////////////////////
// Basic Directory
var WebEditor_Basic_Dir = '/WebEditor'; -- ①
// Basic Btn Lists
// '|' is separator
// '-' is new line
var WebEditor_Btns = {
'Basic' :['Source','|','Cut','Copy','Paste','|','Undo','Redo','|','Bold',....
'Extend' :['FontName','FontSize','ForeColor','BackColor','|','CreateLink',...
'Advanced' :['Table','TableProperties','TdProperties','|',...
};--②
// Emoticon Popup Size(Width, Height);
var WebEditor_Emoticon_popup_size = new Array("700px", "500px");--③
// Emoticon Icon Directory
var WebEditor_Emoticon_Dir = WebEditor_Basic_Dir + "/emoticon/fun";--④
// Emoticon Icon, Row Print Icon Number;
var WebEditor_Emoticon_Num = 10;--⑤
// UpLoad Directory
var WebEditor_Upload_Dir = '/_data/user_imgs';--⑥
// UpLoad Size
var WebEditor_Upload_Size = 2048; // KB (1MB = 1024KB)--⑦
// User CSS & Preview CSS
var WebEditor_User_CSS = '/css/style.css';--⑧
// P tag to br tag
var WebEditor_Convert_Tag_P = true;--⑨
/////////////////////////////////////////////////////////////////////////////////////////////////
// End
/////////////////////////////////////////////////////////////////////////////////////////////////
① WebEditor가 위치한 디렉토리 (예 : "/WebEditor")
② 툴바에 포함된 버튼 리스트 편집
'|' -> 세로 구분자
'Basic', 'Extend', 'Advanced' 는 행을 나타냅니다. 각행에 포함된 버튼들은 서로 다른행으로 이동가능합니다.
'About' 는 삭제를 하실 수 없습니다. (위치 변경은 가능합니다.)
③ 이모티콘 팝업 사이즈를 설정 (가로픽셀, 세로픽셀)
④ 이모니콘 디렉토리 위치를 설정 (해당디렉토리의 모든 이미지파일을 이모티콘으로 쓸수 있습니다.)
⑤ 한줄에 출력되는 이모티콘의 개수를 설정을 합니다.
⑥ 이미지 삽입시 업로드를 할 경우 업로드 디렉토리를 설정을 합니다. 역시 루트부터 시작을 하며,
타인에 대해 쓸수 있도록 퍼미션 설정을 하셔야 합니다.
가령 /data 가 파일을 저장하는 공간이라면 var WebEditor_Upload_Dir = '/data';입니다.
* upload directory 는 서버에 관련된 부분이므로 user의 게정에 따라 다릅니다. 설정에러가 날경우는. 질/답란에 질문을 올려 주세요
⑦ 업로드 할 수 있는 사이즈를 결정합니다. (KB 단위 | 1메가(MB) = 1024KB) 입니다.
⑧ WebEditor과 미리보기시 적용할 스타일 시트를 설정합니다.
⑨ 엔터키 입력시 2줄 이면 false, 한줄이면 true
지금부터는 WebEditor를 삽입해 보도록 하겠습니다.
- 루트의 /test/test.html 에 삽입을 한다면.
- test.html을 오픈을 합니다.
또는<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>Untitled Document</title>
<script language="javascript" src="/WebEditor/class.WebEditorGenerator.js"></script>
</head>
<body>
</body>
</html>
<textarea id='WebEditor'>TEST</textarea>
<script language="javascript">
var e = new WebEditorGenerator('WebEditor', "100%", "200px");
e.generate();
</script>
또는<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>Untitled Document</title>
<script language="javascript" src="/WebEditor/class.WebEditorGenerator.js"></script>
</head>
<body>
</body>
</html>
<textarea id='WebEditor'>TEST</textarea>
<script language="javascript">
var e = new WebEditorGenerator('WebEditor');
e.generate();
</script><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>Untitled Document</title>
<script language="javascript" src="/WebEditor/class.WebEditorGenerator.js"></script>
</head>
<body>
</body>
</html>
<textarea id='WebEditor'>TEST</textarea>
<script language="javascript">
(new WebEditorGenerator('WebEditor')).generate();
</script>
이제는 브라우져를 통해서 확인하실 수 있습니다.
개발자를 위한 몇 가지 메소드
WebEditor는 사용 편의상 몇가지 외부에 제공되는 메소드를 포함합니다.
WebEditor의 값을 얻는다거나 또는 TEXTAREA로의 변경 및 focus 이동등을 하실 수 있습니다.
또한 WebEditor 값을 확인하여 자바스크립트의 값 체크등으로 사용하실 수 있습니다.
| void WebEditorGenerator(String id, Int width, Int height) |
|
|
| void generate(void) |
|
|
| void setMode(String sMode) |
|
|
| String getMode(void) |
|
|
| String getValue(void) |
|
|
| void focus(void) |
|
|
출처 - http://home.mytnt.co.kr