AshHtmlEditor(extends AshEventDispatcher)

• CREATION DATE |   2009.01.05

• LAST MODIFY |   2009.01.22

• VERSION |   0.7

• Description

- 본클래스는 AshAPI 라이브러리를 필요로한다.
- 기본적인 Html Wysiwyg editing 처리를 좀더 편하게 수행하도록 고안된 클래스이다.
- 인스턴스생성시에 Iframe 생성을 위한 textArea 객체를 필요로 한다.
- contentEditable를 위해 div 가 아닌 iframe을 사용한 이유는 Cross-Browsing 구현에는 문제가 없으나 firefox와 opera에서는 div를
  이용할시에는 포커싱에 대한 가독성이 용이하지 않으며 시각적인 사용성 부분에서 만족스럽지 못하다.
   물론 에디터 본연의 표현에 대한 기술적인 제약사항은 없다.

- JS를 이용한 wysiwyg-editor구현에 iframe과 textarea가 콤비로 사용되는 이유는 두가지
  모두 브라우져별 시각적인 애로점에서 좀더 자유롭다는것이다.
  물론 구현은 div의 contentEditable이 더 수월하다.(사실 document.designMode를 이용한 방법은 브라우져별로 구현상의 까다로움이 존재한다.)
  그럼에도 iframe이 사용되는 이유는 거듭말하지만, 사용자 입장에선 깔끔하게 떨어지는 시각적인 형태때문이다.
  div는 포커싱박스가 브라우져별로 등장하는 문제가 발생되기때문이다.
  또 textarea가 기본으로 사용되는 이유는 textarea는 HTML태그에 유일하게 자유로운 엘리먼트이다.
  물론 input text도 있겠지만 멀티라인이 지원되지 않기에.. 만약 div를 이용하여 innerText로 그것을 흉내낸다고 했을때 이때 div는 필연적으로 
  contentEditable 옵션을 주어야 한다. 그래야 사용자가 타이핑을 할수 있으므로 그런데 이때 사용자가 웹사이트에 이미지를 드래그복사하여 붙여넣기 해버리면
  코드에서는 innerText로 받아서 사용자가 직접 타이핑한부분은 어떻게 해결한다고 하지만 클립보드에 복사한후 붙여넣기 한 녀석까진 컨트롤이 불가능하다.
  그때는 html코드로 변환이 되어버린다.contentEditable 자체가 위지윅이기때문에.. 또 본클래스에서 필수 인자로 textarea를 먼저 받는 이유는 동적으로 클래스
  안에서 만약 textarea를 생성하게 되면 파이어폭스에서는 iframe과 같이 두개를 동적으로 생성했을때 해당 페이지가 onload된 이후에 생성된 textarea는
  display:none으로 객체를 숨길경우 노드에서 사라짐으로 인해 브라우져에서는 계속적인 데이터요구(데이터를 받는 형태) 를 취하게된다.(모래시계현상)
  현재 이같은 버그성 문제는 파이어폭스에서만 발견되었다.
  조합도 textarea+iframe일경우이다. 즉 페이지가 로드완료된후 createElement로 생성되는 것에 한해... 따라서 현존하는 보통의 에디터생성에서는 어쩔수 없이
  페이지가 로드되기전에 이미 기본적으로 textarea가 body에 기본적으로 임베딩된 것을 선호할수 밖에 없는듯 하다.

- 모셔닝처리가 기본으로 내장되어 있다.
- IE 같은경우 디폴트가 enter키일경우 <p>단락, shift+enter 일경우 <br>인데 불편하여 이것을 역으로 바꿨다. enter키일경우 <br> shift+enter일경우 <p> 단락이다.

• ClassType

• Inherited Public Properties

• Inherited Public Methods

• Costants

AshHtmlEditor.LOADED = 'loaded'; // when AshHtmlEditor was ready (iframe is onload).
에디터가 준비상태일때,즉 iframe이 로드되었을때 이벤트가 발생한다.
이 이벤트를 이용하여 스탠바이 상태를 체크할 수 있다.

AshHtmlEditor.SELECTION = 'selection'; // when any element was selected on the editor's document (is created selection's range)
에디터에서 사용자가 영역을 선택했을때 이벤트가 발생한다.
이 이벤트를 이용하여 좀더 커스터마이징이 가능한 확장개발에 도움을 받을 수 있다.

• Static Properties

-

• Static Methods

