Xquared

Xquared English Home

Tue, 27 May 2008 17:37:08 +0900

Xquared

Introduction

Xquared is an open source WYSIWYG web editor module that is currently being used by Openmaru studio's Springnote (http://www.springnote.com )

Xquared is written in JavaScript so that no separate installation is required. Xquared creates documents (refer to Editor document format) based on XHTML standards and through various methods of expansion users can add wanted features easily (refer to feature expansion). Please refer to the special features page for more detailed information.

Download

The latest release: xquared_client_20080423.tar.gz

Documentation

Click here to see Documentation

Licensing

Xquared is distributed under LGPL 3.

Source Code

Xquared uses Mercurial as a repository. If you are new to Mecurial, please read this guide and enter the following command to get the source code:

hg clone http://labs.openmaru.com/hg/xquared/

For more information about Mecurial, read this tutorial

Project Members

Alan Kang - Project leader
Changshin Lee - Project maintainer

메뉴

Mon, 19 May 2008 16:16:45 +0900

Tutorial

Mon, 19 May 2008 16:04:52 +0900

Tutorial

This tutorial is for developers who are not familiar with Xquared. This tutorial explains all steps starting from program installation.

For document reference on all features, please refer to the documentation page.

Table of contents

Installation
Inserting Xquared on a webpage
Trnasferring edit results through a FORM
Adding keyboard shortcuts
Adding autocorrection
Adding autocompletion
Adding a context menu
Adding a template processor
Quick Search Dialog
Contribution

Installation^#

Please refer to the installation page

Starting from April 2008, the dustribution version of Xquared incldes the following files. (If you are using a previous version, please go to Download and download the latest version.)

/docs

/examples
/images
   /content
   /toolbar
/javascripts
   *.js
/stylesheets
   xq_contents.css

xq_ui.css

/tests
   index.html
   test.html
   README
   LICENSE

/docs: contains Xquared JavaScript API documentation
/examples: Includes various types of examples. You can either view these examples through your browser or by clicking the examples page while using Xquared.
/images: Contains images that are used in Xquared
/Contents: Area that contains used images that are used within Xquared's editor.
/javascripts: Area that contains JavaScript files required to run Xquared. The file xquared_merged.js includes all JavaScript files into one so that the initial loading speed of Xquared is quick. Thus, if you have this file you can run Xquared. xquared_merged_min.js is used to shrink the total script file size by removing blank spaces and comments. This file is exactly the same as Xquared_merged.js. For those using a previous version, please use xquared_merged.js (or Xquared_merged_min.js) instead.
/stylesheet: Contains style sheet files that are used in Xquated. xq_content.css is the CSS files that is used in the editor and xq_ui.css is the file used for the toolbar and items ourside of the editor.
/test: Collection of automated tests that utilize JSSpec and Selenium.
index.html
test.html: A test will be executed if you run this in your browser.

Inserting Xquared on a webpage^#

First, the following HTML is generated.

<!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>

Copy the following files to the directory where the above HTML was saved to.

/images

/javascripts

/stylesheets

Now, edit the HTML file and insert the following JavaScript and 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/xquared_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>
...

Let's analyze the above code.

xed = new xq.Editor("editor");

This code generates an instance for the editor and is a substitute for the global variable 'xed.' The HTML element ID that converts to editing mode is DIV which is the editor. Xquared can also connect to the TEXTAREA instead of the DIV.

xed.config.contentCssList = ["stylesheets/xq_contents.css"];

This code is used within the editor (WYSIWYG mode) to appoint the used CSS

xed.setEditMode('wysiwyg');

When this is executed, the DIV#editor element is converted to WYSIWYG editing mode. In actuality the corresponding element is not converted to editing mode, but the following becomes operated:

CSS is modified (display:none) and DIV#editor is hidden in the screen.
An IFRAME is generated through the editing domain and DIV#editor is inserted below it.
DIV#editor's contents (innerHTML) is copied and after it is matched to convert to editing mode (refer to editor document format) it is substituted internally.

To convert to source editing mode, put 'source' instead of 'wysiwyg'

Trnasferring edit results through a FORM^#

As shown above, use the exact same code along with the adding FORM tag as shown below.

<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>

Feature Expansion

