Xquared

installation

Wed, 27 May 2009 15:52:36 +0900

툴바 사용자 정의하기

Wed, 29 Apr 2009 15:36:56 +0900

툴바 사용자 정의하기
예제
참고 문서

툴바의 버튼들을 추가/제거할 수 있습니다.

기존 ButtonGroup/ButtonMap 기반의 툴바 재정의 방법은 특정 ButtonGroup 단위의 버튼 추가/삭제에는 편리하지만, 버튼별 추가/삭제를 위해서 너무 많은 코드가 필요했습니다.

그래서 List 기반의 툴바 재정의 방식을 추가했습니다. 사용할 버튼들을 나열하고, "seperator" 키워드를 통해 그룹핑(버튼들의 간격을 줌)하는 방법입니다.

툴바 사용자 정의하기^#

툴바를 사용자 정의 하는데는 두 가지 방법이 있습니다.

기존 Toolbar를 수정/덮어씌우기
새롭게 ToolbarContainer를 정의

사용자가 별도의 툴바 객체를 지정하지 않는다면, Xquared는 Editor.defaultToolbarButtonMap를 참고하여 디폴트 툴바를 설정합니다.

기존 Toolbar를 수정하는데는, ButtonMap 방식과 ButtonList 방식을 사용합니다. ButtonMap 방식에 대해서는 ButtonMap을 이용한 그룹핑 방식 (deprecated) 페이지를 참고해 주세요.

이 페이지에서는 defaultToolbarButtonList 방식에 대해서 설명합니다.

Editor.config.defaultToolbarButtonList^#

Editor.js에 Editor.config.defaultToolbarButtons 객체 목록이 정의되어 있습니다. 이 객체들은 Xquared의 기본 버튼들을 정의합니다. 이를 사용해서, xed.config.defaultToolbarButtonList 를 재정의할 수 있습니다.

xed.config.defaultToolbarButtonList 에 정의한 버튼들만 에디터 툴바에 위치하게 됩니다.

각 버튼들 사이에 간격을 주고 싶으면, "seperator" 를 넣어줍니다.

예를 들어, 아래와 같이 정의하면 다음과 같은 툴바를 얻을 수 있습니다.

xed.config.defaultToolbarButtonList = [
    xed.config.defaultToolbarButtons.foregroundColor,
    xed.config.defaultToolbarButtons.backgroundColor,
    "separator",
    xed.config.defaultToolbarButtons.fontFace,
    xed.config.defaultToolbarButtons.fontSize,
     "separator",
    xed.config.defaultToolbarButtons.justifyCenter,
     "separator",
    xed.config.defaultToolbarButtons.code,
    xed.config.defaultToolbarButtons.orderedList,
];

Editor.config.defaultToolbarButtons^#

Editor.js 에 defaultToolbarButtons 객체가 정의되어 있습니다. 객체들의 목록은 아래에 나열되어 있습니다.

글자색/배경색
- xed.config.defaultToolbarButtons.foregroundColor
- xed.config.defaultToolbarButtons.backgroundColor
글꼴/글자크기
- xed.config.defaultToolbarButtons.fontFace
- xed.config.defaultToolbarButtons.fontSize
링크
- xed.config.defaultToolbarButtons.link
- xed.config.defaultToolbarButtons.removeLink
스타일
- xed.config.defaultToolbarButtons.strongEmphasis
- xed.config.defaultToolbarButtons.emphasis
- xed.config.defaultToolbarButtons.underline
- xed.config.defaultToolbarButtons.strike
- xed.config.defaultToolbarButtons.superscription
- xed.config.defaultToolbarButtons.subscription
- xed.config.defaultToolbarButtons.removeFormat
정렬
- xed.config.defaultToolbarButtons.justifyLeft
- xed.config.defaultToolbarButtons.justifyCenter
- xed.config.defaultToolbarButtons.justifyRight
- xed.config.defaultToolbarButtons.justifyBoth
들여쓰기/내어쓰기
- xed.config.defaultToolbarButtons.indent
- xed.config.defaultToolbarButtons.outdent
블록 관련
- xed.config.defaultToolbarButtons.blockquote
- xed.config.defaultToolbarButtons.code
- xed.config.defaultToolbarButtons.division
- xed.config.defaultToolbarButtons.unorderedList
- xed.config.defaultToolbarButtons.orderedList
삽입
- xed.config.defaultToolbarButtons.table
- xed.config.defaultToolbarButtons.separator
- xed.config.defaultToolbarButtons.character
- xed.config.defaultToolbarButtons.emoticon
HTML 보기
- xed.config.defaultToolbarButtons.html
되돌리기/다시하기
- xed.config.defaultToolbarButtons.undo
- xed.config.defaultToolbarButtons.redo

버튼 정의 형식^#

xed.config.defaultToolbarButtons.fontFace와 같은 각각의 버튼 객체들은 다음과 같이 구성되어 있습니다. 새로운 버튼을 만들거나, 기존 버튼 객체를 수정하려면 아래와 같이 만들어주면 됩니다.

{className:"html", title:"Edit source", handler:"xed.toggleSourceAndWysiwygMode()"}

className : 버튼의 이름이자 ClassName 속성에 들어갈 값입니다. 버튼 이미지 파일의 className 이자, 파일 이름으로 사용됩니다.
title : 버튼의 anchor의 title에 지정될 값입니다.
handler : 버튼을 클릭했을 때 발생할 이벤트를 지정합니다.

즉, 위와 같은 버튼을 정의하면 툴바 영역에는 아래와 같은 HTML 이 추가됩니다.

<span class=""><a title="Edit source" href="#"><img src="../images/toolbar/html.gif" class="html"></a></span>

예제^#

버튼 추가하기^#

아이콘 변경하기^#

툴바 이미지는 images/toolbar 폴더의 {className}.gif 를 가져옵니다. 따라서, 툴바 폴더에 className 이름과 동일한 gif 이미지를 넣으면 버튼의 이미지를 변경할 수 있습니다.

한글 폰트를 폰트 리스트에 추가하기^#

참고 문서^#

Xquared English Home

Tue, 28 Apr 2009 20:48:27 +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: http://code.google.com/p/xquared/downloads/list

Documentation

Click here to see Documentation

Licensing

Xquared is distributed under LGPL 3.

Source Code

Xquared uses GoogleCode(SVN) as a repository. If you are new to SVN, please read this article and enter the following command to get the source code:

svn checkout http://xquared.googlecode.com/svn/trunk/ xquared-read-only

Project Members

