일반적인 상태에서는 Tab키를 누르면 포커스를 잃기 때문에 공백을 넣기 위해 Tab키를 사용할 수 가 없음을 잘 알것이다.
RichTextEditor 에서 Tab키를 이용하기 위해 우선 TextArea에서 Tab키를 이용하는 소스를 이용해보았다.
일단 원리는 다음과 같다.
변수 A : 탭키가 눌려진 케럿(caret)의 위치
변수 B : TextArea에서 Tab키가 눌린 것이라면 1, 아니면 0을 기록하는 flag
이벤트는 두가지가 필요하다.
이벤트 1 : TextArea에서 KeyDown
이벤트 2 : TextArea의 Focus out
TextArea에서 글을 작성 => 이벤트 1에 해당하나 TabKey가 아니면 넘어감
TextArea에서 Tab키 누름 => 이벤트 1에서 TabKey 이므로 변수 A를 얻고, 변수 B를 1로 체크
Tab키가 눌렸으므로 TextArea는 focus를 잃고 이벤트 2를 발생시킴
만약 TextArea에서 글을 작성하다가 마우스로 다른 객체를 누르면 역시 이벤트 2가 발생
이 두가지를 구분하는 것이 변수 B
이벤트2 발생 + 변수 B가 1일 경우에만
1. TextArea의 변수 A 위치에 공백을 넣고
2. 다시 TextArea에 Focus in 시키면서
3. 커서의 위치를 변수 A + 공백의 크기로 정해주고
4. 변수 B를 0으로 만들어 준다.
원본 예제는 http://launchcms.com/blog/?p=196 에서 가져왔다.
ID of the TextArea is txtContent.
First, we have the Event Listeners:
// Every time a key is pressed while the TextArea is in focus, this will fire off the "contentInsertTab" function this.txtContent.addEventListener(KeyboardEvent.KEY_DOWN, contentInsertTab); // This event listener will fire off the "tabReturnFocus" function when the TextArea loses focus. this.txtContent.addEventListener(FocusEvent.FOCUS_OUT,tabReturnFocus);
Our class variable is a boolean which will be set to true when the tab key is pressed and then back to false when the TextArea loses focus:
private var boolTabPressed : Boolean = new Boolean(false);
Our first function is called when our first event listener detects a key being pressed. They keycode for TAB is “9″ so we have an if statement making sure that was the key being pressed.
private function contentInsertTab( event:KeyboardEvent ) : void
{
if ( event.keyCode == 9 )
{
// setting our "tab pressed" variable to true.
// this will be used later.
this.boolTabPressed = true;
// Saving the current cursor position.
var intCursorLocation : int = this.txtContent.selectionBeginIndex;
// Breaking the text in half where the cursor sits in the text area.
// We have firsthalf and secondhalf
var strFirstHalf : String = this.txtContent.text.substr(0, intCursorLocation);
var strSecondHalf : String = this.txtContent.text.substr(intCursorLocation, this.txtContent.text.length);
// Setting the textarea txtContent to the new content with a tab inserted
this.txtContent.text = strFirstHalf + " " + strSecondHalf;
// Setting the cursor to the position on
// the opposite side of the new tab we inserted.
this.txtContent.setSelection(
(intCursorLocation + 1),
(intCursorLocation + 1));
}
}
Our second function is called when our second event listener detects that the TextArea has lost focus. It will cancel the new focus event, then set the focus back to the TextArea. It will ONLY do this if the previous function has set boolTabPressed to true. After this, we will set boolTabPressed back to false. If we don’t check the boolTabPressed status first, the event handler will keep us from ever removing our focus from the TextArea
private function tabReturnFocus( event:FocusEvent ) : void
{
// making sure a tab key has been pressed
if ( this.boolTabPressed == true )
{
// Cancelling the change focus event
event.preventDefault();
// setting the focus back on the TextArea
this.txtContent.setFocus();
// setting this to false so we can leave the text area normally.this.boolTabPressed = false;
}
}
그러나 RichTextEditor의 경우는 약간 상황이 다름을 확인 할 수 있었다.
이유인 즉슨 RichTextEditor에 있는 Font를 설정하는 Combo박스 때문인데,
여기에서도 여러 방법이 있을 수 있다고 생각되는데
1. Combo박스에 포커스가 들어오면 포커스를 버린다.
2. Combo박스의 enable을 false로 설정한다.
1번의 경우는 시도하다가 실패해서
2번의 경우로 만들었다.
private function richEMREditorInit():void
{
this.m_richEMREditor.addEventListener(KeyboardEvent.KEY_DOWN, contentInsertTab);
// This event listener will fire off the "tabReturnFocus" function when the TextArea loses focus.
this.m_richEMREditor.addEventListener(FocusEvent.FOCUS_OUT,tabReturnFocus);
this.m_richEMREditor.fontFamilyCombo.editable = false;
var fontArray:Array = ["굴림","돋움"];
this.m_richEMREditor.fontFamilyArray = fontArray;
this.m_richEMREditor.toolbar.removeChild(m_richEMREditor.linkTextInput);
this.m_richEMREditor.toolbar.removeChild(m_richEMREditor.fontSizeCombo);
this.m_richEMREditor.toolbar.removeChild(m_richEMREditor.fontFamilyCombo);
m_richEMREditor.textArea.setStyle("fontSize","14");
}
이 함수를 <mx:RichTextEditor에 creationComplete=”richEMREditorInit()” 라고 넣어줌으로서 종료.