Adding keyboard shortcuts^#

Xquared uses widely used keyboard shortcuts. For example, CTrl+B will apply a strong tag (bold). Of course, you can remove keyboard shortcuts, refine keyboard shortcuts and add new keyboard shortcuts.

xed.addShortcut("Alt+UP", "xed.handleMoveBlock(true)");
xed.addShortcut("Alt+DOWN", "xed.handleMoveBlock(false)");

With the Alt key and up and down arrow keys you can know move lines up and down (as in Eclipse). For the Mac The Meta key would probably be mroe appropriate. right?

if(xq.Browser.isMac) {
xed.addShortcut("Meta+UP", "...");
} else {
xed.addShortcut("Alt+UP", "...");
}

To remove a keyboard shortcut, just do the following

xed.removeShortcut("Alt+UP");

Adding autocorrection^#

When pushing Enter, the function that automatically converts the current line’s content is called autocorrection. For example, in Springnote when typing

* abc

and then pressing Enter will convert it to

with a bullet format

Xquared doesn’t support this autocorrection feature by default, but through API we can easily add conversion functions that we want. For example, to make typing four dash marks

---

and and pushing enter insert a horizontal line (HR), just insert the following code:

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: Addition of code descrioption.

Adding autocompletion^#

Having automated completion when pushing Ctrl+Space after you input text is called autocompletion. For example, in Springnote, after you input a word and press Ctrl+Space it will automatically add a link, pushing Ctrl+Space after inputting @calc:1+2 will output the calculation of 1+2 and display the result 3. We provide various types auto completion features.

Xquared doesn’t support this autocompletion feature by default, but through API we can easily add conversion functions that we want. For example, to make typing

@isbn:9780520243835

and pushing Ctrl+Space to convert to

ISBN:9780520243835

which links the ISBN to Amazon, just add the following code:

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);
     }
);

Adding a context menu^#

TBD. Show how users can define the menu that appears when clicking the button on the right. Will add description.

xed.addContextMenuHandler('test', function(xed, element, x, y) {
    if(element.nodeName != "P") return false;
    xed.showContextMenu([
        {
            title: 'Bold',
            handler: xed.handleStrongEmphasis.bind(xed),
            className: "cssClassName"
        },
        {
            title: '----'
        },
        {
            title: 'Underline',
            handler: xed.handleUnderline.bind(xed)
        }
    ], x, y);

    return true;
});

Adding a template processor^#

Xquared supports a feature that allows insertion of predefined HTML text row formation during document editing, which is called a template. For example, executing

xed.insertTemplate('<p>Today is {xq:month}-{xq:date}-{xq:year}.</p>');

will insert the HTML code

<p>Today is 9-15-2007.</p>

As shown above, parts of the template’s text lines are replaced with appropriate values with the execution of the template processor. Xquared provides an API so that developers can easily add intelligent additional template processors to the preexisting template processors available.

For example,
xed.addTemplateProcessor(
     'userAgent',
     function(html) {
          return html.replace(/{xq:userAgent}/img, navigator.userAgent);
     }
);

After executing the above code, inserting the following template

xed.insertTemplate('<p>User agent: {xq:userAgent}</p>');

will insert the following HTML code:

<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();

Contribution^#

Please refer to how to contribute

Roadmap

Mon, 19 May 2008 16:01:54 +0900

Roadmap

Planned

Link edit/deletion
Editlet API embodiment and examples of Editlet embodiment
Image insertion
Improving the Common UI design
Improving Safari 3 support
Improving accessibility
Microformat detector embodiment - finding Microformat within the document
Microformat categorized Editlet embodiment
Table Editlet embodiment
Addition of Common UI
Download 시 Configuration Wizard
Javascript R/W API

2008/03

Macro API and examples of Macro embodiment
Addition of Examples and documentation

2008/01

Toolbar API improvement - Drop-down
Stabilization of editing feature#2

2007/11

Addition of Common UI - Link Dialog
Addition links
Default CSS documentation improvement
Removed reliance on prototype.js
Addition of Common UI - Color Picker Dialog
Removed parts of memory leaks
Stabilization of editing feature#1
Improvement on performance

2007/10

