xquared20071108.tar.gz

  • 추가: 링크 걸기 기능이 추가되었습니다. 기본 예제의 툴바를 보시면 링크 버튼을 확인하실 수 있습니다. xq.Editor.handleLink() 함수입니다.
  • 추가: Form을 Dialog로 바꿔주는 FormDialog가 추가되었습니다. 자세한 내용은 FormDialog를 참고하시기 바랍니다.
  • 수정: 우분투 리눅스 판별 코드가 작동하지 않던 문제(오타로 인해)를 수정하였습니다.
  • 수정: 소스 보기 모드에서 블럭 엘리먼트에 간 줄바꿈 문자가 삽입되도록 하여 소스 수정이 용이하도록 하였습니다.
  • 수정: Firefox에서 QuickSearchDialog의 캐럿이 나타나지 않던 버그를 수정하였습니다.
  • 예제: 글을 쓸 때 자동으로 현재 단락의 키워드를 보여주는 기능, QuickSearchDialog를 이용하여 현재 단어를 구글, 위키피디아, 사전 등에서 검색할 수 있게 해주는 기능 등을 구현한 예제를 이곳에서 확인해보실 수 있습니다.
이상입니다~! 버그 신고 및 기능 제안, 코드 패치 등등은 언제나처럼 에쿠스를 이용해주세요. 감사합니다 ^^
신고
글작성 중 위키피디아, 구글 검색하기에 이어서, 글 작성 중 편집 중인 단락의 키워드를 실시간으로 추출해주는 예제를 만들었습니다:



야후의 키워드 API를 활용했습니다. 하루에 5,000번 호출 제약이 있어서 캐싱을 하도록 했는데, 캐시에 메모리 제한이 없어서 아마 오래 실행하고 있으면 메모리 릭이 발생할 것 같습니다. 뭐 Xquared 확장성 테스트용 프로토타입이니깐... ㅎㅎㅎ

http://jania.pe.kr/xwriter 에서 직접 써보실 수 있습니다(만, 한글은 분석이 안된다는. --; )

에, 이번에는 이용한 API는
입니다.
신고
Xquared 기능 확장 예제로도 쓸 겸, 한 번 만들어봤습니다.

http://jania.pe.kr/xwriter

글을 쓰다가 Ctrl+Space를 누르면 위키피디아, 구글, 사전 등에서 현재 단어를 검색하여 오른쪽 패널에 보여줍니다:

사용자 삽입 이미지

한 개 이상의 단어로 검색을 하려면 여러 단어를 선택한 후에 Ctrl+Space를 누르셔도 됩니다. (이걸 어떤 식으로 발전시켜서 어디에 써먹으면 좋을까요? 아이디어 있으면 알려주세요. ^^)

다음은 Xquared 커스터마이징 내역입니다:
  • xed.config.defaultToolbarButtonMap을 변경하여 안쓰이는 툴바 버튼 몇 가지를 제거하였습니다.
  • xed.addShortcuts를 이용하여 Ctrl+Space 등 단축키를 추가하였습니다.
  • xed.addAutocorrections를 이용하여 스프링노트에서 쓰이는 자동 변환 기능들을 추가하였습니다.
  • Ctrl+Space를 눌렀을 때 나오는 메뉴는 xq.Control.QuickSearchDialog 입니다.
추후에 코드와 함께 자세히 설명을 해볼까 합니다.
신고

소스 편집 기능을 추가하고 그 동안 발견된 몇 가지 버그들을 수정한 Xquared 11월 1일 버전을 방금 릴리즈 하였습니다. 다운로드는 xquared20071101_2.tar.gz xquared20071101.tar.gz, 데모는 이곳 입니다.

다음은 추가되거나 수정된 내용입니다:
  • 추 가: 기본적인 HTML 소스 편집 기능이 추가되었습니다. 툴바의 "HTML" 아이콘을 누르면 소스 편집 모드와 WYSIWYG 모드가 토글됩니다. 소스 편집 모드에서 편집된 소스는 저장시 혹은 WYSIWYG 모드로 전환 시 자동으로 Validation 됩니다. (EP님Secrice님께서 제안하신 기능)
  • 추가: Editor.config.changeCursorOnLink 설정을 추가하였습니다. 설정값이 true 이면 링크 위에 마우스를 올렸을 때 마우스 커서 모양이 손가락으로 바뀝니다.
  • 추 가: 합쳐지지 않은 자바스크립트 파일을 HTML에 쉽게 로딩할 수 있도록 동적 로딩 기능을 추가하였습니다. 개발 및 디버깅 시 유용한 기능입니다. script src에 'Xquared.js?load_others=1'로 설정하면 나머지 스크립트를 순서에 맞게 자동으로 읽어옵니다. 단, 실제 사이트에서는 합쳐진 자바스크립트 파일(xquared.js 혹은 xquared_min.js)을 사용하실 것을 권장합니다.
  • 수정: 소스 편집 모드 추가에 따라 Editor.setEditMode의 인자가 true, false에서 'wysiwyg', 'source', 'readonly'로 바뀌었습니다.
  • 수정: Firefox에서 DEL 혹은 BS 키를 누를 때 간혹 현재 편집 위치 이후의 모든 빈 줄이 사라지던 버그를 수정하였습니다.
  • 수정: DEL 키나 BS 키로 빈 엘리먼트를 삭제하려고 할 때 간혹 원하는 동작이 수행되지 않던 버그를 수정하였습니다.
소스 편집 모드에서 수정한 소스는 저장될 때 혹은 WYSIWYG 모드로 전활될 때 자동으로 Validation이 되는데, 예를 들면

    <b>Hello</b> <u>World</u> <script>alert(1);</script>

라고 입력하면

    <p><strong>Hello</strong> <em class="underline">World</em></p>

와 같이 바뀝니다. <p>가 생기는 이유는 <body> 태그 및에 인라인 엘리먼트나 텍스트 노드가 바로 올 수 없기 때문이고, <b>가 <strong>으로 바뀌는 이유는 "더이상의 자세한 설명은 생략한다"이고, <u>가 <em class="underline">으로 바뀌는 이유는, 밑줄(underline)이 강조의 의미를 띄고 있다고 생각했기 때문입니다. 마지막으로 <script>가 통으로 날아가는 이유는 XSS 공격 등을 방지하기 위한 것입니다.

물론 클라이언트에서 필터링을 해봤자 서버에서 한번 더 해주셔야 하긴 합니다. 클라이언트에서 수행되는 모든 코드는 "이미 적의 손으로 넘어간 것으로 간주"해야 하기 때문에 신뢰할 수 없으니까요.

소스 편집 기능이 대충 작동은 하지만 아직 해야할 일이 많이 있습니다. 지금 생각나는 것들은:
  • 소스 편집 모드에서도 툴바 버튼들이 작동하도록
  • 소스가 예쁘게 정돈되어 출력되도록(이를테면 indentation)
  • 소스 편집, WYSIWYG 전환시 캐럿 위치 유지
등이 있습니다. 그러나 당장 급한 것들은 아니라고 판단하여, 내일부터는 링크 관련 작업을 진행할 생각입니다.

PS: IE6,7에서 소스 편집 validation이 수행되지 않던 버그가 있어서 급 수정하였습니다 ^^;
신고

이 블로그에 대하여

이글루스를 쓰다가 2007년 10월 28일부터 티스토리로 옮겨왔다가, 텀블러를 거쳐 마지막엔 결국 직접 제작한 사이트로 이사했습니다:

http://www.ecogwiki.com

신고
< Newer     Older >

티스토리 툴바