### Rearrange Toolbar Buttons

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/buttons.html

Examples showing the markup before and after moving the superscript and subscript buttons before the left-align button.

```html
<!-- 배경 색 버튼 -->
<li class="se2_pair husky_seditor_ui_BGColor"><span class="selected_color husky_se2m_BGColor_lastUsed"></span><span class="husky_seditor_ui_BGColorA"><button type="button" title="배경색" class="se2_bgcolor"><span>배경색</span></button></span><span class="husky_seditor_ui_BGColorB"><button type="button" title="더보기" class="se2_bgcolor_more"><span class="_buttonRound">더보기</span></button></span>
  <!-- 배경 색 -->
  … 배경 색 레이어 HTML 코드 …
  <!-- //배경 색 -->
</li>
<!-- 위 첨자 버튼 -->
<li class="husky_seditor_ui_superscript"><button type="button" title="윗첨자" class="se2_sup"><span class="_buttonRound">윗첨자</span></button></li>
<!-- 아래 첨자 버튼 -->
<li class="husky_seditor_ui_subscript"><button type="button" title="아래첨자" class="se2_sub"><span class="_buttonRound">아래첨자</span></button></li>
</ul>
<ul>
<!-- 왼쪽 정렬 버튼 -->
<li class="husky_seditor_ui_justifyleft"><button type="button" title="왼쪽정렬" class="se2_left"><span class="_buttonRound">왼쪽정렬</span></button></li>
```

```html
<!-- 배경 색 버튼 -->
<li class="se2_pair husky_seditor_ui_BGColor"><span class="selected_color husky_se2m_BGColor_lastUsed"></span><span class="husky_seditor_ui_BGColorA"><button type="button" title="배경색" class="se2_bgcolor"><span>배경색</span></button></span><span class="husky_seditor_ui_BGColorB"><button type="button" title="더보기" class="se2_bgcolor_more"><span class="_buttonRound">더보기</span></button></span>
  <!-- 배경 색 -->
  … 배경 색 레이어 HTML 코드 …
  <!-- //배경 색 -->
</li>
</ul>
<ul>
<!-- 위 첨자 버튼 -->
<li class="husky_seditor_ui_superscript"><button type="button" title="윗첨자" class="se2_sup"><span class="_buttonRound">윗첨자</span></button></li>
<!-- 아래 첨자 버튼 -->
<li class="husky_seditor_ui_subscript"><button type="button" title="아래첨자" class="se2_sub"><span class="_buttonRound">아래첨자</span></button></li>
<!-- 왼쪽 정렬 버튼 -->
<li class="husky_seditor_ui_justifyleft"><button type="button" title="왼쪽정렬" class="se2_left"><span class="_buttonRound">왼쪽정렬</span></button></li>
```

--------------------------------

### HTML Form Setup for FileUploader

Source: https://naver.github.io/smarteditor2/user_guide/5_fileuploader/init.html

The input[type=file] element must be within a form. Ensure the form uses 'POST' method and 'multipart/form-data' enctype.

```html
<form method="POST" enctype="multipart/form-data">
    <input type="file" id="file_select">
</form>

```

--------------------------------

### Server-side FileUploader.php Example

Source: https://naver.github.io/smarteditor2/user_guide/5_fileuploader/workflow.html

This PHP script handles file uploads, determines success or failure, and constructs a redirect URL with appropriate parameters.

```php
//기본 리다이렉트
$url = $_REQUEST["callback"] .'?callback_func='. $_REQUEST["callback_func"];

if (is_uploaded_file($_FILES['Filedata']['tmp_name'])) { //성공 시 파일 사이즈와 URL 전송
    $tmp_name = $_FILES['Filedata']['tmp_name'];
    $name = $_FILES['Filedata']['name'];
    $new_path = "upload/".urlencode($name);
    @move_uploaded_file($tmp_name, $new_path);
    $url .= "&size=". $_FILES['Filedata']['size'];
    $url .= "&url=http://test.naver.com/components/upload/".urlencode(urlencode($name));
} else { //실패시 errstr=error 전송
    $url .= '&errstr=error';
}

header('Location: '. $url);

```

--------------------------------

### SmartEditor Basic 0.3.x File Structure

Source: https://naver.github.io/smarteditor2/user_guide/2_install/upgrade.html

Assumed file structure for a service with SmartEditor Basic 0.3.x installed.

