3. 웹에디터로 배우는 자바스크립트 객체지향 프로그래밍 - 에디터

다음 내용을 읽기 전에 웹 에디터와 관련된

몇 가지 용어에 대해서 이해해야 한다.

편집 기능을 제공하는 버튼,

버튼들을 배치하는 툴바, 

실제 문서를 편집하는 에디터에 대해서 알고 있어야 한다 (그림 참조).

NicEdit의 에디터 기능과 관련된 클래스 구조만

다음 그림과 같이 정리했다.

NicEdit는 에디터 하나를 의미하는 클래스 nicEditor와

여러 개의 에디터(nicEditor)들을 관리하는 클래스인 nicEditors가 기본 클래스이다.

하나의 웹 페이지에 여러 개의 웹 에디터가 사용될 경우를 위한 클래스 이다.

nicEditors는 클래스라기 보다는 Json 구조체의 느낌이 강하고

다수의 에디터와 플러그인 관리를 주 목적으로 하고 있다.

플러그인은 확장 기능을 의미하는 것으로

nicEditors에서 Json형태로 등록(registerPlugin)해서 가지고 있다가

nicEditor의 생성자에서 실행하여 보관한다.

NicEditors 플러그인 정보 관리 외에

다수의 nicEditor 사용시 정보를 보관하고 있으면서

ID로 해당 nicEditor를 찾는 기능(findEditor) 등을 제공한다.

nicEditor는 bkClass에서 상속받아

생성자에서 옵션과 플러그인 생성 등의 기능을 시작한다.

(bkEvent에서도 상속 받았는데, 별도로 정리한다.)

nicEditor는 제공되는 데모 파일의 소스를 보면 알 수 있지만 (demo02.html)

nicEditor를 생성함(new)으로써 웹 에디터를 실행한다.

