Whiteship's Note


XQuared 사용하기 4

Good Tools : 2007. 11. 14. 00:14


이번에는 XQuared API를 조금 살펴봤습니다. API 문서화를 매우 잘 해두었기 때문에, API만 보는 것으로도 많은 도움을 받을 수 있습니다.

var xed;

    window.onload = function() {
        xed = new xq.Editor($("xqEditor"));
        xed.setEditMode('wysiwyg');
        xed.loadStylesheet("css/xq_contents.css");
        xed.focus();
    }

위의 코드가 XQuared 11월 8일 배포판에 포함되어 있던 코드 입니다.

가장 중점적으로 살펴보아야 할 API는 Editor.js입니다. 이 곳에 위에서 사용한 모든 메소드들이 들어있습니다.

xed = new xq.Editor($("xqEditor"));

생성자를 사용했네요. 인자로 넘겨준 값은 다음과 같이 설명되어 있습니다.
HTML element(TEXTAREA or normal block element such as DIV) to be replaced with editable area.

Textarea 엘리먼트나 div와 같은 블럭 엘리먼트의 이름을 넘겨준다고 친절하게 설명되어 있습니다.

실제 위의 예제는 TextArea에서 다음과 같이 정의하고 있습니다.
<textarea name="contents" id="xqEditor"></textarea>

이렇게 하면 이 TextArea는 XQuared 에디터가 자리잡게 됩니다.

xed.setEditMode('wysiwyg');

에디트모드는 세 종류가 있습니다. HTML 소스, 편집모드, 참조모드.
HTML 소스편집 모드로 보려면 인자로 source.
편집모드는 위와 같이 wysisyg.
참조모드는 readonly. 입니다.

나머지 두 줄은 별다른 설명이 필요 없을 것 같습니다.
메소드 작명도 잘 해두신 것 같습니다.

'Good Tools' 카테고리의 다른 글

레몬펜 우왕ㅋ굿~  (12) 2007.12.06
Eclispe 미안해. 내 눈이 삐구였어.  (2) 2007.11.26
Java에 OpenID 적용 관련 아티클  (0) 2007.11.20
티스토리에서 코드 하이라이팅 사용하기  (6) 2007.11.14
Trang :: XML로 XSD 작성해 주는 도구  (0) 2007.11.14
XQuared 사용하기 4  (2) 2007.11.14
Eclipse TPTP 맛보기  (4) 2007.11.13
XQuared 사용하기 3  (4) 2007.11.08
XQuared 사용하기 2  (0) 2007.11.07
XQuared 사용하기  (0) 2007.11.05
외장 하드 포맷하기.  (0) 2007.11.03
top

  1. Favicon of http://yunsunghan.tistory.com BlogIcon Max 2007.11.14 09:12 PERM. MOD/DEL REPLY

    기선씨 블로그글 보고
    Xquared를 Demo에 붙여 보았는데, 기존에 Textarea 를 쉽게 전환해서 적용해볼수 있었습니다.
    단순히 적용만 해보았는데... 시간 되면 분석해볼만한 놈인것 같아요... ^^*

    Favicon of http://whiteship.tistory.com BlogIcon 기선 2007.11.14 11:58 PERM MOD/DEL

    넹. 저도 꾸준히 살펴볼 계획입니다. 기능확장과 단축키 추가 변경까지 해보는 것이 목표입니다.

Write a comment.


XQuared 사용하기 3

Good Tools : 2007. 11. 8. 17:28


이전에 발생했던 두 개의 문제를 Alan Kang님의 도움으로 말끔하게 해결했습니다.

1. FF에서 아이콘 부분이 이상하게 보이던 것.
=> " toolbar의 ul 및 a 태그에 height:100%가 적용되어 있어서 그렇습니다. 이것만 제거해주시면 잘 나올거예요 ^^"

css를 수정해야 할 것 같습니다. css에서 다음의 부분에서 height : 100%를 삭제했습니다.
사용자 삽입 이미지
자... 그리고 FF에서 확인했더니, 잘 보입니다. 얏호!!

사용자 삽입 이미지

2. IE에서 비명횡사 하던 문제.
=> " 확인하였습니다. 11월 8일 버전으로 갱신하시면 문제가 해결될거예요. 감사합니다!"

네, 위 말대로, 새로운 버전을 받은 다음 예제코드의 자바스크립트 코드로 jsp 파일의 자바스크립트를 수정해 주었더니 문제가 발생하지 않았습니다.

3. 번외

이전과 달라진 코드가 있다면, 아래와 같이 view에 삽입되는 코드가 더 짧아졌다는 것입니다.
var xed;

    window.onload = function() {
        xed = new xq.Editor($("xqEditor"));
        xed.setEditMode('wysiwyg');
        xed.loadStylesheet("css/xq_contents.css");
        xed.focus();
    }

4. 이제부턴 본격적으로 XQuared의 자바스크립트 API를 살펴봐야겠군요.

Edit 모드와 View 모드 설정.
창크기 조절.
아이콘/기능 추가.
단축키 변경/추가.

'Good Tools' 카테고리의 다른 글

Java에 OpenID 적용 관련 아티클  (0) 2007.11.20
티스토리에서 코드 하이라이팅 사용하기  (6) 2007.11.14
Trang :: XML로 XSD 작성해 주는 도구  (0) 2007.11.14
XQuared 사용하기 4  (2) 2007.11.14
Eclipse TPTP 맛보기  (4) 2007.11.13
XQuared 사용하기 3  (4) 2007.11.08
XQuared 사용하기 2  (0) 2007.11.07
XQuared 사용하기  (0) 2007.11.05
외장 하드 포맷하기.  (0) 2007.11.03
Ant를 사용한 배포 자동화  (0) 2007.10.30
톰캣 이름 변경하기  (2) 2007.10.23
top