Context menu API
Template processor API
Common UI - QuickSearchDialog
Default Toolbar API
- Normal/Selected
- On/Off
- IE6 support improvement
Interlockage with textarea
Sticking things on the Textarea
Source editing feature

Full Architecture

Mon, 19 May 2008 16:00:30 +0900

Full Architecture

This document is for developers that want to develop expansion features for Xquared (autocompletion, autocorrection, templates, redefined keyboard shortcuts, etc.) or for developers that want to edit our code.

Xquared's main modules and module relationships

xq.Editor

xq.Editor class handles

the conversion between editing mode and standard mode
event processing between keyboard shortcuts, mouse clicks, etc.
all editing command processing
All settings (autocompletion, autocorrection, etc.) processing

xq.rdom.Base

xq.rdom.Base class provides

default CRUB of browser DOM objects
high level DOM constructive API in inferring the difference between browsers
various query methods to obtain specified DOM nodes
method for caret and selection administration

xq.Validator

xq.Validator class executes

conversion of HTML to appropriate form in editing
Whitelist based HTML Validation

xq.plugin.Base

xq.macro.Base

Development

Mon, 19 May 2008 15:56:15 +0900

Project Participants^#

Alan Kang - Project creator & leader
Chang-Shin Lee - Project site construction and project administration support

Source Code^#

Management of the source code uses Mecurial. For first time users of Mecurial please first read our installation guide page and follow the guide to install Mecurial. After installation you will see the following command(executed from Shell or Command Prompt):

hg clone http://labs.openmaru.com/hg/xquared/

and receive the source. For more details on Mecurial, please refer to our Mecurial documentation.

After receiving the source, you can utilize ant(Apache Ant) to start building.

Sharing problems and solutions - Contribution^#

If you have discovered a problem, please post them up at http://ecus.openmaru.com. If you have fixed a bug or problem yourself through a form of a patch, you can be of great help by uploading it on ECUS. For more information on was to contribute please refer to the guide in ECUS.

Installation

Mon, 19 May 2008 15:33:38 +0900

Installation

We can breakdown the installation of Xquared into 3 different methods. The first method is having the server script of Xquared directly loaded, making this the most convenient and easy method. The second method is obtaining the distribution version and use Xquared from your own web server. The third method is using the source code by directly building.

If you want to use Xquared’s server with the least amount of effort required, you can use the first method, as mentioned above, by calling Xquared from your server directly. However, if you are using Xquared through Intranet or other special circumstances where you can’t use the first method, you can download and use the distribution version. If you are making a bug patch or wish to add new features through Xquared’s provided extension points (refer to Feature Extension), the best method would be to utilize the source code.

Directly using Xquared’s server script

Under construction

Installing the distribution version

All you have to do is go to Download and download the latest version and then extract the files. Now the next step is to refer to our Tutorial and continue.

Downloading the source code

Please refer to the Development page.

로드맵

Mon, 19 May 2008 11:54:48 +0900

2007/10

컨텍스트 메뉴 API
템플릿 처리기 API
공통 UI - QuickSearchDialog
기본 Toolbar API
- Normal/Selected
- On/Off
- IE6 지원 향상
textarea와 연동
Textarea에 붙을 수 있도록
소스 편집 기능

2007/11

Common UI 추가 - Link Dialog
링크 추가
기본 문서 CSS 향상
prototype.js 의존성 제거
Common UI 추가 - Color Picker Dialog
메모리 릭 일부 제거
편집 기능 안정화 #1
성능 개선

2008/01

Toolbar API 향상 - Drop-down
편집 기능 안정화 #2

2008/03

Macro API 및 예제 Macro 구현
예제 및 문서 추가

Planned

링크 수정/삭제
Editlet API 구현 및 예제 Editlet 구현
이미지 삽입
Common UI 디자인 개선
사파리 3 지원 향상
접근성 향상
Microformat detector 구현 - 문서 내에 포함된 Microformat 찾아내기
Microformat 별 Editlet 구현
표 Editlet 구현
Common UI 추가
Download 시 Configuration Wizard
Javascript R/W API

전체 아키텍쳐

Mon, 19 May 2008 11:30:43 +0900

