이 문서는 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
웹 페이지에 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를 누르면
ISBN:9780520243835
와 같이 아마존으로 가는 링크가 자동으로 걸리도록 만들려면 다음 코드를 추가하시면 됩니다:
- 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();
기여하기#
기여방법을 참고하세요.