Alan Kang - Project leader
Myeongseok Ko - Developer
Hyunsoo Im - Developer
Changshin Lee - Project maintainer

ButtonMap을 이용한 그룹핑 방식 (deprecated)

Tue, 28 Apr 2009 10:43:59 +0900

툴바 재정의에 가장 많이 이용되는 버튼 추가/삭제를 위해서는 이 defaultToolbarButtonMap 방식이 비효율적인 면이 있어서, List 기반의 툴바 재정의 방식을 추가했습니다.

defaultButtonMap 을 사용하는 기존의 방식 역시 지원하지만, 새로운 List 기반 재정의 방식을 사용하는 것을 추천합니다.

더 짧은 코드로 버튼 재정의를 할 수 있습니다.

툴바 사용자 정의하기 페이지를 참고하세요.

아래는 기존의 페이지 내용입니다.

툴바 사용자 정의하기

툴바를 사용자 정의 하는데는 두 가지 방법이 있습니다.

기존 Toolbar를 수정/덮어씌우기
새롭게 ToolbarContainer를 정의

사용자가 별도의 툴바 객체를 지정하지 않는다면, Xquared는 Editor.defaultToolbarButtonMap를 참고하여 디폴트 툴바를 설정합니다.

defaultToolbarButtonMap

defaultToolbarButtonMap는 Xquared 기본 툴바에 들어갈 버튼들에 대한 정보를 담고 있는 배열입니다. 따라서, 이 배열 요소들을 재정의해서 툴바의 버튼들을 변경할 수 있습니다.

아래는 Editor.js에 기술된 defaultToolbarButtonMap의 일부입니다.

this..defaultToolbarButtonMap = [
this..defaultToolbarButtonGroups.font,
    ...
    this..defaultToolbarButtonGroups.link,
    this..defaultToolbarButtonGroups.insert,
    [{className:"html", title:"Edit source", handler:"xed.toggleSourceAndWysiwygMode()"}],
    [{className:"undo", title:"Undo", handler:"xed.handleUndo()"},{className:"redo", title:"Redo", handler:"xed.handleRedo()"}]
];

defaultToolbarButtonMap 내의 배열 객체들 역시 배열로 감싸주어야 합니다. 이는 각 버튼들을 그룹 단위로 관리하기 위해서 입니다. 자세한 것은 아래 defaultToolbarButtonGroups 를 다룰 때 알아보기로 합니다.

버튼 정의 형식

defaultToolbarButtonMap에서 사용하는 툴바의 버튼 정의은 아래와 같습니다.

{className:"html", title:"Edit source", handler:"xed.toggleSourceAndWysiwygMode()"}

className : 버튼의 이름이자 ClassName 속성에 들어갈 값입니다. 버튼 이미지 파일의 className 이자, 파일 이름으로 사용됩니다.
title : 버튼의 anchor의 title에 지정될 값입니다.
handler : 버튼을 클릭했을 때 발생할 이벤트를 지정합니다.

즉, 위와 같은 버튼을 정의하면 툴바 영역에는 아래와 같은 HTML 이 추가됩니다.

<span class=""><a title="Edit source" href="#"><img src="../images/toolbar/html.gif" class="html"></a></span>

defaultToolbarButtonGroups

defaultToolbarButtonMap 의 각 요소 역시 배열로 감싸줍니다. 이는 각 버튼들의 요소를 그룹으로 관리하기 위해서 입니다. Groups 단위로 묶는 이유는 의미적으로 유사한 단위의 버튼을 묶기 위해서 입니다. defaultToolbarButtonGroups의 각 그룹들은 세로 점선 모양의 구분자(Seperator)로 구분됩니다.

아래 툴바 예제를 보면,

[{className:"undo", title:"Undo", handler:"xed.handleUndo()"},{className:"redo", title:"Redo", handler:"xed.handleRedo()"}]

defaultToolbarButtonGroups 는 JSON 배열 형태로 사용합니다. 아래에 defaultToolbarButtonGroups의 예가 있습니다. Groups 단위로 묶는 이유는 의미적으로 유사한 단위의 버튼을 묶기 위해서 입니다. defaultToolbarButtonGroups의 각 그룹들은 세로 점선 모양의 구분자(Seperator)로 구분됩니다.