```html
/pages
 sample.php   -- 에디터의 내용을 저장
 write.html   -- 에디터가 설치된 html
/se
 /css              -- 에디터 관련 CSS 파일들
 /img              -- 에디터 관련 이미지 파일들
 /js               -- 에디터 관련 JavaScript 파일들
     Husky.SE_Basic.js
     HuskyEZCreator.js
     jindo.min.js
     SE_CustomPlugins.js
 se_blank.html
 SEditorSkin.html
```

--------------------------------

### Implement Basic Toolbar Button

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/buttons.html

Example of a button within a group, requiring the _buttonRound class on the span element.

```html
<li class="husky_seditor_ui_findAndReplace">
<button type="button" title="찾기/바꾸기" class="se2_find">
  <spanclass="_buttonRound">찾기/바꾸기</span>
</button>
<!-- 찾기/바꾸기 -->
… 찾기/바꾸기 레이어 HTML 코드 …
<!-- //찾기/바꾸기 -->
</li>
</ul>
```

--------------------------------

### Implement Standalone Toolbar Button

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/buttons.html

Example of a button that exists alone in a group, which must also include the _buttonRound class.

```html
<ul>
<li class="husky_seditor_ui_quote">
  <button type="button" title="인용구" class="se2_blockquote">
    <span class="_buttonRound">인용구</span>
  </button>
  <!-- 인용구 -->
  … 인용구 레이어 HTML 코드 …
  <!-- //인용구 -->
</li>
</ul>
```

--------------------------------

### Callback Page HTML Example

Source: https://naver.github.io/smarteditor2/user_guide/5_fileuploader/workflow.html

This HTML file serves as a callback page for file uploads. It sets the document domain, parses URL parameters, and executes success or error callback functions in the parent FileUploader object.

```html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FileUploader Callback</title>
</head>
<body>
<script type="text/javascript">
    // document.domain 설정
    document.domain = "nhncorp.com";
    // execute callback script
    var sUrl = document.location.search.substr(1);
    if (sUrl != "blank") {
        var oParameter = {}; // query array
        sUrl.replace(/([^=]+)=([^&]*)(&|$)/g, function(){
            oParameter[arguments[1]] = arguments[2];
            return "";
        });
        if ((oParameter.errstr || '').length) { // on error
            (parent.jindo.FileUploader._oCallback[oParameter.callback_func+'_error'])(oParameter);
        } else { // on success
            (parent.jindo.FileUploader._oCallback[oParameter.callback_func+'_success'])(oParameter);
        }
    }
</script>
</body>

```

--------------------------------

### Initialize SmartEditor2

Source: https://naver.github.io/smarteditor2/user_guide/2_install/setting.html

Create the editor instance using the HuskyEZCreator. Ensure the sSkinURI points to the correct SmartEditor2Skin.html file.

```javascript
<script type="text/javascript">
var oEditors = [];
nhn.husky.EZCreator.createInIFrame({
 oAppRef: oEditors,
 elPlaceHolder: "ir1",
 sSkinURI: "../se2/SmartEditor2Skin.html",
 fCreator: "createSEditor2"
});
</script>
```

--------------------------------

### Perform Initialization After App Ready with $ON_MSG_APP_READY

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/plugins/03.html

Execute initialization tasks after all plugins are registered using the $ON_MSG_APP_READY handler. This handler should only perform HTML element initialization and event binding, as it impacts editor initialization.

```javascript
$ON_MSG_APP_READY : function() {
this.oApp.exec('REGISTER_UI_EVENT', ['TimeStamper', 'click',
        'SE_TOGGLE_TIMESTAMPER_LAYER']);
},
```

--------------------------------

### Initialize jindo.FileUploader

Source: https://naver.github.io/smarteditor2/user_guide/5_fileuploader/init.html

Instantiate jindo.FileUploader with the ID of the file input element and configuration options including the server URL and callback page.

```javascript
var oFileUploader = new jindo.FileUploader(jindo.$("file_select"), {
    //업로드할 서버의 URL(Form 전송 대상)
    sUrl : '/samples/response/FileUpload.php',
    //업로드 이후에 IFRMAME이 리다이렉트될 콜백 페이지 주소
    sCallback : '/Jindo_Component/FileUploader/callback.html',
    //post할 데이터 셋. 예: { blogId : "testid" }
    htData : {}
});

```

--------------------------------

### Update HuskyEZCreator.js Path

