이번에는 XQuared API를 조금 살펴봤습니다. API 문서화를 매우 잘 해두었기 때문에, API만 보는 것으로도 많은 도움을 받을 수 있습니다.

var xed;

    window.onload = function() {
        xed = new xq.Editor($(“xqEditor”));
        xed.setEditMode(‘wysiwyg’);
        xed.loadStylesheet(“css/xq_contents.css”);
        xed.focus();
    }

위의 코드가 XQuared 11월 8일 배포판에 포함되어 있던 코드 입니다.

가장 중점적으로 살펴보아야 할 API는 Editor.js입니다. 이 곳에 위에서 사용한 모든 메소드들이 들어있습니다.

xed = new xq.Editor($(“xqEditor”));

생성자를 사용했네요. 인자로 넘겨준 값은 다음과 같이 설명되어 있습니다.

HTML element(TEXTAREA or normal block element such as DIV) to be replaced with editable area.

Textarea 엘리먼트나 div와 같은 블럭 엘리먼트의 이름을 넘겨준다고 친절하게 설명되어 있습니다.

실제 위의 예제는 TextArea에서 다음과 같이 정의하고 있습니다.
<textarea name=”contents” id=”xqEditor”></textarea>

이렇게 하면 이 TextArea는 XQuared 에디터가 자리잡게 됩니다.

xed.setEditMode(‘wysiwyg’);

에디트모드는 세 종류가 있습니다. HTML 소스, 편집모드, 참조모드.
HTML 소스편집 모드로 보려면 인자로 source.
편집모드는 위와 같이 wysisyg.
참조모드는 readonly. 입니다.

나머지 두 줄은 별다른 설명이 필요 없을 것 같습니다.
메소드 작명도 잘 해두신 것 같습니다.