AshHtmlEditor.configToolButtons(toolbar, disableClassName) // Config the toolbar's toolbutton
* parameter |
toolbar:div-container // toolbar 버튼들이 정의된 div 컨테이너
disableClassName: // style-sheet className (disable 되었을때 동작이 되지않도록 처리된 CSS className)
*
* return |
reconstruct가 완료된 toolbar의 toolbuttons 들이 저장된 배열을 반환.
*
* description |
본 메소드는 AshHtmlEditor를 이용하여 toolbar buttons을 구성하는데 좀더 효율적인방법들을 처리하도록 그 방법을 제공하고있다.
본메소드 실행후 변화되는 사항들은 툴바내에 존재하는 버튼들은 이벤트 구성을 새로이 가지며, enable / disable 처리와 관련된 기능을
추가적으로 가지며 disable가 되었을때 선택되지 않도록 처리하는 기능을 가진다.
더불어 toolbar 버튼 처리에 필요한 기본적인 사항들은 DIV / SPAN / A 태그로 만들어진 childNodes 들 중에서만 적용이 가능하며
img 태그를 자식요소로 가지고 있는 시각적인 버튼 아이콘들에 한해서 이다.
또 본메소드를 거치게 되면 toolbar 버튼들은 setEnable 메소드를 가지게된다. setEnable(false)이면 비활성화,setEnable(true)이면 활성화상태이다.

• On Event Handler

onLoaded:null  // when AshHtmlEditor was ready (iframe is onload).
onSelection:null  // when any element was selected on the editor's document (is created selection's range)

• Public Properties

(readOnly)
textArea:null  // the textarea element.
textArea 엘리먼트를 참조한다.

docAgent:AshEventDispatcher = null // the document's agent Event.
document의 기본이벤트를 조작하는 에이젼트 이벤트를 참조한다.

loaded:Boolean = false  // the content is loaded.
컨텐츠페이지가 로드되었는지 여부를 확인한다.

isWysi:true  // current editor mode is wysiwyg.
현재 위지윅상태 모드인지 편집모드인지 확인한다.

range:null  // the current selection's range object.
현재 선택영역의 셀렉션객체를 참조한다.

rangeText:''  // the current range's text.
현재 선택영역의 텍스트 값을 참조한다.

rangeHtmlText:'' // the current range's htmlText.
현재 선택영역의 htmlText 값을 참조한다.

rangeStyle:''  // range is DOM's standard style. or Internet Explorer style.
range 객체가 ie전용인지 dom용인지를 문자열로 확인한다. DOM / IE를 반환

• Public Methods

available() // get the available situation of the editor. (enable).
에디터가 사용가능상태인지 확인한다.(true이면 사용가능)

redraw() // redraw the editor's component.(update the all editor status.)
이 메소드의 목적은 변경된 에디터의 상황을 다시 갱신하고자 할때 활용된다.
기본 drawlist에 포함된 모든 사항들을 갱신한다.

resize(w,h) // resize the editor area.
Resize the editor body area.(actually, resize the textarea)
* description |
이 메소드호출로 런타임상에서 textarea의 크기를 변경할수 있다. 이것은 실제 editor의 바디영역의 변경이다.
주활용 목적은 런타임상의 변경도 주요하지만 실제 textarea의 크기는 부모 컨테이너(ex.div)의 영역과 정확하게 매칭이 되지 않는다.
이럴경우 그것을 매칭하기 위해서 초기 인스턴스 생성시점에 활용 될수도 있다.
ex)
 var editor = new AshHtmlEditor(mytextArea);
 editor.resize(294,293); //  ie기준으로 실제 컨테이너로 사용된 div 크기가 300px, 300px라고 할때
본 메소드를 활용하여 정확한 픽섹을 맞추고 있다.

resizeContainer(w,h, autoFix) // resize the editor's container.
Resize the editor's container
* description |
이것은 editor의 container 사이즈를 재조정한다. autoFix 옵션은 위의 resize시에 textArea가 가지는 정확한 픽스가 되지 않는 브라우져별 문제를 정확하게
픽스시켜 container의 사이즈에 맞게 editor의 body사이즈(textArea, iframe)를 꼭맞추고자 할때 사용될 수 있다.
따라서 이것은 결국 위의 resize메소드와 어떻게 보면 대칭되는 역할을 수행한다고 볼수 있다.
하지만 이메소드는 결국 editor로 사용되는 textArea와 iframe의 가상의 부모컨테이너를 사이즈조정을 위해 임의로 차용했을때 효과가 있으며 그냥 사이즈픽스와
관계없는 단지 컨테이너 역할만 수행하는 경우에는 단순한 사이즈조정에 지나지 않을수 있다. 따라서 이 메소드의 사용은 정확하게 사이즈 조정이 되지 않고
삐져나오는 textArea를 강제로 맞추기위해 임의의 컨테이너(div)를 부모노드로 두고 부모노드의 조정을 통해 실제 editor의 body사이즈를 쉽게 조정해보자는
의도가 있을때 현실적으로 사용될수 있다.

reboundContainer(x,y,w,h, autoFix) // rebound the editor's container.
Rebound the editor's container
* description |
위의 resizeContainer와 같은 역할이며 단지 position이 추가되었다.

visible(value) // set visible the editor.
에디터의 visible을 셋팅한다.

show() // show the editor.
숨겨진 에디터를 나타낸다.

hide() // hide the editor.
에디터를 숨긴다.

setStyle(prop, value)  // set the html style to the editor.
Change the body's style.
에디터의 body스타일을 변경한다.

setCSSText(value) // set the cssText to the body in directly.
body에 직접 css 스타일을 셋팅할 수 있다. 형식은 inline-style 형식이어야 한다.
ex( 'font-family:Arial; color:#FFFFFF;')