this..defaultToolbarButtonGroups = {
    "color": [
         {className:"foregroundColor", title:"Foreground color", list:[
            {style: {backgroundColor:"#ffd8d8"}, handler:"xed.handleForegroundColor('#ffd8d8')"},
             ...
            {style: {backgroundColor:"#000000"}, handler:"xed.handleForegroundColor('#000000')"}
        ]},
        {className:"backgroundColor", title:"Background color", list:[
            {style: {backgroundColor:"#FFF700"}, handler:"xed.handleBackgroundColor('#FFF700')"},
             ...
            {style: {backgroundColor:"#FFFFFF"}, handler:"xed.handleBackgroundColor('#FFFFFF')"}
        ]} ],
     "font": [
        {className:"fontFace", title:"Font face", list:[
            {html:"Arial", style: {fontFamily: "Arial"}, handler:"xed.handleFontFace('Arial')"},
              ...
            {html:"Verdana", style: {fontFamily: "Verdana"}, handler:"xed.handleFontFace('Verdana')"}
        ]}, ],
    "link": [
        {className:"link", title:"Link", handler:"xed.handleLink()"},
        {className:"removeLink", title:"Remove link", handler:"xed.handleRemoveLink()"}],

예제

버튼 제거하기

기존 툴바의 버튼 중에 필요없는 버튼들을 감추고, 필요한 버튼들만 보여줄 수 있습니다.

가장 간단한 방법으로, xq.config.defaultToolbarButtonMap 를 수정해서 툴바를 커스터마이징 할 수 있습니다.

Editor.js 에서 아래와 같이 this.config.defaultToolbarButtonMap에 값을 할당하는 코드가 있습니다.

this.config.defaultToolbarButtonMap = [
    this.config.defaultToolbarButtonGroups.font,
    this.config.defaultToolbarButtonGroups.color,
    this.config.defaultToolbarButtonGroups.style,
    this.config.defaultToolbarButtonGroups.justification,
    this.config.defaultToolbarButtonGroups.indentation,
    this.config.defaultToolbarButtonGroups.block,
    this.config.defaultToolbarButtonGroups.link,
    this.config.defaultToolbarButtonGroups.insert,
    [
        {className:"html", title:"Edit source", handler:"xed.toggleSourceAndWysiwygMode()"}
    ],
    [
        {className:"undo", title:"Undo", handler:"xed.handleUndo()"},
        {className:"redo", title:"Redo", handler:"xed.handleRedo()"}
    ]
];

이 코드를 복사해서 Xquared를 초기화하는 페이지에서 재정의 하면 됩니다. 유의할 것은 xed.setEditMode('wysiwyg'); 이전에 defaultToolbarButtonMap를 변경해야 한다는 것입니다. 또한, 당연히 this.config 가 아니라 xed.config가 되어야 합니다.

HTML 소스보기, 폰트컬러 팔레트, 글자 정렬, 인텐트가 필요없다고 가정해봅시다. 그럼 위 코드에서, 이 6줄을 지우면 됩니다.

this.config.defaultToolbarButtonGroups.color,
this.config.defaultToolbarButtonGroups.justification,
this.config.defaultToolbarButtonGroups.indentation,
[
{className:"html", title:"Edit source", handler:"xed.toggleSourceAndWysiwygMode()"}
],

즉, 아래와 같이 defaultToolbarButtonMap를 재정의합니다.

xed = new xq.Editor("xqEditor");
xed.config.defaultToolbarButtonMap = [
    xed.config.defaultToolbarButtonGroups.font,
    xed.config.defaultToolbarButtonGroups.style,
    xed.config.defaultToolbarButtonGroups.block,
    xed.config.defaultToolbarButtonGroups.link,
    xed.config.defaultToolbarButtonGroups.insert,
    [
        {className:"undo", title:"Undo", handler:"xed.handleUndo()"},
        {className:"redo", title:"Redo", handler:"xed.handleRedo()"}
    ]
];
xed.setEditMode('wysiwyg');

그러면, 아래 그림과 같이 툴바에서 버튼들이 사라진 것을 볼 수 있습니다.

버튼 추가하기

툴바에 버튼을 추가해 보겠습니다.

기존 툴바의 버튼들을 그대로 두고, 새롭게 버튼을 추가한다면, Array.push() 메소드를 사용하면 됩니다. 버튼 이미지 추가 없이 테스트해보기 위해서 기존에 있는 이미지를 사용하겠습니다.

새로운 버튼 객체 그룹을 아래와 같이 만듭니다.

[
{className:"html", title:"Extended button", handler:"alert('New Button clicked!')"}
]

그리고, 이 배열 객체를 config.defaultToolbarButtonMap에 추가합니다.

window.onload = function() {
    xed = new xq.Editor("xqEditor");

    xed.config.defaultToolbarButtonMap.push(
    [
    {className:"html", title:"Extended button", handler:"alert('New Button clicked!')"}
    ]
    );

    xed.setEditMode('wysiwyg');
}

이 예제를 실행하면, 툴바 맨 끝에 HTML 버튼이 추가된 것을 볼 수 있습니다.

아이콘 변경하기

한글 폰트를 폰트 리스트에 추가하기

가장 간단한 방법으로, xq.config.defaultToolbarButtonMap 를 수정해서 툴바를 커스터마이징 할 수 있습니다.

Editor.js 에서 defaultToolbarButtonMap로 찾아보면, 기본값을 할당하는 라인이 있습니다. 해당 라인을 복사하셔서, Xquared를 초기화하는 페이지에서 아래와 같이 바꿔줍니다.

유의할 것은 xed.setEditMode('wysiwyg'); 이전에 defaultToolbarButtonMap를 변경해야 한다는 것입니다.

아래 예제코드에서 변경된 부분은 {className:"fontFace" ... 부분입니다. 여기에 폰트목록에 보일 폰트들을 설정하면 됩니다. 요소들은 각각,

html : 목록에 나올 제목
fontFamily : 목록에 스타일링될 fontFamily
handler: 실제 적용될 fontFamily

입니다.

xed = new xq.Editor("xqEditor");
xed.config.defaultToolbarButtonMap = [
    [
        {className:"fontFace", title:"Font face", list:[
            {html:"굴림", style: {fontFamily: "'굴림','Gulim'"}, handler:"xed.handleFontFace('굴림,San-Serif')"},
            {html:"굴림체", style: {fontFamily: "'굴림체','Gulimche'"}, handler:"xed.handleFontFace('굴림체,San-Serif')"},
            {html:"궁서", style: {fontFamily: "'궁서','Gungseou'"}, handler:"xed.handleFontFace('궁서,Serif')"},
             {html:"Arial", style: {fontFamily: "Arial"}, handler:"xed.handleFontFace('Arial')"},
            {html:"Comic Sans MS", style: {fontFamily: "Comic Sans MS"}, handler:"xed.handleFontFace('Comic Sans MS')"},
            {html:"Courier New", style: {fontFamily: "Courier New"}, handler:"xed.handleFontFace('Courier New')"},
            {html:"Georgia", style: {fontFamily: "Georgia"}, handler:"xed.handleFontFace('Georgia')"},
            {html:"Tahoma", style: {fontFamily: "Tahoma"}, handler:"xed.handleFontFace('Tahoma')"},
            {html:"Times", style: {fontFamily: "Times"}, handler:"xed.handleFontFace('Times')"},
            {html:"Trebuchte MS", style: {fontFamily: "Trebuchte MS"}, handler:"xed.handleFontFace('Trebuchte MS')"},
            {html:"Verdana", style: {fontFamily: "Verdana"}, handler:"xed.handleFontFace('Verdana')"}
        ]},

        {className:"fontSize", title:"Font size", list:[
            {html:"Lorem ipsum dolor (8pt)", style: {fontSize: "8pt", marginBottom: "3px"}, handler:"xed.handleFontSize('1')"},
            {html:"Lorem ipsum dolor (10pt)", style: {fontSize: "10pt", marginBottom: "3px"}, handler:"xed.handleFontSize('2')"},
            {html:"Lorem ipsum dolor (12pt)", style: {fontSize: "12pt", marginBottom: "6px"}, handler:"xed.handleFontSize('3')"},
            {html:"Lorem ipsum dolor (14pt)", style: {fontSize: "14pt", marginBottom: "10px"}, handler:"xed.handleFontSize('4')"},
            {html:"Lorem ipsum dolor (18pt)", style: {fontSize: "18pt", marginBottom: "16px"}, handler:"xed.handleFontSize('5')"},
            {html:"Lorem ipsum dolor (24pt)", style: {fontSize: "24pt", marginBottom: "6px"}, handler:"xed.handleFontSize('6')"}
        ]}
    ],
    xed.config.defaultToolbarButtonGroups.color,
    xed.config.defaultToolbarButtonGroups.style,
    xed.config.defaultToolbarButtonGroups.justification,
    xed.config.defaultToolbarButtonGroups.indentation,
    xed.config.defaultToolbarButtonGroups.block,
    xed.config.defaultToolbarButtonGroups.link,
    xed.config.defaultToolbarButtonGroups.insert,
    [
        {className:"html", title:"Edit source", handler:"xed.toggleSourceAndWysiwygMode()"}
    ],
    [
        {className:"undo", title:"Undo", handler:"xed.handleUndo()"},
        {className:"redo", title:"Redo", handler:"xed.handleRedo()"}
    ]
];
xed.setEditMode('wysiwyg');

참고 문서

xquared/client/examples/ 폴더의

toolbar_customized1.html
toolbar_customized2.html
toolbar_disabled.html

01. 새소식

Tue, 28 Apr 2009 10:37:47 +0900

2009/04/23

http://code.google.com/p/xquared/downloads/list 에서 받을 수 있습니다.
Full_merged_min.js를 이용하는 예제 추가
Image 삽입시 alt도 삽입하도록 수정
다국어 지원 (message, toolbar alt/title 값)
링크시 새창열기 옵션 추가
ColorPicker 플러그인 추가
줄간격(line-height) 변경 기능 추가. 줄간격 플러그인 적용 예제
Webkit validation 버그 수정

2009/03/10

Editor.config.PreventExit 기능이 추가되었습니다. SUBMIT 하지 않고 페이지를 벗어날 경우 경고를 해주는 기능입니다.

2009/02/23

파일 업로드 플러그인에 SWFUpload를 이용한 멀티파일 업로드 기능을 추가했습니다.
관련해서, 파일 업로드 플러그인 페이지를 보강했습니다.
2009/02/23일자 릴리즈를 업로드 했습니다. http://code.google.com/p/xquared/downloads/list 에서 받을 수 있습니다.

2009/02/19

데모 페이지를 보강했습니다. 데모별 설명을 추가했습니다.

2009/02/18

툴바 사용자 정의하기 , 플러그인 사용/제작하기 페이지를 보강했습니다.

2009/02/16

2009/02/16일자 릴리즈를 업로드 했습니다. http://code.google.com/p/xquared/downloads/list 에서 받을 수 있습니다.

2009/02/06

2009/02/06일자 릴리즈를 업로드 했습니다. http://code.google.com/p/xquared/downloads/list 에서 받을 수 있습니다.

2009/02/05

2009/02/05일자 릴리즈를 업로드 했습니다. http://code.google.com/p/xquared/downloads/list 에서 받을 수 있습니다.

2009/01/27

소스 컨트롤 관리툴이 Mecurial에서 Subversion으로 변경되었습니다. 소스 저장소로 GoogleCode를 사용합니다. http://code.google.com/p/xquared/ 에 접속하시면 소스코드를 체크아웃받을 수 있습니다.

변경된 소스 저장소 접근법은 개발 페이지를 참고해 주세요.

05. 예제

Mon, 13 Apr 2009 16:26:06 +0900

예제
예제별 설명

예제^#

Xquared의 다양한 활용 예를 모아둔 페이지 입니다. 각 링크를 클릭하시면 Xquared를 실행해보실 수 있습니다:

Toolbar

예제별 설명^#

기본 기능^#

Xquared를 기본 모드로 적용한 예제입니다.

툴바 아이콘, 폰트목록, 툴팁 등이 한글로 변환된 버전^#

스프링노트 한국어버전의 툴바 아이콘들을 사용하고, 글꼴/크기 등에 한글 글꼴을 사용해 한국 사용자들이 친숙하게 사용할 수 있는 예제입니다.

스프링노트의 단축키 및 자동 변환 기능이 추가된 확장버전^#

Xquared를 기본 모드로 적용하고, 단축키, 자동변환, 자동완성, 컨텍스트 기능을 추가한 예제입니다.

소스를 살펴보면, 사용자가 기존 단축키, 자동변환 등에 추가로 정의할 속성들 xed.addShortcuts() 와 같은 메소드를 사용해서 Xquared 안에 추가하는 방법을 확인할 수 있습니다.

window.onload = function() {
    xed = new xq.Editor("xqEditor");

    xed.addShortcuts(getAdditionalShortcuts());
    xed.addAutocorrections(getAdditionalAutocorrections());
    xed.addAutocompletions(getAdditionalAutocompletions());
    xed.addContextMenuHandler('test', contextMenuHandler);

    xed.setEditMode('wysiwyg');
    xed.setWidth("100%");
}

리사이징 플러그인이 적용된 버전^#

plugin 폴더에 포함되어 배포되는 플러그인인 "에디터 Textarea 영역 리사이즈 플러그인" 을 적용한 예제입니다. 이 소스를 통해 플러그인을 사용하는 방법을 확인할 수 있습니다.

window.onload = function() {
    xed = new xq.Editor("xqEditor");
    xed.addPlugin('EditorResize');
    xed.setEditMode('wysiwyg');
    xed.setWidth("100%");
}

업로드 플러그인이 적용된 버전^#

plugin 폴더에 포함되어 배포되는 플러그인인 "단일파일 업로드 플러그인" 을 적용한 예제입니다. 이 소스를 통해 파일을 업로드 하는 방법을 알아볼 수 있습니다.

업로드 플러그인에 대한 자세한 설명은 파일 업로드 플러그인 페이지를 참고하십시요.

HTML Form의 Textarea를 Xquared로 변환하는 예^#

이 예제에서는 Xquared를 FORM 내의 Textarea로 사용하는 예제입니다. 원래 Xquared는 Textarea를 대체하기 때문에 다른 데모와 사용하는 방법은 동일합니다. 단, onsubmit에서 에디터 내의 value를 얻어오는 것 예를 볼 수 있는 것이 차이점입니다. 이 예제를 통해 사용자가 본문을 작성하지 않았을 때 submit을 하지 않는 등의 처리를 하는 방법을 알아볼 수 있습니다.

<form action="#" method="post" onsubmit="alert(document.getElementById('xqEditor').value); return false;">

툴바 사용자 정의 1^#

Xquared의 툴바를 사용자 재정의한 예제입니다. xed.config.defaultToolbarButtonMap 를 재정의해서 툴바를 재정의하는 예제입니다.

툴바에서 버튼을 추가/제거하는 방법은 툴바 사용자 정의하기 페이지에서 자세히 알아볼 수 있습니다.

툴바 사용자 정의 2^#

Xquared의 툴바를 사용자 재정의한 또 다른 예제입니다. 이 예제는 툴바를 재정의하기 위해서 xed.config.defaultToolbarButtonMap를 재정의하지 않고, HTML DIV 엘리먼트로 만든 toolbarContainer의 ID를 넘겨주는 방법을 사용하고 있습니다.

xq.Editor 객체를 생성할 때 두번째 argument로 사용자가 만든 툴바 DIV의 id를 넘겨주면 됩니다.

window.onload = function() {
    xed = new xq.Editor("xqEditor", "xqToolbarContainer");
    xed.setEditMode('wysiwyg');
    xed.setWidth("100%");
}

지켜야 할 관례는 다음과 같습니다.

toolbar div의 className은 toolbar 이어야 한다.
buttons들은 ul로 만드며, ul의 className은 buttons 이어야 한다.
각 li는 <span><a></a></span> 형식으로 만들어준다.

따라서, 이렇게 만들어진 toolbar div element는 아래와 같습니다.

<div class="toolbar" id="xqToolbarContainer">
    <ul class="buttons">
        <li class="foregroundColor"><span><a href="#" title="Foreground color" onclick="xed.handleForegroundColor('red');return false;" onmousedown="return false;">Foreground color</a></span></li>
        <li class="strongEmphasis"><span><a href="#" title="Strong emphasis" onclick="xed.handleStrongEmphasis();return false;" onmousedown="return false;">Strong emphasis</a></span></li>
        <li class="underline"><span><a href="#" title="underline" onclick="xed.handleUnderline(); return false;" onmousedown="return false;">Underline</a></span></li>
        <li class="undo"><span><a href="#" title="Undo" onclick="xed.handleUndo();return false;" onmousedown="return false;">Undo</a></span></li>
        <li class="redo"><span><a href="#" title="Redo" onclick="xed.handleRedo();return false;" onmousedown="return false;">Redo</a></span></li>
    </ul>
</div>

또한, 각 buttons li들의 className을 Xquared의 관례대로 사용하면, 에디터 영역에서 현재 위치한 캐럿의 속성을 얻어와서 할당된 button의 status들을 갱신해줍니다. 즉, underline이 적용된 영역이라면, <li class="underline"> 내의 anchor의 className은 "selected"가 됩니다.

예제의 툴바가 Underline, strong Emphasis 등의 영역에 있을 때 강조되는 것을 확인할 수 있습니다.

툴바 제거^#

툴바를 사용하지 않는 예제입니다.

한글 폰트목록이 추가된 툴바 사용자 정의^#

툴바에서 "폰트 목록"에 굴림, 궁서체 등 한글 폰트 목록을 추가하는 예제입니다. 이 예제를 통해 툴바의 폰트 목록, 글자 크기 등을 수정하는 방법을 알아볼 수 있습니다. 이에 대한 자세한 설명은 툴바 사용자 정의하기 : 한글 폰트를 폰트 리스트에 추가하기 에서 알아볼 수 있습니다.

06. 기여의 전당

Fri, 20 Mar 2009 14:36:56 +0900

Xquared를 위한 패치를 올려 주신 분들입니다:

haneul님 - http://ecus.openmaru.com/issues/2140
Xquared Drupal 모듈 - http://graynote.tistory.com/entry/간단한-두루팔-Drupal-Xquared-모듈

설정하기

Mon, 16 Mar 2009 14:23:29 +0900

다음과 같이 설정 값을 지정하면 Xquared의 작동 방식을 손쉽게 변경할 수 있습니다:

xed.config.enableLinkClick = true;

사용할 수 있는 설정 값 목록은 다음 표를 참고하세요(알파벳 순):

설정이름	기본값	설명
autoFocusOnInit	false	true로 설정하면 편집 모드가 실행될 때 자동으로 focus를 갖게 됩니다.
automaticallyHookSubmitEvent	true	Xquared에 연결된 엘리먼트가 textarea 이며, 해당 textarea가 form 안에 담겨 있는 경우, 이 값을 true로 설정하면 form이 submit 되기 전에 textarea의 값이 자동으로 갱싱됩니다.
bodyId	''	WYSIWYG 편집기의 body 태그에 적용될 ID 값.
bodyClass	'xed'	WYSIWYG 편집기의 body 태그에 적용될 class 값.
changeCursorOnLink	false	true로 설정하면 편집 모드의 링크 위에 마우스를 올렸을 때 마우스 커서가 손가락 모양으로 바뀝니다. 링크가 클릭 가능하게 만들려면 enableLinkClick 설정을 변경하셔야 합니다.
contentCssList	['css/xq_contents.css']	WYSIWYG 모드에서 쓰일 CSS의 목록. 이후에 xq.Editor.loadStylesheet() 함수를 통해 동적으로 추가할 수도 있습니다. 하지만 이 설정값을 통해 미리 CSS를 지정하면 초기 로딩시 화면 깜빡임을 줄일 수 있습니다.
defaultToolbarButtonMap	[...]	Xquared 기본 툴바에 들어갈 버튼들에 대한 정보를 담고 있는 배열. 이 값을 바꾸면 기본 툴바에 들어갈 버튼의 종류나 위치 등을 변경할 수 있습니다. 자세한 내용은 툴바 사용자 정의를 참고하세요.
enableLinkClick	false	true인 경우 링크를 클릭하면 해당 URL로 이동하게 됩니다. 링크 위에 마우스를 올렸을 때 커서가 손가락 모양으로 바뀌게 하려면 changeCursorOnLink 설정을 변경하셔야 합니다.
enablePreventExit	false	true인 경우, textarea에 내용이 있고, form submit을 하지 않고 페이지를 이동하려고 하면, 사용자에게 경고창을 보여줍니다. textarea의 초기값 (예: 내용을 입력해 주세요)을 기억하고, 내용이 수정되었을 때 메시지를 보여줍니다. 메시지 내용을 변경하려면 config.PreventExitMessage 에 메시지를 정의합니다.
PreventExitMessage	"Document is empty ..."	enablePreventExit이 true로 설정되었고, 페이지를 이동하려고 할 때 보여주는 경고창의 메시지 내용입니다. 초기 메시지는 Document is not empty. If you want to leave, click 'Ok' button. 입니다.
generateDefaultToolbar	true	Xquared에서 제공하는 기본 툴바를 보여줄 것인지 여부를 설정합니다. 사용자 정의 툴바를 쓰려면 false로 설정하세요.
imagePathForContent	'img/content/'	편집기 내부에서 쓰일 이미지들의 경로.
imagePathForDefaultToolbar	'img/toolbar/'	툴바 버튼 및 배경, 구분자 이미들이 있는 경로.
noValidationInSourceEditMode	false	true로 설정하면 소스 편집 모드에서 getCurrentContent()를 호출하거나 폼이 submit 될 때 Validation을 수행하지 않습니다. 하지만 소스 편집 모드에서 WYSIWYG 모드로 전환하거나 하면 이 옵션에 상관 없이 Validation이 수행됩니다.
urlValidationMode	'absolute'	URL 유효화 방식을 설정합니다. 예를 들어 현재 URL이 "http://a.com/b/c.html?d=1" 일 때 문서 내의 링크(href 등)는 모드에 따라 다음과 같이 바뀝니다: 'relative' (최대한 짧은 상대경로로 변환합니다): http://a.com/b/c.html?d=1 --> # c.html?d=2 --> ?d=2 http://a.com/b/d.html --> d.html http://x.com/b.html --> http://x.com/b.html 'host_relative' (호스트가 다른 경우는 absolute, 호스트가 동일하면 path 이후 부분만 보존합니다): http://a.com/b/c.html?d=1 --> /b/c.html?d=1 c.html?d=2 --> /b/c.html?d=2 http://a.com/b/d.html --> /b/d.html http://x.com/b.html --> http://x.com/b.html 'absolute' (무조건 절대경로로 변환합니다): http://a.com/b/c.html?d=1 --> http://a.com/b/c.html?d=1 c.html?d=2 --> http://a.com/b/c.html?d=2 http://a.com/b/d.html --> http://a.com/b/d.html http://x.com/b.html --> http://x.com/b.html 'browser_default' (브라우저 기본 설정을 따릅니다): 브라우저별로 다름.
widgetContainerPath	'widget_container.html'	위젯 컨테이너 HTML 파일의 경로.
whitelist	{...}	Validator가 허용할 태그 목록 및 태그 별로 허용되는 속성 목록을 담고 있는 객체입니다. 다음과 같은 형식을 따릅니다: { 'a': ['href', 'id', 'class', ...], 'blockquote': ['id', 'class', 'cite', ...], .... }

단축키, 자동완성, 자동변환 등 다양한 확장점을 사용하여 Xquared에 기능을 추가하는 방법에 대해서는 기능 확장하기를 참고하세요.

파일 업로드 플러그인

Tue, 24 Feb 2009 14:45:41 +0900

관련 파일
사용법

이 플러그인은 1개의 파일만을 전송하는 싱글 파일 업로드 기능과, 여러개의 파일을 한번에 전송하는 멀티파일 업로드 기능을 갖고 있습니다.

HTML Input element를 사용하면 한번에 하나의 파일밖에 선택할 수 없습니다. 따라서, 이 플러그인은 멀티파일 선택을 위해 플래시기반 오픈소스 업로드 컴포넌트인 SWFUpload을 사용합니다. SWFUpload은 다양한 기능과 설정 요소들을 갖고 있습니다. 이 문서는 SWFUpload의 요소 중 멀티파일 업로드 플러그인을 사용하기 위한 최소한의 정보만을 기술하고 있으며, 나머지 자세한 정보는 SWFUpload 공식 문서를 참고하십시요.

사용법^#

examples/plugin_multifile_upload.html 을 보시면 사용법을 쉽게 이해할 수 있습니다.
http://xq.springnote.com/examples/plugin_multifile_upload.html 에서 테스트할 수 있습니다.

1. 플러그인 및 관련 소스코드 추가^#

<script type="text/javascript" src="../javascripts/plugin/swfupload/AC_OETags.js"></script>
<script type="text/javascript" src="../javascripts/plugin/swfupload/swfupload.js"></script>
<script type="text/javascript" src="../javascripts/plugin/swfupload/swfupload.queue.js"></script>
<script type="text/javascript" src="../javascripts/plugin/FileUploadPlugin.js"></script>

와 같이 해당 플러그인을 include하시고,

2. Xquared에 플러그인 추가하기^#

xed.addPlugin() 메소드를 사용해서 Xquared에 플러그인을 추가할 수 있습니다.

window.onload = function() {
xed = new xq.Editor("xqEditor");
xed.addPlugin('FileUpload');
xed.setFileUploadTarget('/examples/single_upload_submit.php', '/examples/upload.php'); xed.setEditMode('wysiwyg');
xed.setWidth("100%");
};

xed.addPlugin('FileUpload'); 를 써주면, FileUpload 플러그인을 로딩합니다.

3. 플러그인 설정하기^#

업로드 Target URL 설정하기^#

파일을 전송할 서버의 FORM ACTION URL을 setFileUploadTarget 메소드를 이용해서 설정해줍니다.

setFileUploadTarget 의 첫번째 인자는 싱글 파일 업로드를 받을 타겟 URL이고, 두번째 인자는 멀티 파일 업로드를 받을 타겟 URL 입니다.

두 타겟 URL을 분리한 이유는 싱글 파일 업로드를 처리한 후에는 자바스크립트 콜백 함수를 호출해야 하기 때문입니다. 멀티파일 업로드에서는 SWFUpload.swf가 이를 대신 호출해줍니다.

싱글파일 업로드만 사용하고 싶을 때 : 설정하기^#

멀티파일 업로드를 사용하지 않고, 싱글 파일 업로드만 사용할 때에는 addPlugin을 하기 전에 xed.isSingleFileUpload = true; 라고 선언해줍니다.

window.onload = function() {
    xed = new xq.Editor("xqEditor");
    xed.isSingleFileUpload = true;
    xed.addPlugin('FileUpload');
    xed.setFileUploadTarget('/examples/single_upload_submit.php', null);
    xed.setEditMode('wysiwyg');
    xed.setWidth("100%");
};

4. 서버 : 결과 메시지 구성하기^#

FileUploadPlugin.js의 fileUploadListener.onComplete();에서는 action target url에서 반환한 값(body의 내용, body.innerHTML) 을 읽어서 적절한 처리를 합니다.

형식은 아래와 같습니다.

{
success: true,
file_url: '../images/dialogs/multifile.gif',
message: ''
}

success : 성공 여부
file_url : 업로드한 이미지의 서버 URL. 이 파일URL이 quared 에디터 내부에 img.src로 사용됩니다.
mesage : 오류 등에 대한 메시지

5. 서버 : 업로드가 성공하면, 자바스크립트 콜백 함수를 호출하기^#

싱글파일 업로드^#

파일 업로드를 처리하는 서버 페이지에서는, 파일이 업로드된 후에 window.parent.xed.fileUploadListener.onSuccess();를 호출해줘야 합니다. (single_upload_submit.html, single_upload_submit.php 참고)

if (window.parent.xed)
{
window.parent.xed.fileUploadListener.onSuccess();
}

멀티파일 업로드^#

멀티파일 업로드에서는 swfupload.swf가 xed.fileUploadListener.onSuccess();를 호출해줍니다. 따라서 별도의 처리를 할 필요가 없습니다.

플러그인 커스터마이징^#

파일 업로드가 끝난 뒤의 처리를 변경하고 싶으면, 별도의 함수를 만들거나, FileUploadPlugin.js의 fileUploaderListener.onSuccess() 메소드를 변경하면 됩니다.

이 파일 업로드 플러그인은 하나의 예제이기 때문에, 필요하시다면 적절히 수정하셔서 사용하시면 됩니다.

플러그인 사용/제작하기

Mon, 23 Feb 2009 18:06:01 +0900

플러그인

플러그인^#

Xquared는 플러그인 기능을 지원합니다. 플러그인을 통해 누구나 Xquared의 기능을 수정/확장하고 배포할 수 있습니다.

코드를 직접 수정하지 않고 플러그인 형태로 제작하면, Xquared 코드와의 결합성이 낮아집니다. 따라서, Xquared를 업데이트해도 문제가 생길 일이 적어집니다.

현재 만들어진 플러그인 목록^#

기본으로 제공하는 플러그인은 javascripts/plugin 에서 확인할 수 있습니다.

2009년 2월 16일 현재,

Resize 플러그인
FileUpload 플러그인
FlashMovie 삽입 플러그인
Springnote 단축키 플러그인

등이 제공되고 있습니다.

플러그인 사용 방법^#

플러그인을 사용하는 방법은 간단합니다. 플러그인 파일을 include한 후, Editor.addPlugin()로 추가하면 됩니다.

1. 플러그인 파일을 삽입합니다.

<script type="text/javascript" src="../javascripts/plugin/EditorResizePlugin.js"></script>

2. Editor 객체에 플러그인을 추가합니다.

xed = new xq.Editor("xqEditor");
xed.addPlugin('EditorResize');
xed.setEditMode('wysiwyg');

Editor.addPlugin() 메소드를 사용해서 플러그인을 xed에 추가합니다.

Xquared의 설정/초기화와 관련된 모든 메소드는 setEditMode() 이전에 선언되어야 합니다.

에디터를 보면, Textarea 맨 하단에 Resizing을 할 수 있는 영역이 생성된 것을 확인할 수 있습니다.

파일 업로드 플러그인 사용방법^#

파일 업로드 플러그인 페이지에서 자세한 사용방법을 알아볼 수 있습니다.

플러그인 만들기^#

플러그인을 만들기 위해서는 이미 만들어진 다른 플러그인들을 예제로 활용하는 것이 가장 좋습니다.

기본 제공되는 플러그인들은 각각 다음의 예제 역할도 겸합니다.

툴바에 버튼을 추가하고, 버튼을 클릭했을 때 지정된 자바스크립트 액션(함수)를 수행하는 플러그인
- FileUpload 플러그인
XQuared의 Mouse/Key 이벤트에 지정된 함수를 추가하기
- Resize 플러그인
Xquared의 단축키, 자동완성, 자동변환에 지정된 것들을 추가
- Springnote 단축키 플러그인

규칙^#

Xquared에서는 플러그인 설정을 쉽게 하기 위해, 플러그인 코드(.js) 파일이 위치하는 경로, 파일이름과 플러그인의 명명규칙을 제한하고 있습니다.

플러그인의 이름을 EditorResize 이라고 할 때,

플러그인의 이름 : EditorResizePlugin
코드파일의 이름 : EditorResizePlugin.js
플러그인 소스파일(.js)의 경로 : javascripts/plugin

을 지켜야 합니다.

함수^#

javascripts/plugin/Base.js은 플러그인 클래스의 Base Class 입니다. 이 베이스 클래스에서 플러그인에서 사용되는 함수들을 확인할 수 있습니다.

javascripts/plugin/Base.js를 보고, 필요한 함수들을 오버라이딩해서 사용하면 됩니다.

플러그인에서 사용되는 주요 함수들은 다음과 같습니다.

this.onAfterLoad(this.editor);
this.onAfterUnload(this.editor);

onAfterLoad 메소드는 플러그인이 로딩된 후 호출되는 메소드이며, onAfterUnload 메소드는 플러그인이 언로드된 후 호출되는 메소드입니다.

onAfterLoad 메소드에서 Editor(xed)에 객체나 함수를 추가하는 방법으로 Xquared를 확장할 수 있습니다.

외부 모듈 연동하기^#

Xquared를 도입하는 측에서 가장 많이 문의하는 것은

툴바에서 기본 버튼을 제거하기
툴바에 새로운 버튼을 추가하기
툴바에 추가한 버튼을 눌렀을 때 외부 모듈이 실행되고, 그 모듈의 결과가 에디터 내부에 삽입되기

입니다.

이 중 툴바에서 버튼을 추가/제거하는 것은 툴바 사용자 정의하기 페이지를 참고하면 됩니다.

툴바에 추가한 버튼을 눌렀을 때 외부 모듈이 실행되고, 그 모듈의 결과가 에디터 내부에 삽입되기를 구현해 보겠습니다.

툴바 사용자 정의하기 페이지를 통해, 툴바에 버튼을 하나 추가했다고 합시다.

플러그인에서 이벤트를 받아서 처리하기^#

DOM 이벤트가 발생할 때 플러그인이 이 이벤트를 받아서 핸들링할 수 있습니다. 이를 위해서는 플러그인 내부에 다음과 같은 구현을 해야 합니다.

isEventListener 메소드를 오버라이딩하고, true 를 반환하게 합니다.
onEditorInitialized 함수를 만들고, 그 안에서 registerEventFirer를 사용해 이벤트를 등록하고, 원하는 이벤트를 observe 하게 합니다.

javascripts/plugin/EditorResizePlugin.js 가 좋은 예입니다.

xq.plugin.EditorResizePlugin = xq.Class(xq.plugin.Base,
    /**
    * @name xq.plugin.EditorResizePlugin
    * @lends xq.plugin.EditorResizePlugin.prototype
    * @extends xq.plugin.Base
    * @constructor
    */
    {
    isEventListener: function() {return true;},

    onAfterLoad: function(xed) {
        this.xed = xed;
        this.bar = null;
        this.screen = null;
        this.active = false;
    },

    onEditorInitialized: function(xed) {
        xed.registerEventFirer("Editor", "Resized");
        // ...중략...

        // register event
        xq.observe(this.bar, 'mousedown', this.onMousedown.bindAsEventListener(this));
        xq.observe(document, 'mouseup', this.onMouseup.bindAsEventListener(this));
        xq.observe(this.bar, 'click', this.onMouseup.bindAsEventListener(this));
        this.mousemoveHandler = this.onMousemove.bindAsEventListener(this);
    },

    onMousedown: function(e) {
// 구현...
}

단축키, 자동완성, 자동변환, 컨텍스트 메뉴 등의 추가^#

플러그인이 Xquared의 단축키, 자동완성, 자동변환, 컨텍스트 메뉴 등의 기능을 확장할 수 있습니다. 플러그인에 해당 콜백 함수들을 오버라이딩하면 됩니다.

SpringnotePlugin.js 에서 단축키-getShortcuts, 자동 완성-getAutocorrections, 자동변환-getAutocompletions, 템플릿-getTemplateProcessors 등을 오버라이딩하고 있습니다. 이를 예제로 참고하셔서 구현하시면 됩니다.

getShortcuts: function() {return [];},
getAutocorrections: function() {return [];},
getAutocompletions: function() {return [];},
getTemplateProcessors: function() {return [];},
getContextMenuHandlers: function() {return [];}

기능 확장하기

Mon, 23 Feb 2009 13:57:48 +0900

기능을 확장하는 간단한 사례들은 튜토리얼을 참고하시기 바랍니다.

Toolbar

툴바 사용자 정의하기

TBD - 툴바를 켜고 꺼기, 버튼 제거 및 재그룹, 순서 바꾸기, 사용자 정의 툴바 만들기

Plugin

플러그인 사용/제작하기

Context Menu

TBD - 컨텍스트 메뉴(오른쪽 버튼 누르면 나오는 메뉴)를 커스터마이징 하는 API

Quick Search Dialog

TBD - 빠른 검색 다이얼로그 활용하기. (제목으로 바로 이동 등)

Form Dialog

FormDialog를 참고하세요.

Autocompletion

TBD - 자동 완성 API

Autocorrection

TBD - 줄바꿈 누를 때 실행되는 자동 변환 API

Macro

TBD - 문서 상에서 실행되는 작은 코드 조각.

Shortcut

TBD - 단축키 API

Template

TBD - 템플릿 처리기 API

Xquared

installation

툴바 사용자 정의하기

툴바 사용자 정의하기#

Editor.config.defaultToolbarButtonList#

Editor.config.defaultToolbarButtons#

버튼 정의 형식#

예제#

버튼 추가하기#

아이콘 변경하기#

한글 폰트를 폰트 리스트에 추가하기#

참고 문서#

Xquared English Home

Xquared

Introduction

Download

Documentation

Licensing

Source Code

Project Members

ButtonMap을 이용한 그룹핑 방식 (deprecated)

툴바 사용자 정의하기

defaultToolbarButtonMap

버튼 정의 형식

defaultToolbarButtonGroups

예제

버튼 제거하기

버튼 추가하기

아이콘 변경하기

한글 폰트를 폰트 리스트에 추가하기

참고 문서

01. 새소식

2009/04/23

2009/03/10

2009/02/23

2009/02/19

2009/02/18

2009/02/16

2009/02/06

2009/02/05

2009/01/27

05. 예제

예제#

예제별 설명#

기본 기능#

툴바 아이콘, 폰트목록, 툴팁 등이 한글로 변환된 버전#

스프링노트의 단축키 및 자동 변환 기능이 추가된 확장버전#

리사이징 플러그인이 적용된 버전#

업로드 플러그인이 적용된 버전#

HTML Form의 Textarea를 Xquared로 변환하는 예#

툴바 사용자 정의 1#

툴바 사용자 정의 2#

툴바 제거#

한글 폰트목록이 추가된 툴바 사용자 정의#

06. 기여의 전당

설정하기

파일 업로드 플러그인

관련 파일#

사용법#

1. 플러그인 및 관련 소스코드 추가#

2. Xquared에 플러그인 추가하기#

3. 플러그인 설정하기#

업로드 Target URL 설정하기#

싱글파일 업로드만 사용하고 싶을 때 : 설정하기#

4. 서버 : 결과 메시지 구성하기#

5. 서버 : 업로드가 성공하면, 자바스크립트 콜백 함수를 호출하기#

싱글파일 업로드#

멀티파일 업로드#

플러그인 커스터마이징#

플러그인 사용/제작하기

플러그인#

현재 만들어진 플러그인 목록#

플러그인 사용 방법#

파일 업로드 플러그인 사용방법#

플러그인 만들기#

규칙#

함수#

외부 모듈 연동하기#

플러그인에서 이벤트를 받아서 처리하기#

단축키, 자동완성, 자동변환, 컨텍스트 메뉴 등의 추가#

툴바 사용자 정의하기^#

Editor.config.defaultToolbarButtonList^#

Editor.config.defaultToolbarButtons^#

버튼 정의 형식^#

예제^#

버튼 추가하기^#

아이콘 변경하기^#

한글 폰트를 폰트 리스트에 추가하기^#

참고 문서^#

예제^#

예제별 설명^#

기본 기능^#

툴바 아이콘, 폰트목록, 툴팁 등이 한글로 변환된 버전^#

스프링노트의 단축키 및 자동 변환 기능이 추가된 확장버전^#

리사이징 플러그인이 적용된 버전^#

업로드 플러그인이 적용된 버전^#

HTML Form의 Textarea를 Xquared로 변환하는 예^#

툴바 사용자 정의 1^#

툴바 사용자 정의 2^#

툴바 제거^#

한글 폰트목록이 추가된 툴바 사용자 정의^#

관련 파일^#

사용법^#

1. 플러그인 및 관련 소스코드 추가^#

2. Xquared에 플러그인 추가하기^#

3. 플러그인 설정하기^#

업로드 Target URL 설정하기^#

싱글파일 업로드만 사용하고 싶을 때 : 설정하기^#

4. 서버 : 결과 메시지 구성하기^#

5. 서버 : 업로드가 성공하면, 자바스크립트 콜백 함수를 호출하기^#

싱글파일 업로드^#

멀티파일 업로드^#

플러그인 커스터마이징^#

플러그인^#

현재 만들어진 플러그인 목록^#

플러그인 사용 방법^#

파일 업로드 플러그인 사용방법^#

플러그인 만들기^#

규칙^#

함수^#

외부 모듈 연동하기^#

플러그인에서 이벤트를 받아서 처리하기^#

단축키, 자동완성, 자동변환, 컨텍스트 메뉴 등의 추가^#