Source: https://naver.github.io/smarteditor2/user_guide/2_install/upgrade.html

Change the path to HuskyEZCreator.js in write_se2.html to reflect the new location in the 'se2' folder.

```html
<script type="text/javascript" src="../se2/js/HuskyEZCreator.js" charset="utf-8"></script>
```

--------------------------------

### Include HuskyEZCreator script

Source: https://naver.github.io/smarteditor2/user_guide/2_install/setting.html

Add the required JavaScript file to the HTML page. Ensure the path to HuskyEZCreator.js is correct.

```html
<script type="text/javascript" src="../se2/js/service/HuskyEZCreator.js" charset="utf-8"></script>
```

--------------------------------

### Initialize Plugin with $init Handler

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/plugins/03.html

Use the $init function for plugin initialization when it's created. This function is called once during the plugin's lifecycle.

```javascript
$init : function(elAppContainer){
this._assignHTMLObjects(elAppContainer);
},
```

--------------------------------

### SE2BasicCreator.js에서 플러그인 등록 제거

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/remove.html

에디터 초기화 시 로드되는 플러그인 등록 코드를 삭제하여 기능을 비활성화합니다.

```javascript
oEditor.registerPlugin(new nhn.husky.SE2M_Quote(elAppContainer));                      // 인용구 스타일
oEditor.registerPlugin(new nhn.husky.SE2M_Hyperlink(elAppContainer));   // 하이퍼링크
oEditor.registerPlugin(new nhn.husky.SE2M_SCharacter(elAppContainer));  // 특수 문자
oEditor.registerPlugin(new nhn.husky.SE2M_FindReplacePlugin(elAppContainer));//찾기/바꾸기
oEditor.registerPlugin(new nhn.husky.SE2M_TableCreator(elAppContainer));             // 테이블 생성
oEditor.registerPlugin(new nhn.husky.SE2M_TableEditor(elAppContainer));  // 테이블 편집
oEditor.registerPlugin(new nhn.husky.SE2M_TableBlockStyler(elAppContainer));// 테이블 스타일
```

--------------------------------

### 에디터 데이터 전송 형식 예시

Source: https://naver.github.io/smarteditor2/user_guide/4_photouploader/install/04.html

setPhotoToEditor 함수를 통해 에디터로 전달되는 데이터는 파일명, 전체 경로, 줄바꿈 여부를 포함하는 배열 구조를 가집니다.

```javascript
var res =[ {sFileName : "코코몽.jpg",
        sFileURL :"http://image_server.domain.net/20120315/코코몽.jpg",
        bNewLine : true },
        {sFileName : "오몽.jpg",
        sFileURL :" http://image_server.domain.net/20120315/오몽.jpg",
        bNewLine : true }, …  ];
```

--------------------------------

### Updated File Structure After Copying

Source: https://naver.github.io/smarteditor2/user_guide/2_install/upgrade.html

The file structure after creating the 'se2' folder and copying SmartEditor2 files.

```html
/pages
 sample.php
 write.html
 write_se2.html            -- write.html 을 복사한 파일
/se
 /css
 /img
 /js
     Husky.SE_Basic.js
     HuskyEZCreator.js
     jindo.min.js
     SE_CustomPlugins.js
 se_blank.html
 SEditorSkin.html
/se2                          -- 새로 추가된 폴더
 /css                      -- 에디터 관련 CSS들
 /img                      -- 에디터 관련 이미지들
 /js                       -- 에디터 관련 JavaScript 파일들
 smart_editor2_inputarea.html
 smart_editor2_inputarea_ie8.html
 SmartEditor2Skin.html
```

--------------------------------

### Create SmartEditor2 Instance

Source: https://naver.github.io/smarteditor2/user_guide/2_install/upgrade.html

Modify the JavaScript code in write_se2.html to create the SmartEditor2 instance, updating the skin URI and creator function name.

```javascript
var oEditors = [];
nhn.husky.EZCreator.createInIFrame({
 oAppRef: oEditors,
 elPlaceHolder: "ir1",
 sSkinURI: "../se2/SmartEditor2Skin.html",
 fCreator: "createSEditor2"
});
```

--------------------------------

### HTML5 브라우저용 업로드 함수 구현

Source: https://naver.github.io/smarteditor2/user_guide/4_photouploader/install/04.html