setHtmlValue(value) // set the html value to the editor.
에디터에 html값을 직접 적용한다.

getHtmlValue() // get the html value of the editor.
현재 적용된 에디터의 html값을 가져온다.

setBorderOutLinerColor(color) // set the border's out line color of the editor.
에디터의 외곽아웃라인 컬러를 적용한다.

wysiwygMode(value) // set the edit type as wysiwyg style or user edit style.
에디터의 위지윅모드와 편집모드를 실행한다.

command(command, userInterface, value) // the standard wysiwyg command that produce to the browser.
브라우져에서 제공하는 기본 내장된 command를 실행한다.

customCommand(insertNode) // the custom command that has been maked specially this editor.
커스텀 커멘트를 실행한다. 즉 inserNode에 적용된 element를 현재 선택된 selection 개체에 적용한다.

setSelection(range, clearMode) // set the selection to the editor.
에디터에 주어진 range값으로 선택영역을 지정한다.

clearSelection() // clear the selection.
선택영역을 해제한다.

updateRange() // update the range.
선택영역을 range 요소로 업데이트 한다.

getRange() // get the range object.
현재 선택된 영역의 range 개체를 구한다.

getRangeParentNode() // get the range's parentNode.
현재 선택영역의 부모요소를 구한다.

getRangeHtmlText() // get he range's htmlText.
현재 선택영역의 html텍스트 값을 구한다.

getRangeText() // get the range text.
현재 선택영역의 텍스트 값을 구한다.

makeRichStyle(styleType, value) // make the richstyle.
리치 스타일을 직접 만들어서 적용한다.


(default command methods)
font(value)
폰트를 교체한다.

bold(value)
볼드체를 적용한다.

italic()
이탤릭을 적용한다.

underline()
언드라인을 적용한다.

strikeThrough()
스트라이크뜨루를 적용한다.

foreColor(value)
텍스트컬러를 적용한다.

backColor(value)
텍스트 배경컬러를 적용한다.

justifyLeft()
왼쪽정렬을 감행한다.

justifyCenter()
중앙정렬을 적용한다.

justifyRight()
오른쪽정렬을 시행한다.

justifyFull()
균등정렬을 셋팅한다.

outdent()
들여쓰기를 시행한다.

indent()
내어쓰기를 시행한다.

insertOrderedList()
순서있는 목록으로 리스트를 만든다.

insertUnorderedList()
순서없는 목록으로 리스트를 만든다.

insertHorizontalRule()
한줄 가로줄을 삽입한다.

undo()
한단계 취소한다.

redo()
한단계 복원한다.

selectAll()
모든영역을 선택한다.

cut()
선택요소를 잘라낸다.

copy()
선택영역을 복사한다.

paste()
선택영역에 붙여넣기를 시행한다.

(the custom command methods)
letterSpacing(value)
픽셀단위의 자간 간격을 적용한다.

lineHeight(value)
픽셀단위의 줄간격을 적용한다.

fontSize(value)
픽셀단위의 폰트사이즈를 적용한다.

createLink(value, target) // Create the hyperlink.
* parameters |
value:String // the href url.
(optional) target:String ('_blank' :새창, '_self' : 현재창, '_top': 최상위창, '_parent': 부모창)
* description |
execCommand('createLink', userInterface, value)  userInterface true 옵션은 IE에서만 지원되기때문에 false로 하고 url입력 화면 부분은 개발자가 직접구현해야한다.

insertCharater(value)
선택영역에 지정된 특수문자를 삽입한다.

insertImage(src)
선택영역에 src 주소의 이미지를 삽입한다.

setCustomClass(tagName, className) // Register Custom Class.(style-sheet)
* parameters |
tagName:String // the tagName of html element.
className:String // the custom class name that has been maked by user.
* description |
이 메소드를 이용해서 커스텀 클래스네이밍을 추가할수 있다. tagName은 div,span,pre...등의 태그네이밍을 등록하며 className은 style로 선언한
클래스네이밍을 지정할수 있다. 이것으로 런타임에 지정된 selection의 스타일을 한꺼번에 변경할 수 있다.

• Constructor

• Example

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src='../AshAPI.js'></script>
<script type="text/javascript" src='../AshHtmlEditor.js'></script>
<script type="text/javascript">
 var editor;
 function init()
 {
  editor = new AshHtmlEditor(document.getElementById('ppp'), 'AshDrag.html');
  //editor = new AshHtmlEditor(document.getElementById('ppp'));
  editor.resize(294,293);

  editor.addEventListener('loaded',function(e){
   alert(e+"sfsfdsf");
  });
 }
</script>
</head>

<body onload='init();'>
 <input type='checkbox' checked='true' onclick='editor.wysiwygMode(this.checked);'>html
 <div style='position:relative; left:200px; top:0px; width:300px; height:300px; '>
  <textarea id='ppp' style='width:300px; height:300px; '>아이러뷰</textarea>
 </div>
</body>