<script type="text/javascript"> bkLib.onDomLoaded(function() {     new nicEditor().panelInstance('area1');     new nicEditor({fullPanel : true}).panelInstance('area2');     new nicEditor({iconsPath : '../nicEditorIcons.gif'}).panelInstance('area3');     new nicEditor({buttonList: ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript','html','image']}).panelInstance('area4');     new nicEditor({maxHeight : 100}).panelInstance('area5'); });             </script>

하지만

nicEditor는 인스턴스(instance) 관리와 판넬(Panel) 관리를 주로 한다.

nicEditor의 판넬(nicEditorPanel)은

편집에 사용되는 버튼들을 놓는 장소(toolbar)를 의미하고,

판넬 생성(setPanel)과 삭제(removePanel) 기능이 있다.

판넬 생성시(construct) 버튼을 놓을 장소(toolbar)를 생성하고,

사용할 버튼 리스트(buttonList : 위 코드 중 4번째 new)를 확인해서

버튼들을 생성(addButton)한다.

nicEditor의 에디터 관련(문서편집) 기능은

실제로는 nicEditorInstance와 nicEditorIFrameInstance에 구현 되어 있다.

nicEditor는 웹 브라우저가 오페라이면 nicEditorIFrameInstance를 사용하고

아니면 (IE, FireFox 등) nicEditorInstance를 사용한다.

nicEditorIFrameInstance는 nicEditorInstance에서 상속 받은 클래스로

Iframe 태그를 사용하는 차이가 있다.

nicEditor는 인스턴스를 관리한다는 측면에서 nicEditors와 유사하다.

하나의 툴바에 여러 개의 편집창을 쓸 수 있다는 것으로

여기에 정리하지 않고 넘어간다(데모 4 참조).

nicEditor의 nicCommand는

실제로는 nicEditorInstance의 nicCommand를 호출하고

nicEditorInstance의 nicCommand에서는

JS의 document.execCommand를 호출하여

편집 기능을 구현하고 있다.

정리하면, 편집 영역을 관리하는 nicEditorInstance,

편집 기능을 사용자가 사용할 수 있게 하는 버튼은 nicEditorButton,

버튼이 놓이는 툴바는 nicEditorPanel,

이들을 관리하는 nicEditor로 구성된다.

nicEditorInstance에는 편집 기능 설정과 명령어 실행 외에도

웹 브라우저에서 제공하는 Selection, Range을

메서드(getSel, getRng)로 구현하였다.

이 개체는 편집기에서 현재 선택된 영역(클래스)을 의미하는 것으로

제대로 된 웹 에디터를 구현하기 위해서는 이 개념을 잘 알고 활용해야 하는데,

NicEdit에서는 많이 활용되지 않았다.

제대로 웹 에디터를 제작하려면 찾아보길 바라고 여기서는 넘어간다.

편집 기능에서 마지막으로 알아야 할 것은 nicEditorConfig이다.

nicEditorConfig는 bkClass에서 상속 받지만

Json 구조의 데이터로 보는 것이 적절하다.

nicEditorConfig는 NicEdit의 실행을 위한 환경 설정 클래스로,

buttons, iconsPath, buttonList, iconList의 변수를 가지고 있다.

var nicEditorConfig = bkClass.extend({     buttons: {         'bold': {             name: __('Click to Bold'),             command: 'Bold',             tags: ['B', 'STRONG'],             css: {                 'font-weight': 'bold'             },             key: 'b'         },         'italic': {             name: __('Click to Italic'),             command: 'Italic',             tags: ['EM', 'I'],             css: {                 'font-style': 'italic'             },             key: 'i'         },             생략 ~~

buttons는 NicEdit에서 지원되는 모든 버튼들의 정보를 가지고 있다.

그리고, 각 버튼에 대하여 고유 이름(bold, italic, underline등)을

나타내는 문자열을 키로 하여 Json형식으로

세부 정보(name, command, tags, css, key)를 가지고 있다.

세부 정보 중 name은 이름을 의미하지만,

버튼 위에 마우스가 올라오면

해당 버튼의 기능을 설명하는 툴팁 문장(예: Click to Bold)으로 활용된다.

command는 실제 명령어를 의미하고

document.execCommand에 사용할 명령어로

이 명령어에 의해 편집이 실행된다.

예: document.execCommand('bold', false, null)

이 명령어는 NicEdit에서 nicEditor의 nicCommand에 의해 실행된다.

tags는 편집된 문장에 입력 커서가 위치하면 선택된 문장에 적용된 tag에 따라

버튼을 활성/비활성 시키기 위해 사용되는 태그다.

예로, 굵게(bold)가 적용된 문장에 입력 커서가 있는 경우

bold 버튼이 눌러지고, 다른 버튼은 그대로 있게 된다.

이 기능을 구현하기 위해 현재 선택된 문장의 태그를 확인해서

태그가 B이거나 strong이면 bold 버튼이 눌러지게 만든다.

css도 같은 역할을 하는 것으로,

예전 HTML은 태그(B, STRONG)로,

최근에는 CSS('font-weight': 'bold')로 작성된다.

NicEdit는 CSS와 같이 설정은 있지만 기능은 개발되지 않았다.

글자를 굵게 만드는 bold의 경우

NicEdit는 execCommand룰 사용하기 때문에

웹 브라우저에 따라 B또는 STRONG 태그가 생긴다.

태그 인식도 이렇게 인식한다.

하지만 최근의 웹 에디터는

생성은 CSS('font-weight': 'bold')로 하고,

인식도 CSS로 한다.

key는 단축키를 의미하는 것으로 여겨지고,

구현은 되어 있지 않은 것 같다.

buttonList는 이상에서 정의된 버튼들 리스트로 웹 에디터에서 사용 여부를 나타낸다.

즉, buttonList에 이름이 나열된 버튼만 생성이 된다.

nicEditorConfig에서는 기본값들로 거의 모든 버튼 이름을 가지고 있다.

앞서의 nicEditor생성 코드(demo02.html)의 4번째 예처럼

New nicEditor({buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript','html','image']}

         ).panelInstance('area4');

nicEditor 생성시 파라메터로 사용할 버튼만 buttonList에 넣어서 전달하면 해당 버튼만 생성된다.

이러한 기법도 알아두면 좋다.

nicEditor의 생성자에서

options 변수에 nicEditorConfig가 생성되어 할당된다.

var nicEditor = bkClass.extend({       construct: function(C) {          this.options = new nicEditorConfig();    bkExtend(this.options, C);

즉, 이것은 기본값 역할을 한다.

nicEditorConfig는 4개의 메인 키(변수)를 가지는 Json 데이터이고,

options에 할당되었기 때문에 options도 동일한 값을 가지고 있게 된다.

bkExtend는 값을 복사(상속)하는 기능을 하는 것으로

파라메터 C에 4개의 메인 키가 있으면 해당 키로 값이 복사되고,

없으면 넘어가기 때문에 기존 값이 유지 된다.

앞서의 nicEditor 생성 코드를 예로 하면,

nicEditor 파라메터로 Json({}) 값이 주어진 것은 buttonList이다.

따라서, 나머지 3개의 키는 nicEditorConfig에 지정된 값이 사용되고,

버튼은 파라메터에 지정된 buttonList 의 8개 버튼만이 사용된다.

demo02.html을 실행해서 4번째 NicEdit를 보면 확인 할 수 있다.

IconsPath는 버튼에 사용되는 이미지 파일의 위치(디렉토리 경로)를 의미하는 것으로

NicEdit의 모든 버튼은 다음 그림과 같이 하나의 이미지로 저장되어 있다.

        

nicEditorIcons.gif

iconList는 이미지 파일에서 버튼별 이미지 위치를 의미한다.

예로, "bgcolor": 1 으로 지정된 것은

bgcolor 버튼이 첫번째(0부터 시작하므로 실제론 2번째) 이미지를 사용한다는 의미이다.

버튼은 HTML button 태그로 생성하는 것이 아닌

DIV에 음영을 주어서 생성하고,

배경 이미지(backgroundImage)로 IconsPath의 경로를 지정해 준 뒤

이미지 좌표(backgroundPosition)를 버튼 위치 * -18(버튼크기)로 계산해서 지정한다.

bgcolor 버튼은 1이니 1 * -18 로 계산해서

TOP은 고정이고 left 위치가 -18이 되고,

div 크기(width)가 18이니,

해당 이미지만 버튼 위에 표시되어 보이게 된다.

다음 그림과 같이 [DOM탐색기]로 보면 쉽게 알 수 있다.

많은 이미지를 네트워크를 통해 전달하고, 처리하는 것 보다

하나의 이미지를 전송하고, 메모리에 올려서 처리하는 이 방식이 흔하게 사용된다.

이 처리는 nicEditor클래스의 getIcon 메소드에 구현되어 있다.