html5Upload 함수는 선택된 파일들을 순회하며 callAjaxForHTML5를 통해 서버로 전송합니다. callAjaxForHTML5는 Jindo $Ajax를 사용하여 multipart/form-data 형식으로 파일을 업로드합니다.

```javascript
function html5Upload() {
        var tempFile,
             sUploadURL;

        //업로드할 URL 입력
        sUploadURL= 'file_uploader_html5.php';

        //여러 파일이 선택 되었을 때, 파일을 하나씩 보내고 결과를 받음.
        for(var j=0, k=0; j < nImageInfoCnt; j++) {
            tempFile = htImageInfo['img'+j];
            try{
                if(!!tempFile){
                    //Ajax통신하는 부분. 파일과 업로드 할 url을 전달한다.
                    callAjaxForHTML5(tempFile,sUploadURL);
                    k += 1;
                }
            }catch(e){}
            tempFile = null;
        }
    }

function callAjaxForHTML5 (tempFile, sUploadURL){
        var oAjax = jindo.$Ajax(sUploadURL, {
            type: 'xhr',
            method : "post",
            onload : function(res){ // 요청이 완료되면 실행될 콜백 함수
                if (res.readyState() == 4) {
                    //성공 시에  responseText를 가지고 array로 만드는 부분.
                    makeArrayFromString(res._response.responseText);
                }
            },
            timeout : 3,
            onerror :  jindo.$Fn(onAjaxError, this).bind()
        });
        oAjax.header("contentType","multipart/form-data");
        oAjax.header("file-name",encodeURIComponent(tempFile.name));
        oAjax.header("file-size",tempFile.size);
        oAjax.header("file-Type",tempFile.type);
        oAjax.request(tempFile);
}
```

--------------------------------

### Configure Popup URL in hp_SE2M_AttachQuickPhoto.js

Source: https://naver.github.io/smarteditor2/user_guide/4_photouploader/install/01.html

Modify the makePopupURL function to point to the correct photo uploader HTML file path.

```javascript
/**
* 서비스별로 팝업에  parameter를 추가하여 URL을 생성하는 함수
*/
 makePopupURL : function(){
     var sPopupUrl = "./popup/attach_photo/photo_uploader.html";
     return sPopupUrl;
 },
```

--------------------------------

### SmartEditor2 Files to Copy

Source: https://naver.github.io/smarteditor2/user_guide/2_install/upgrade.html

Files and folders to copy from the SmartEditor2 distribution into a new 'se2' folder.

```html
/css
/img
/js
smart_editor2_inputarea.html
smart_editor2_inputarea_ie8.html
SmartEditor2Skin.html
```

--------------------------------

### Initialize HTML Elements with _assignHTMLElements

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/plugins/03.html

Initialize frequently used HTML elements within the _assignHTMLElements function. For performance-critical elements, consider initializing them only when needed.

```javascript
_assignHTMLObjects : function(elAppContainer){
this.oDropdownLayer =
        cssquery.getSingle("DIV.husky_seditor_TimeStamper_layer", elAppContainer);
},
```

--------------------------------

### Configure file_uploader_html5.php for Photo Upload

Source: https://naver.github.io/smarteditor2/user_guide/4_photouploader/install/03.html

Update the file_uploader_html5.php script to correctly save uploaded files and set the file URL. Verify that the sFileURL path points to the correct server upload location.

```php
if(file_put_contents($newPath, $file->content)) {
  $sFileInfo .= "&bNewLine=true";
  $sFileInfo .= "&sFileName=".$file->name;
  $sFileInfo .= "&sFileURL=/smarteditor/demo/uploade/".
```

--------------------------------

### Register Photo Plugin in SE2BasicCreator.js

Source: https://naver.github.io/smarteditor2/user_guide/4_photouploader/install/01.html

Add the photo plugin instance to the editor container within the creator script.

```javascript
oEditor.registerPlugin(new nhn.husky.SE2M_AttachQuickPhoto(elAppContainer)); // 사진
```

--------------------------------

### Complete SE_TimeStamper Plugin Code

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/plugins/03.html

This is the complete JavaScript code for the SE_TimeStamper plugin, demonstrating how to integrate initialization, UI event registration, and custom handler logic.

