• 우선 WebEditor 모듈을 다운로드 받은후 압축을 풉니다.
  • /WebEditor ┬ cgi
    ├ classes
    ├ css
    ├ dialog
    ├ emoticon
    ├ images
    ├ js
    class.WebEditorGenerator.js - 설정 및 WebEditor 생성 클래스
    example.html
    └ readme.html
  • WebEditor 디렉토리를 통째로.. FTP 등을 통해서 업로드를 합니다.
    : 웹문서 루트디렉토리(이하 루트, 최초 index.html 파일이 위치한 곳)에다가 복사
  • WebEditor 이 위치한 디렉토리는 "/WebEditor" 입니다.
    또한 거의 모든 디렉토리 설정은 루트를 기준("/")으로 설정을 합니다.
  • 압축을 해제를 한후 WebEditor 을 설정을 합니다.
    • 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 의 기본 설정은 끝났습니다.
    지금부터는 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)
     
  • WebEditor 생성자
  • id : Element의 id 값
  • width : 가로
  • height : 세로
  •  
    void generate(void)
  • Element중 id인 TextArea를 WebEditor로 대체.
  •  
    void setMode(String sMode)
  • sMode : "Editor || Source"만 올수 있다.
  • sMode이 empty 인 경우는.. 현재 모드에 반대 모드로 자동 변경
  •  
    String getMode(void)
  • 현재 모드를 얻을수 있다. "Editor || Source"
  •  
    String getValue(void)
  • 지금까지 작성된 WebEditor의 값을 얻을 수 있다.
  •  
    void focus(void)
  • WebEdtior 로 포커스를 이동
  •  

    출처 - http://home.mytnt.co.kr 

  • 2007/11/22 15:02 2007/11/22 15:02

    Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다