이 문서는 Xquared에 익숙하지 않은 개발자를 위해 작성되었으며, 프로그램 설치부터 시작해서 기능을 단계적으로 추가하는 과정을 보여주는 "따라하기" 스타일의 자습서 입니다.
전체 기능에 대한 참조 문서는 문서 페이지를 참고하세요.
설치하기#
설치하기를 참고하세요.
디렉토리 내용 확인하기#
2008년 4월 이후의 Xquared 배포판은 다음 파일들을 담고 있습니다(이전 버전을 사용하고 계시다면 내려받기 페이지에서 최신 버전을 받으시기 바랍니다):
- /docs
- /examples
- /images
- /content
- /toolbar
- /javascripts
- /module
- *.js
- /stylesheets
-
xq_contents.css
xq_ui.css
- /tests
- index.html
- test.html
- README
- LICENSE
- /docs: Xquared 자바스크립트 API 문서가 들어 있습니다.
- /examples: 각종 예제가 들어 있습니다. 이 예제들을 브라우저에서 열거나 예제 페이지의 링크를 클릭하시면 Xquared를 사용해볼 수 있습니다.
-
/images: Xquared에서 사용하는 이미지 파일들이 들어 있습니다.
- /contents: Xquared 편집기 내부에서 사용되는 이미지들이 모여 있는 곳입니다.
- /toolbar: Xquared 기본 툴바에서 사용되는 이미지들이 모여 있는 곳입니다.
- /javascripts: Xquared 실행에 필요한 자바스크립트 파일들이 들어 있는 곳입니다. 이 중 modules 디랙토리에는 초기 로딩 속도를 빠르게 하기 위해 모든 자바스크립트 파일을 하나로 합쳐 놓은 파일들이 들어 있습니다. 예를 들어 Full_merged.js 는 Xquared의 모든 기능이 포함된 하나의 js 파일입니다. 동영상 삽입 등의 기능이 필요 없을 경우 최소한의 기능만을 포함하고 있는 Minimal_merged.js 를 사용하시면 됩니다. 파일 이름이 _min.js로 끝나는 파일은 스크립트 파일의 크기를 줄이기 위해 공백이나 주석 등을 제거한 파일이며, 기능은 동일합니다.
- /stylesheets: Xquared에서 사용하는 스타일시트 파일이 들어 있습니다. xq_contents.css는 편집기 내부에서 사용되는 CSS 파일이고, xq_ui.css는 툴바 등 편집기 외부에서 사용되는 파일입니다.
- /tests: JSSpec과 Selenium을 이용한 자동 테스트 모음입니다.
- index.html
- test.html: 이 파일을 브라우저에서 열면 자동 테스트가 실행됩니다.
웹 페이지에 Xquared 넣기#
우선 다음 HTML 파일을 생성 합니다:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
- <title>Xquared Demo</title>
- </head>
- <body>
- <textarea id="editor"><p>Hello from Xquared</p></textarea>
- </body>
- </html>
위 HTML 파일이 저장된 디렉터리에 다음 파일을 복사합니다:
- /images
- /javascripts
- /stylesheets
이제, HTML 파일을 수정하여 다음 자바스크립트 및 CSS를 삽입합니다:
- ...
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="stylesheets/xq_ui.css" />
- <script src="javascripts/module/Full_merged.js" type="text/javascript></script>
- <script type="text/javascript">//<![CDATA[
var xed;
window.onload = function() {
xed = new xq.Editor("editor");
xed.config.contentCssList = ["stylesheets/xq_contents.css"]; - xed.setEditMode('wysiwyg');
}
//]]></script>
<title>Xquared Demo</title> - </head>
- ...
위 코드를 간력히 분석해보겠습니다.
- xed = new xq.Editor("editor");
이 코드는 편집기 인스턴스를 생성하여 xed 라는 글로벌 변수에 대입합니다. 편집 모드로 전환할 HTML 요소는 id가 editor인 DIV 입니다. Xquared는 DIV 대신 TEXTAREA와도 연결될 수 있습니다.
- xed.config.contentCssList = ["stylesheets/xq_contents.css"];
이 코드는 편집기 내부(WYSIWYG 모드)에서 사용할 CSS를 지정하기 위해 사용됩니다.
- xed.setEditMode('wysiwyg');
이 코드가 실행되면 DIV#editor 엘리먼트가 WYSIWYG 편집모드로 전환됩니다. 실제로 해당 엘리먼트가 편집모드로 전환되는 것은 아니고, 사실은 다음과 같이 작동됩니다:
- CSS를 변경(display:none)하여 TEXTAREA#editor 를 화면에서 감춥니다.
- 편집 영역으로 사용할 IFRAME을 생성하여 TEXTAREA#editor 바로 밑에 삽입합니다.
- TEXTAREA#editor 의 내용(value)을 복사하여 편집 모드에 맞게 변환(편집기 문서 포멧 참고)한 후 IFRAME의 내부에 대입합니다.
소스 편집 모드로 전환하려면 'wysiwyg' 대신 'source'를 넣어주시면 됩니다.
편집 결과를 FORM으로 전송하기#
위와 동일한 코드를 사용하되, 아래와 같이 FORM 태그를 추가하시면 됩니다:
- <body>
<form action="your_path" method="post">
<textarea name="content" id="editor">
<p>Hello <a href="#">World</a>!</p>
</textarea>
<input type="submit" />
</form>
</body>
기능 확장#
단축키 추가하기#
Xquared는 널리 쓰이는 몇 가지 단축키를 기본으로 지원하고 있습니다. 예를 들어 Ctrl+B를 누르면 강한 강조(strong) 태그가 적용됩니다. 물론 기본 단축키를 제거하거나, 재정의하거나, 새로운 단축키를 추가할 수도 있습니다.
- xed.addShortcut("Alt+UP", "xed.handleMoveBlock(true)");
- xed.addShortcut("Alt+DOWN", "xed.handleMoveBlock(false)");
이제 Alt 키와 위/아래 방향키를 통해 현재 줄을 위/아래로 옮길 수 있습니다(Eclipse 처럼). 아, Mac에서는 Alt 보다는 Meta가 더 적절하겠죠?
- if(xq.Browser.isMac) {
- xed.addShortcut("Meta+UP", "...");
- } else {
- xed.addShortcut("Alt+UP", "...");
- }
단축키를 제거하려면 아래와 같이 하시면 됩니다:
- xed.removeShortcut("Alt+UP");
자동 변환(autocorrection) 추가하기#
엔터를 칠 때 현재 줄의 내용을 자동으로 변환해주는 기능을 자동 변환(autocorrection)이라고 합니다. 예를 들어 스프링노트에서는
* 가나다
라고 입력한 후에 엔터를 누르면
- 가나다
와 같이 변환됩니다.
Xquared는 이와 같은 자동 변환 기능을 기본적으로 제공하지 않고 있는데, API를 통해 원하는 변환 기능을 쉽게 추가하실 수 있습니다. 예를 들어,
----
라고 입력하고 엔터를 누르면 가로선(HR)이 삽입되도록 하려면 아래와 같은 코드를 넣으면 됩니다:
- xed.addAutocorrection('separator', /^----*$/,
- function(xed, rdom, block, text) {
- if(rdom.tree.isBlockContainer(block)) block = rdom.wrapAllInlineOrTextNodesAs("P", block, true)[0];
- rdom.insertNodeAt(rdom.createElement("HR"), block, "before");
- block.innerHTML = "";
- rdom.placeCaretAtStartOf(block);
- return true;
- }
- );
TBD: 코드 설명 추가하기
자동 완성(autocompletion) 추가하기#
글을 입력하다가 Ctrl+Space를 누르면 나머지 부분을 자동으로 완성해주는 기능을 자동 완성(autocompletion)이라고 합니다. 예를 들어 스프링노트에서는 단어 입력 후 Ctrl+Space를 누르면 자동으로 링크를 걸어주거나, @calc:1+2 를 입력한 후 Ctrl+Space를 누르면 계산 결과인 3을 출력하는 등 다양한 자동 완성 기능을 제공하고 있습니다.
Xquared는 이와 같은 자동 완성 기능이 기본적으로 제공하지 않고 있는데, API를 통해 원하는 기능을 쉽게 추가하실 수 있습니다. 예를 들어,
@isbn:9780520243835
라고 입력하고 Ctrl+Space를 누르면
와 같이 아마존으로 가는 링크가 자동으로 걸리도록 만들려면 다음 코드를 추가하시면 됩니다:
- xed.addAutocompletion('isbn', /@ISBN:\d+$/i,
- function(xed, rdom, block, wrapper, text) {
- var isbn = text.split(":")[1];
- var href = "http://amazon.com/exec/obidos/ISBN=" + isbn;
- var node = rdom.createElement('A');
- node.innerHTML = 'ISBN:' + isbn;
- node.href = href
- node.title = 'ISBN:' + isbn;
- wrapper.innerHTML = "";
- wrapper.appendChild(node);
- }
- );
컨텍스트 메뉴 추가하기#
TBD. 오른쪽 버튼 누르면 나타날 메뉴를 사용자 정의 하는 방법. 설명 추가할 것
- xed.addContextMenuHandler('test', function(xed, element, x, y) {
if(element.nodeName != "P") return false;
xed.showContextMenu([
{
title: '볼드',
handler: xed.handleStrongEmphasis.bind(xed),
className: "cssClassName"
},
{
title: '----'
},
{
title: '언더라인',
handler: xed.handleUnderline.bind(xed)
}
], x, y);
return true;
});
템플릿 처리기 추가하기#
Xquared는 미리 정의된 HTML 문자열 조각을 편집 중인 문서에 삽입하는 기능을 제공하는데, 이를 템플릿(template)이라고 합니다. 예를 들어
- xed.insertTemplate('<p>오늘은 {xq:year}년 {xq:month}월 {xq:date}일 입니다.</p>');
라는 코드를 실행하면
<p>오늘은 2007년 9월 15일 입니다</p>
와 같은 HTML 코드가 삽입됩니다.
이와 같이 템플릿의 문자열 일부를 적절한 값으로 치환하기 위해 템플릿 처리기(template processor)가 실행되는데, Xquared는 미리 등록되어 있는 템플릿 처리기 이외에 개발자가 쉽게 템플릿 처리기를 추가하여 다양하고 지능적인 템플릿을 지원할 수 있도록 하는 API를 제공하고 있습니다.
예를 들어,
- xed.addTemplateProcessor(
- 'userAgent',
- function(html) {
- return html.replace(/{xq:userAgent}/img, navigator.userAgent);
- }
- );
위 코드를 실행한 후 다음과 같이 템플릿을 삽입하면
- xed.insertTemplate('<p>User agent: {xq:userAgent}</p>');
다음과 같은 HTML 코드가 삽입됩니다:
- <p>User agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6</p>
Quick Search Dialog#
TBD.
-
var dialog = new xq.controls.QuickSearchDialog(xed, {
listProvider: function(query, xed, callback) {
var headings = xed.rdom.searchHeadings();
var matched = headings.findAll(function(h) {
return xed.rdom.getInnerText(h).toLowerCase().indexOf(query.toLowerCase()) != -1;
});
callback(matched);
},
onSelect: function(xed, selected) {
xed.focus();
xed.rdom.scrollIntoView(selected, true, true);
}
});
dialog.show();
기여하기#
기여방법을 참고하세요.
(8)
(