```javascript
nhn.husky.SE_TimeStamper = jindo.$Class({
    name : "SE_TimeStamper",
    $init : function(elAppContainer){
        this._assignHTMLObjects(elAppContainer);
    },

    _assignHTMLObjects : function(elAppContainer){
        this.oDropdownLayer =
                cssquery.getSingle("DIV.husky_seditor_TimeStamper_layer", elAppContainer);
        //div 레이어안에 있는 input button을 cssquery로 찾는 부분.
        this.oInputButton = cssquery.getSingle(".se_button_time", elAppContainer);
    },

    $ON_MSG_APP_READY : function(){
        this.oApp.exec("REGISTER_UI_EVENT",
                ["TimeStamper", "click", "SE_TOGGLE_TIMESTAMPER_LAYER"]);
        //input button에 click 이벤트를 할당.
        this.oApp.registerBrowserEvent(this.oInputButton, 'click','PASTE_NOW_DATE');
    },

    $ON_SE_TOGGLE_TIMESTAMPER_LAYER : function(){
        this.oApp.exec("TOGGLE_TOOLBAR_ACTIVE_LAYER", [this.oDropdownLayer]);
    },

    $ON_PASTE_NOW_DATE : function(){
        this.oApp.exec("PASTE_HTML", [new Date()]);
    }
});
```

--------------------------------

### jindo.FileUploader Methods

Source: https://naver.github.io/smarteditor2/user_guide/5_fileuploader/methods.html

The jindo.FileUploader component provides the following methods for file upload functionality.

```APIDOC
## jindo.FileUploader Methods

### Description
This section details the methods available for the jindo.FileUploader component.

### Methods

- **getFileSelect**
  - **Description**: Retrieves the File Select element.
  - **Return Value**: HTMLElement

- **getFormElement**
  - **Description**: Retrieves the Form element associated with the File Select.
  - **Return Value**: HTMLElement

- **reset**
  - **Description**: Resets the selected file values in the File Select.
  - **Return Value**: None

- **upload**
  - **Description**: Performs the upload using an IFRAME.
  - **Return Value**: None
```

--------------------------------

### SmartEditor2Skin.html에서 UI 마크업 삭제

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/remove.html

사용하지 않는 기능의 버튼과 레이어 마크업을 HTML 파일에서 제거합니다.

```html
<li class="husky_seditor_ui_quote">
    <button type="button" title="인용구" class="se2_blockquote"><span>인용구</span></button>
    <!-- 인용구 -->
    <div class="se2_layer husky_seditor_blockquote_layer" …>
        …
    </div>
    <!-- //인용구 -->
</li>
```

--------------------------------

### Define a Husky Plugin Class

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing

Use the nhn.husky namespace when defining a new plugin class with jindo.$Class.

```javascript
nhn.husky.SE2_TimeStamper = jindo.$Class({
  ...
});
```

--------------------------------

### Integrate Button into SmartEditor2Skin.html

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/plugins/01.html

Insert the new button markup into the appropriate ul element within the husky_seditor_text_tool container in SmartEditor2Skin.html.

```html
<div class="se2_text_tool husky_seditor_text_tool">
  <ul class="se2_font_type">
  … 이 부분에는 버튼을 추가하지 않는다 …
  </ul>
  <ul>
    … 생략 …
    <li class="husky_seditor_ui_findAndReplace">
    … 생략 …
    </li>
  </ul>
  <!--  새로운 버튼 추가 -->
  <ul>
    <li class="husky_seditor_ui_TimeStamper">
      <!-- 버튼 -->
      <button type="button" title="현재 시간 삽입"  class="se2_clock"><span class="_buttonRound">시간</span></button>
      <!-- 레이어 -->
      <div class="se2_layer husky_seditor_TimeStamper_layer"
         >
        <div>
          <input type="button" value="Insert Date" class="se_button_time">
        </div>
      </div>
    </li>
  </ul>
  <!--  //새로운 버튼 추가 -->
  … 생략 …
</div>
```

--------------------------------

### Register Plugin in SE2BasicCreator.js

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/plugins/02.html

Register the plugin instance within the SE2BasicCreator.js file, typically at the end of the file.

```javascript
oEditor.registerPlugin(new nhn.husky.SE_TimeStamper(elAppContainer));
```

--------------------------------

### Define Toolbar Button with Layer

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/plugins/01.html

Include a hidden div with the se2_layer class after the button element to display a layer upon interaction.

```html
<li class="husky_seditor_ui_TimeStamper">
  <!-- 버튼 -->
  <button type="button" title="현재 시간 삽입"  class="se2_clock"><span class="_buttonRound">시간</span></button>
  <!-- 레이어 -->
  <div class="se2_layer husky_seditor_TimeStamper_layer"
     >
    <div>
      <input type="button" value="Insert Date" class="se_button_time">
    </div>
  </div>
</li>
```

