05. 예제
Xquared의 다양한 활용 예를 모아둔 페이지 입니다. 각 링크를 클릭하시면 Xquared를 실행해보실 수 있습니다:
예제별 설명#
기본 기능#
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 등의 영역에 있을 때 강조되는 것을 확인할 수 있습니다.
툴바 제거#
툴바를 사용하지 않는 예제입니다.
한글 폰트목록이 추가된 툴바 사용자 정의#
툴바에서 "폰트 목록"에 굴림, 궁서체 등 한글 폰트 목록을 추가하는 예제입니다. 이 예제를 통해 툴바의 폰트 목록, 글자 크기 등을 수정하는 방법을 알아볼 수 있습니다. 이에 대한 자세한 설명은 툴바 사용자 정의하기 : 한글 폰트를 폰트 리스트에 추가하기 에서 알아볼 수 있습니다.
Back