TAG Xquared
  1. Favicon of http://alankang.tistory.com BlogIcon alankang 2007.11.08 18:39 PERM. MOD/DEL REPLY

    짝짝짝! 고생하셨습니다 ^^

    Favicon of https://whiteship.tistory.com BlogIcon 기선 2007.11.08 19:11 신고 PERM MOD/DEL

    ㅎㅎ감사합니다. ^^

  2. Favicon of http://darkbeom.egloos.com/ BlogIcon darkbeom 2008.08.28 16:19 PERM. MOD/DEL REPLY

    안녕하세요~ XQuared 를 셋팅해서 사용하고 있는데요...

    혹시... 이미지 첨부기능 추가하는 것은 없나요?

    Favicon of https://whiteship.tistory.com BlogIcon 기선 2008.08.28 16:37 신고 PERM MOD/DEL

    글쎄요. 사용해본지 오래되서, 요즘은 어떤 기능들이 추가됐는지 몰겠습니다.

Write a comment.


XQuared 사용하기 2

Good Tools : 2007. 11. 7. 16:46


나이스!!!

이전 글에서 감기 때문에 비실거리며 중단 했었던 XQuared 사용하기의 문제를 해결했습니다.

문제는 상당히 단순한 경로 문제였습니다. 아이콘의 이미지를 자바스크립트에서 참조하지 못해서 이상한 화면이 나왔었는데 이제는 깔끔하게 다음과 같이 편집기를 볼 수 있습니다.

사용자 삽입 이미지

이전 글을 작성하다가 예측한 부분이 제대로 맞았습니다. 자바스크립트에서 이미지의 기본 폴더를 지정한 곳을 수정해 주어야 합니다.

        this.config.imagePathForDefaultToobar = 'img/toolbar/';

이 부분을 다음과 같이 수정했습니다.

        this.config.imagePathForDefaultToobar = '/whiteship/img/toolbar/';

음헤헷! 사용해 봐야겠습니다.

헉.. 사용하자마자 문제가 발생하는군요.
1. 파이어폭스에서 아이콘 부분의 이미지가 이상하게 보입니다.
2. IE에서 글을 입력하고, 버튼을 몇개 누르다보면, 갑자기 IE가 꺼져버립니다.

흠...아직은 안정적이지 않은 것 같습니다.


'Good Tools' 카테고리의 다른 글

티스토리에서 코드 하이라이팅 사용하기  (6) 2007.11.14
Trang :: XML로 XSD 작성해 주는 도구  (0) 2007.11.14
XQuared 사용하기 4  (2) 2007.11.14
Eclipse TPTP 맛보기  (4) 2007.11.13
XQuared 사용하기 3  (4) 2007.11.08
XQuared 사용하기 2  (0) 2007.11.07
XQuared 사용하기  (0) 2007.11.05
외장 하드 포맷하기.  (0) 2007.11.03
Ant를 사용한 배포 자동화  (0) 2007.10.30
톰캣 이름 변경하기  (2) 2007.10.23
Ctrl + Shift + E  (2) 2007.10.18
top

Write a comment.


XQuared 사용하기

Good Tools : 2007. 11. 5. 15:03


오늘은 몸 상태가 안 좋아서 많이 살펴보진 못했습니다.

일단은 간단한 웹 애플리케이션에 XQuared를 붙여봤습니다.

사용자 삽입 이미지
버튼 이미지파일을 찾지 못해서 이런 화면을 보게 되었습니다.

IE로 보면 조금 다른 화면으로 보입니다.
사용자 삽입 이미지
예제 코드 작성은 XQueared 소스 파일과 동봉되어 있는 예제 코드 중에서 form_and_textarea.html을 참조하였습니다.

해결해야할 문제는 js에서 참조하는 이미지 파일들의 위치인데... js중에 이런 구문을 발견했습니다.

        this.config.imagePathForDefaultToobar = 'img/toolbar/';

이러면, js를 사용하고 있는 곳을 기점으로 이미지 기본 폴더를 설정하게 되는 듯 합니다. 따라서 다음과 같은 패키지 구조에서..

사용자 삽입 이미지
form.jsp에서 위의 js 파일을 사용한다면, post/img/toolbar 폴더 안에 이미지가 들어있어야 합니다. 그런데 이미지를 그렇게 관리하진 않겠죠. 이미지는 위의 폴더 구조처럼 web/img 안에 모두 두고, 그 안에 toolbar 폴더를 생성하고 그 안에 둘 것입니다.

그럼.. js 파일에서 절대경로를 참조하도록 하려면 어떻게 수정해야 할까요.. 글쎄요.. jsp도 약하고, 자바스크립트는 문외한이라 좀 더 살펴봐야 될 것 같습니다. 어지러워서 이만;; 감기야 떠나라...ㅠ.ㅠ

'Good Tools' 카테고리의 다른 글

Trang :: XML로 XSD 작성해 주는 도구  (0) 2007.11.14
XQuared 사용하기 4  (2) 2007.11.14
Eclipse TPTP 맛보기  (4) 2007.11.13
XQuared 사용하기 3  (4) 2007.11.08
XQuared 사용하기 2  (0) 2007.11.07
XQuared 사용하기  (0) 2007.11.05
외장 하드 포맷하기.  (0) 2007.11.03
Ant를 사용한 배포 자동화  (0) 2007.10.30
톰캣 이름 변경하기  (2) 2007.10.23
Ctrl + Shift + E  (2) 2007.10.18
Commonclipse  (0) 2007.10.15
top

Write a comment.