--------------------------------

### Handle Success Event

Source: https://naver.github.io/smarteditor2/user_guide/5_fileuploader/events.html

Attaches a listener to the success event to handle successful file uploads.

```javascript
oComponent.attach("success", function(oCustomEvent) { ... });
```

--------------------------------

### Add textarea for editor

Source: https://naver.github.io/smarteditor2/user_guide/2_install/setting.html

Define the textarea element where the editor will be initialized. The editor content is synchronized with this element's value.

```html
<textarea name="ir1" id="ir1" rows="10" cols="100">에디터에 기본으로 삽입할 글(수정 모드)이 없다면 이 value 값을 지정하지 않으시면 됩니다.</textarea>
```

--------------------------------

### Add Plugin Script to SmartEditor2Skin.htm

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/plugins/02.html

Include the JavaScript file path for the plugin in the skin file, preferably below the smarteditor2.js declaration.

```html
<script type="text/javascript" src="js/hp_SE_TimeStamper.js" charset="utf-8"> </script>
```

--------------------------------

### Define Toolbar Button CSS

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/plugins/01.html

Add the background image definition for the new toolbar button to the smart_editor2.css file.

```css
#smart_editor2 .se2_text_tool .se2_clock { background:url("../img/clock.png") no-repeat };
```

--------------------------------

### Configure file_uploader.php for Photo Upload

Source: https://naver.github.io/smarteditor2/user_guide/4_photouploader/install/03.html

Modify the file_uploader.php file to correctly set the upload URL and filename for SmartEditor2. Ensure the sFileURL path matches your server's upload directory.

```php
$url .= "&bNewLine=true";
$url .= "&sFileName=".urlencode(urlencode($name));
$url .= "&sFileURL=/smarteditor/demo/upload/".urlencode(urlencode($name));

```

--------------------------------

### Include Plugin Script in SmartEditor2Skin.html

Source: https://naver.github.io/smarteditor2/user_guide/4_photouploader/install/01.html

Declare the plugin JavaScript file in the editor skin HTML file.

```html
<script type="text/javascript" src="./quick_photo_uploader/plugin/hp_SE2M_AttachQuickPhoto.js" charset="utf-8"> </script>
```

--------------------------------

### Handle Browser Events with EVENT_ Prefix

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/plugins/03.html

Name handlers for direct browser events by prefixing them with EVENT_. This convention helps distinguish event handlers from other message handlers.

```javascript
$ON_EVENT_EDITING_AREA_KEYUP
```

--------------------------------

### Notify on Events with MSG_ Prefix

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/plugins/03.html

Use the MSG_ prefix for handlers that are notified of specific events rather than performing a mandatory task. This is useful for decoupling components and reacting to editor states.

```javascript
$ON_MSG_EDITOR_READY
```

--------------------------------

### jindo.FileUploader Custom Events

Source: https://naver.github.io/smarteditor2/user_guide/5_fileuploader/events.html

This section describes the custom events provided by jindo.FileUploader, which are triggered during file selection and upload processes.

```APIDOC
## Custom Events

### sUploadURL

**Description**: Triggered when file selection is complete.

**Properties**:
- **sType** (String) - The name of the custom event.
- **sValue** (String) - The value of the selected file input.
- **bAllowed** (Boolean) - Indicates if the selected file format is allowed. If false, a warning message specified in `sMsgNotAllowedExt` is displayed.
- **sMsgNotAllowedExt** (String) - The warning message to display when the selected file format is not allowed.
- **stop** (Function) - If called, stops all further processing, regardless of the `bAllowed` value.

### onload

**Description**: Indicates that the upload was successful.

**Usage Example**:
```javascript
oComponent.attach("success", function(oCustomEvent) { ... });
```

**Properties**:
- **sType** (String) - The name of the custom event.
- **htResult** (HashTable) - The result object returned by the server. This can be configured dynamically based on server settings.

### onerror

**Description**: Indicates that the upload failed.

**Usage Example**:
```javascript
oComponent.attach("error", function(oCustomEvent) { ... });
```

**Properties**:
- **sType** (String) - The name of the custom event.
- **htResult** (HashTable) - The result object returned by the server. When an error occurs, this must include an `errstr` property containing the error message string.
```