이 문서는 Xquared의 확장 기능(자동 완성, 자동 변환, 템플릿 처리기, 단축키 재정의 등)을 개발하거나, 코드를 수정하고자 하는 개발자를 위해 작성되었습니다.

Xquared의 주요 모듈 및 모듈 간의 관계

xq.Xquared

xq.Editor

xq.Editor 클래스는

편집모드/일반모드 사이의 전환
키보드 단축키, 마우스 클릭 등의 이벤트 처리
각종 편집 명령 처리
각종 설정(자동 완성, 자동 변환 등) 처리

등을 담당합니다.

xq.rdom.Base

xq.rdom.Base 클래스는

브라우저 DOM 객체에 대한 기본적인 CRUD
브라우저 간의 차이를 추상화한 고수준의 DOM 조작 API
특정 DOM 노드를 얻어내기 위한 다양한 쿼리 메서드
캐럿, 선택(selection) 관리를 위한 메서드

등을 제공합니다.

xq.validator.Base

xq.validator.Base 클래스는

편집에 적합한 형태로 HTML을 변환
Whitelist 기반 HTML Validation

을 수행합니다.

xq.plugin.Base

xq.macro.Base

튜토리얼

Mon, 19 May 2008 11:28:05 +0900

이 문서는 Xquared에 익숙하지 않은 개발자를 위해 작성되었으며, 프로그램 설치부터 시작해서 기능을 단계적으로 추가하는 과정을 보여주는 "따라하기" 스타일의 자습서 입니다.

전체 기능에 대한 참조 문서는 문서 페이지를 참고하세요.

Table of contents

설치하기
디렉토리 내용 확인하기
웹 페이지에 Xquared 넣기
편집 결과를 FORM으로 전송하기
기능 확장
기여하기

설치하기^#

설치하기를 참고하세요.

디렉토리 내용 확인하기^#

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를 누르면

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();

기여하기^#

기여방법을 참고하세요.

Xquared

Xquared English Home

Xquared

Source Code

Project Members

메뉴

menu

Tutorial

Tutorial

Installation#

Inserting Xquared on a webpage#

Trnasferring edit results through a FORM#

Feature Expansion

Adding keyboard shortcuts#

Adding autocorrection#

Adding autocompletion#

Adding a context menu#

Adding a template processor#

Quick Search Dialog#

Contribution#

Roadmap

Roadmap

Planned

2008/03

2008/01

2007/11

2007/10

Full Architecture

Full Architecture

Xquared's main modules and module relationships

xq.Editor

xq.rdom.Base

xq.Validator

xq.plugin.Base

xq.macro.Base

Development

Project Participants#

Source Code#

Sharing problems and solutions - Contribution#

Installation

Installation

Directly using Xquared’s server script

Installing the distribution version

Downloading the source code

로드맵

2007/10

2007/11

2008/01

2008/03

Planned

전체 아키텍쳐

Xquared의 주요 모듈 및 모듈 간의 관계

xq.Xquared

xq.Editor

xq.rdom.Base

xq.validator.Base

xq.plugin.Base

xq.macro.Base

튜토리얼

설치하기#

디렉토리 내용 확인하기#

웹 페이지에 Xquared 넣기#

편집 결과를 FORM으로 전송하기#

기능 확장#

단축키 추가하기#

자동 변환(autocorrection) 추가하기#

자동 완성(autocompletion) 추가하기#

컨텍스트 메뉴 추가하기#

템플릿 처리기 추가하기#

Quick Search Dialog#

기여하기#

Installation^#

Inserting Xquared on a webpage^#

Trnasferring edit results through a FORM^#

Adding keyboard shortcuts^#

Adding autocorrection^#

Adding autocompletion^#

Adding a context menu^#

Adding a template processor^#

Quick Search Dialog^#

Contribution^#

Project Participants^#

Source Code^#

Sharing problems and solutions - Contribution^#

설치하기^#

디렉토리 내용 확인하기^#

웹 페이지에 Xquared 넣기^#

편집 결과를 FORM으로 전송하기^#

기능 확장^#

단축키 추가하기^#

자동 변환(autocorrection) 추가하기^#

자동 완성(autocompletion) 추가하기^#

컨텍스트 메뉴 추가하기^#

템플릿 처리기 추가하기^#

Quick Search Dialog^#

기여하기^#