--------------------------------

### Insert Current Date with PASTE_NOW_DATE Handler

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/plugins/03.html

Create the PASTE_NOW_DATE handler to insert the current date into the editor's content. This handler utilizes the PASTE_HTML editor command.

```javascript
$ON_PASTE_NOW_DATE : function(){
 this.oApp.exec("PASTE_HTML", [new Date()]);
}
```

--------------------------------

### Add or change class handlers

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/override.html

Use this pattern to define or override specific event handlers within a class.

```javascript
nhn.husky.SE2M_AttachFile.prototype.$ON_ATTACHFILE_OPEN_WINDOW = function () {
    var url = …;
    …
    window.open(url, …);
};
```

--------------------------------

### SmartEditor2 툴바 버튼 제거 전후 비교

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/buttons.html

링크 버튼을 제거하기 전의 HTML 구조와 제거 후의 변경된 구조를 보여줍니다.

```html
<ul>
  <!-- 링크 버튼 -->
  <li class="husky_seditor_ui_hyperlink">
    <button type="button" title="링크" class="se2_url">
      <span class="_buttonRound">링크</span></button>
    <!-- 링크 -->
    <div class="se2_layer">
      <div class="se2_in_layer">
        <div class="se2_url2">
          <input type="text" class="input_ty1" value="http://">
          <button type="button" class="se2_apply">
            <span>적용</span></button>
          <button type="button" class="se2_cancel">
            <span>취소</span></button>
        </div>
      </div>
    </div>
    <!-- //링크 -->
  </li>
  <!-- 특수 기호 버튼 -->
  <li class="husky_seditor_ui_sCharacter">
    <button type="button" title="특수기호" class="se2_character">
      <span class="_buttonRound">특수기호</span></button>
    <!-- 특수 기호 -->
```

```html
<ul>
  <!-- 특수 기호 버튼 -->
  <li class="husky_seditor_ui_sCharacter">
    <button type="button" title="특수기호" class="se2_character">
      <span class="_buttonRound">특수기호</span></button>
    <!-- 특수 기호 -->
```

--------------------------------

### Textarea for Editor Placement

Source: https://naver.github.io/smarteditor2/user_guide/2_install/upgrade.html

Ensure a textarea element exists at the location where the editor will be added in write_se2.html.

```html
<textarea name="ir1" id="ir1" rows="10" cols="100"></textarea>
```

--------------------------------

### Add Photo Button to Toolbar

Source: https://naver.github.io/smarteditor2/user_guide/4_photouploader/install/02.html

Insert this markup into the HTML file containing the editor to enable the photo attachment feature. Ensure the CSS and images are from SmartEditor 2.0 or higher.

```html
<div class="se2_tool" id="se2_tool">
  <div class="se2_text_tool husky_seditor_text_tool">
    //  (생략)
    //</div> 태그가 연속으로 2번 나오기 전에 아래 내용을 추가한다.
    <ul class="se2_multy">
      <li class="se2_mn husky_seditor_ui_photo_attach">
        <button type="button" class="se2_photo ico_btn">
          <span class="se2_icon"></span><span class="se2_mntxt">사진<span class="se2_new"></span></span>
        </button>
      </li>
    </ul>
  </div>
</div>
```

--------------------------------

### Submit editor content

Source: https://naver.github.io/smarteditor2/user_guide/2_install/setting.html

Use the UPDATE_CONTENTS_FIELD command to sync editor content to the textarea before form submission.

```javascript
// ‘저장’ 버튼을 누르는 등 저장을 위한 액션을 했을 때 submitContents가 호출된다고 가정한다.
function submitContents(elClickedObj) {
 // 에디터의 내용이 textarea에 적용된다.
 oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);

 // 에디터의 내용에 대한 값 검증은 이곳에서
 // document.getElementById("ir1").value를 이용해서 처리한다.

 try {
     elClickedObj.form.submit();
 } catch(e) {}
```

--------------------------------

### Register a Unique Plugin Name

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing

Assign a unique name property within the plugin class definition to prevent conflicts.

```javascript
nhn.husky.SE2_TimeStamper = jindo.$Class({
        name : 'SE2_TimeStamper',
     …
});
```

--------------------------------

### Handle Error Event

Source: https://naver.github.io/smarteditor2/user_guide/5_fileuploader/events.html

Attaches a listener to the error event to handle failed file uploads.

```javascript
oComponent.attach("error", function(oCustomEvent) { ... });
```

--------------------------------

### Toggle Toolbar Layer with SE_TOGGLE_TIMESTAMPER_LAYER

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/plugins/03.html

Implement the SE_TOGGLE_TIMESTAMPER_LAYER handler to toggle the visibility of a toolbar's active layer. This handler is typically called when a toolbar button is clicked.

```javascript
$ON_SE_TOGGLE_TIMESTAMPER_LAYER : function(){
    this.oApp.exec("TOGGLE_TOOLBAR_ACTIVE_LAYER", [this.oDropdownLayer]);
}
```

--------------------------------

### Define Toolbar Button HTML Structure

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/buttons.html

The basic HTML structure for a toolbar button, which is contained within a list item inside an unordered list.

```html
<ul>
    <li><button type="button"><span class="_buttonRound">버튼이름</span></button></li>
</ul>
```

--------------------------------

### Modifying Base Class Functions

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/override.html

Guidelines for extending or overriding existing class functionality in SmartEditor 2.

```APIDOC
## Modifying Base Class Functions

### Description
This section explains how to use the prototype pattern to add, change, or remove functions and handlers in SmartEditor 2 classes.

### Markup Modification
To modify HTML element assignment when markup changes:
```javascript
nhn.husky.SE_TimeStamper.prototype._assignHTMLElements = function () {
    this.elInputButton = …
    this.elInputButton2 = …
};
```

### Handler Addition/Modification
To add or change a handler for a specific class:
```javascript
nhn.husky.SE2M_AttachFile.prototype.$ON_ATTACHFILE_OPEN_WINDOW = function () {
    var url = …;
    …
    window.open(url, …);
};
```

### Handler Removal
To disable a specific class handler:
```javascript
nhn.husky.SE2M_AttachFile.prototype.$ON_SET_ATTACH_FILE = function () {};
```
```

--------------------------------

### Modify HTML element assignments

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/override.html

Use this pattern when markup changes require updating the initialization of HTML elements within a class.

```javascript
nhn.husky.SE_TimeStamper.prototype._assignHTMLElements = function () {
    this.elInputButton = …
    this.elInputButton2 = …
};
```

--------------------------------

### Define Toolbar Button HTML

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/plugins/01.html

Define the button markup following the required li > button > span structure. Version 2.2.1 and later require the _buttonRound class on the span element.

```html
<li class="husky_seditor_ui_TimeStamper">
    <!-- 버튼 -->
    <button type="button" title="현재 시간 삽입" class="se2_clock"><span>시간</span></button>
</li>
```

```html
<li class="husky_seditor_ui_TimeStamper">
    <!-- 버튼 -->
    <button type="button" title="현재 시간 삽입"  class="se2_clock"><span class="_buttonRound">시간</span></button>
</li>
```

--------------------------------

### Remove CSS Link in write_se2.html

Source: https://naver.github.io/smarteditor2/user_guide/2_install/upgrade.html

Remove the default CSS link from the write_se2.html file.

```html
<link href="css/default.css" rel="stylesheet" type="text/css" />
```

--------------------------------

### Update Content Field for Saving

Source: https://naver.github.io/smarteditor2/user_guide/2_install/upgrade.html

Change the parameter from UPDATE_IR_FIELD to UPDATE_CONTENTS_FIELD when updating the textarea with editor content for saving.

```javascript
oEditors[0].exec("UPDATE_CONTENTS_FIELD", []);   // 에디터의 내용이 textarea에 적용된다.

// document.getElementById("ir1").value 값을 이용해서 에디터에 입력된 내용을 검증한다.
try{
 // 이 라인은 현재 사용 중인 폼에 따라 달라질 수 있다.
 elClicked.form.submit()
}catch(e){}
```

--------------------------------

### Remove class handlers

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/override.html

Use this pattern to disable an existing handler by assigning an empty function.

```javascript
nhn.husky.SE2M_AttachFile.prototype.$ON_SET_ATTACH_FILE = function () {};
```

--------------------------------

### Register Browser Event for Button Click

Source: https://naver.github.io/smarteditor2/user_guide/3_customizing/plugins/03.html

Register a browser event, such as a click, on an HTML input button. This associates the button's interaction with a specific handler function within the plugin.

```javascript
this.oApp.registerBrowserEvent(this.oInputButton, 'click','PASTE_NOW_DATE');
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.