http://jania.pe.kr/xtx


요런 놈을 하나 만들어봤습니다. 스크립트 두 줄만 써주면 보통 TEXTAREA에 몇 가지 유용한 단축키들이 추가됩니다.
  • Tab, Shift+Tab 으로 들여쓰기, 내어쓰기
  • Alt+Up/Down 으로 줄단위 이동
  • Ctrl+Alt+Up/Down 으로 줄 복사
  • Ctrl+D 는 현재 줄 삭제

짬나면 자동완성이나 템플릿 같은 기능들을 좀 추가해볼 생각입니다. 괜찮다 싶으면 Xquared소스 편집기에도 붙여볼 생각이예요. 에 물론 Plugin 형식으로요. 이것저것 다 붙이면 무거워지니깐.

(이전 포스트에서 3시간 작업하다가 날려먹었다는 코드가 이거였어요 --;)
신고
립트음. 잠시 블로그를 쉬는 동안 몇 번의 릴리즈가 있었는데 적지를 못했습니다. UI가 매우 후지긴 하지만 일단...
  • WYSIWYG 편집 중에 동영상을 재생할 수 있고, Copy&Paste, Drag&Drop 등이 가능합니다.
  • Google Gadget 등을 삽입할 수 있습니다. Gadget도 마찬가지로 Copy&Paste 등이 가능합니다.
이제 조금만 더 나아가면 Microformat을 삽입하고 편집할 수 있게 될 것 같습니다. 음. 그 사이에 대략 다음과 같은 일들이 있었습니다:

2008/04/23

xquared_client_20080423.tar.gz

  • 개선: 소스 코드의 구조를 전체적으로 수정하였습니다. 패키지 개념을 도입하고 모듈 간 의존성을 낮추어 동영상 등 부가적인 기능을 Plugin 형태로 분리하였습니다.
  • 수정: TEXTAREA가 아닌 엘리먼트를 Xquared와 연결할 수 없도록 제한하였습니다.
  • 추가: 마우스로 편집기 하단을 드래그하여 크기를 조절할 수 있게 해주는 플러그인(EditorResizePlugin.js)이 추가되었습니다. examples 디렉터리의 resize.html을 참고하세요. (zenguy님과 지나감님이 제안하신 기능입니다. 감사합니다.)
  • 추가: 야후! 비디오를 삽입할 수 있도록 하였습니다.
  • 추가: 새 버전의 판도라TV 플래이어를 삽입할 수 있도록 하였습니다.
  • 수정: 동영상 삽입 시 URL을 입력하지 못하도록 제한하였습니다. OBJECT 혹은 EMBED만 사용 가능합니다.
  • 수정: 편집 모드 BODY에 margin과 padding이 없을 때 동영상이 재생되지 않던 문제를 수정하였습니다.
  • 수정: 잘라내기(Ctrl+X)로 동영상을 제거하는 경우 화면에서 동영상이 사라지지 않던 문제를 수정하였습니다.


2008/03/27

xquared_client_20080327.tar.gz

  • 추가: 다음 tv팟 (http://tvpot.daum.net), 판도라TV(http://www.pandora.tv), 엠엔케스트(http://mncast.com) 동영상을 추가할 수 있게 되었습니다. 툴바의 동영상 버튼 The image “http://jania.pe.kr/xquared/client/images/toolbar/movie.gif” cannot be displayed, because it contains errors. 을 누르세요.
  • 추가: 동영상 삽입 시 URL 대신 OBJECT 코드를 입력해도 인식할 수 있도록 하였습니다.
  • 추가: IFRAME을 넣을 수 있습니다.
  • 추가: config.autoFocusOnInit을 true로 설정하면 에디터가 실행될 때 자동으로 포커스를 갖도록 할 수 있습니다.
  • 개선: 배포판에 API 문서를 포함시켰습니다. docs 디렉터리를 참고하세요.
  • 개선: Mac 용 기본 단축키 몇 가지를 추가하였습니다. Meta+B, Meta+I, Meta+K, Meta+U가 각각 강한 강조, 강조, 취소선, 밑줄을 실행합니다. 기존 단축키인 Ctrl+B, Ctrl+I, Ctrl+K, Ctrl+U도 그대로 유지됩니다. 단축키를 제거하거나 추가하는 방법은 기능 확장하기를 참고해주세요.
  • 수정: IE에서 HTTPS 페이지 상에 Xquared를 띄울 경우 보안 경고가 나오던 문제를 수정하였습니다.


2008/03/20

xquared_client_20080320.tar.gz

  • 개선: 배포 파일의 구조를 크게 수정하였습니다. 자세한 내용은 변경된 튜토리얼을 참고하세요.
  • 개선: xq.Editor와 xq.Toolbar를 분리하였습니다.
  • 수정: 동영상이 다이얼로그를 통해서는 삽입되지 않고, HTML 소스를 직접 수정하는 방법으로만 삽입될 수 있었던 버그를 수정하였습니다.
  • 수정: FF와 IE에서 한 문서에 여러 개의 동영상이 있는 경우 첫번째 동영상만 제대로 로딩되는 문제를 수정하였습니다.
  • 수정: Safari에서 줄바꿈 및 블럭 단위 이동 등이 제대로 수행되지 않던 문제를 수정하였습니다.
  • 수정: FF에서 초기에 xq.Editor.focus()나 xq.RichDom.focus()를 호출해도 포커스가 잡히지 않던 문제를 수정하였습니다.
  • 수정: IE6/7에서 CSS를 수정하여 소스 편집 창에 border를 준 경우 브라우저가 멈추는 버그를 수정하였습니다. (gEEkInsIdE님이 알려주신 문제입니다. 감사합니다.)
  • 수정: 글자 크기 및 글꼴 메뉴에서 특정 항목이 아닌 제목 부분을 선택하면 에러가 발생하던 문제를 수정하였습니다. (zenguy님이 알려주신 문제입니다. 감사합니다.)
  • 수정: FF에서  HTML 속성이 '=' 문자로 끝나는 경우(예를 들면 <a href='http://x.com?y='>), Validator가 오작동하는 문제를 수정하였습니다.
  • 수정: FF에서 한글을 입력하던 중간에 편집기에서 포커스가 사라지면 동일한 글자가 하나 더 생기던 문제를 수정하였습니다.
  • 수정: FF에서 빈 블럭을 위/아래로 옮길 때 캐럿이 사라지는 문제를 수정하였습니다.
  • 수정: 긴 문서에서 다이얼로그를 창의 중앙(centerOfWindow)에 띄울 때 스크롤바의 위치가 계산되지 않아서 위치가 틀어지던 문제를 수정하였습니다. (zenguy님이 알려주신 문제입니다. 감사합니다.)


2008/03/14

xquared20080314.tar.gz

  • 추 가: YouTube 동영상을 삽입하는 기능이 추가되었습니다. WYSIWYG 편집 중에도 재생이 가능합니다. 툴바의 Movie 아이콘을 클릭하면 새 동영상을 삽입할 수 있습니다. 곧 다음 TVPot 등 다른 동영상들도 추가할 수 있도록 할 예정입니다.
  • 추가: Xquared의 기능을 더 쉽게 확장할 수 있도록 하기 위해 플러그인 API를 추가했습니다.
  • 개 선: Validation 로직이 개선되었습니다. 태그 별로 허용되는 속성 집합을 정의할 수 있게 되었습니다. 이에 따라 Validation 설정 변경 로직이 바뀌었습니다. 기존에 Validation 설정을 수정하여 사용하고 계셨다면 설정하기 페이지를 참고하여 해당 코드를 고쳐주시기 바랍니다.
  • 개선: 초기 로딩 속도 및 편집 모드 전환 속도가 향상되었습니다.
  • 수정: 중첩된 리스트 편집 중 DEL, BS 누를 때 리스트가 엉키는 문제 일부를 수정하였습니다.
  • 수정: IE6,7 에서 자동으로 생성되는 공백 문자가 제거되지 않던 상황 일부를 수정하였습니다.
  • 수정: xq.Editor.onEditorElementChanged에 인자를 추가하였습니다(editor instance).
  • 수정: 서식 제거(removeFormat)를 할 때 링크는 삭제되지 않도록 하였습니다.


2008/03/06

xquared20080306.tar.gz

  • 개선: Windows 및 Mac용 Safari에서 일부 단축키가 인식되지 않던 문제를 수정하였습니다.
  • 개선: Windows 및 Mac용 Safari에서 Validation/Invalidation이 제대로 되지 않던 문제를 수정하였습니다.
  • 개선: 큰 문서를 읽어올 때의 성능이 약간 향상 되었습니다. (자주 쓰는 Regular Expression을 미리 컴파일하도록 하였습니다)
  • 수정: Firefox에서 xq.RichDom.collectStructureAndStyle()이 간혹 오작동하여 툴바 갱신 중 예외가 발생하는 문제를 수정하였습니다.
  • 수정: xq.RichDom.hasFocus() 함수가 제대로 작동하지 않던 문제를 수정하였습니다.
  • 수정: prototype.js 가 xquared.js 보다 먼저 로딩될 경우에 발생하는 문제를 수정하였습니다.


2008/03/03

xquared20080303.tar.gz



신고

xquared20071205.tar.gz

  • 소식: 자유게시판질문답변 게시판이 신설되었습니다.
  • 수정: Prototype.js 라이브러리를 사용하지 않도록 수정하였습니다. 이제 jQuery나 MooTools 등을 쓰는 사이트에서도 Xquared를 수정 없이 바로 쓰실 수 있습니다.
  • 수정: IE6에서 페이지 전환시 발생하던 메모리 릭을 모두 제거하였습니다.
  • 수정: 각종 다이얼로그가 편집창 가운데에 제대로 나오지 않던 문제를 수정하였습니다. (haneul님이 패치를 보내주셨습니다. 감사합니다)
이번 버전은 기능 추가는 없습니다.

대신 IE6 에서 발생하던 메모리릭을 완전히 제거하였고, Prototype.js에 대한 의존성을 없앴습니다. 따라서 Prototype.js 을 쓰지 않는 사이트나, jQuery, MooTools 등을 쓰는 사이트 등에서도 쉽게 Xquared를 붙이실 수 있게 되었습니다.

감사합니다!
신고
  • 이런 UI 가이드라인은 공부에 큰 도움이 되는 소스입니다. 정보 시각화, 지각 심리학, 공학 심리학 등 각종 이론서들에서 설명하고 있는 내용들이 전문가들에 의해 어떻게 실용화/구체화되었는지 비판적으로 검토해볼 수 있으니까요.

    WIndows Vista, Mac OS, OLPC 등의 UI Guideline은 이곳을 참고하세요.
  • 라이프스트리밍이란 한 마디로 삶의 흐름을 몽땅 기록하는 것입니다. MS 연구소 등에서 예전부터 관심을 보이고 있는 분야입니다. Onaswarm은 그룹을 위한 라이프스트리밍 서비스라는군요.
  • Xquared와 제로보드의 에디터 컴포넌트 연동. 이모티콘, 구글지도 넣기 등이 가능합니다. ㄷㄷㄷ
  • '국민에게 걱정끼쳐드려 죄송하다'고 말한 후 '회사는 소유할 수도 있다'고 말하며 BBK와의 연관성을 간접적으로 시사하는 발언을 했다. ... 오늘도 열심히 활약 중인 만순씨.
신고
구글 문법 하일라이터(Syntax Highlighter)를 패치하여 스프링노트 코드 지원하기

에 소개된 코드를 조금 수정하여, 스프링노트에서 삽입한 소스 코드를 수정 없이 사용할 수 있도록 하였습니다.

스프링노트 편집기에는 아직 속성(attribute) 편집 기능이 없어서 언어를 명시할 수가 없는데요, 대충 언어를 짐작(guessing)하는 코드를 만들었더니 대략 잘 돌아갑니다:
  1. alert('1');
  2. for(var i = 0; i < x.length; i++) {
  3. // ...
  4. }
언어는 일단 C 계열(C, C++, C#, Java, Javascript 등) 언어를 먼저 판별한 후 XML 계열(XML, HTML 등)인지 보고, 그것도 아닌 것 같으면 무조건 루비( -- ;; )로 가정하도록 만들었습니다. ㅎㅎ

참고로, 스프링노트미투데이 매시업인 슬러거에도 동일한 코드를 붙였습니다. ^^

이 글은 스프링노트에서 작성할 뻔 했습니다.
신고
  • WordPress에 이어 제로보드 XE에서도 Xquared를 쓰실 수 있습니다. 짝짝짝.
  • "It will be very hard for politicians and governments to keep secrets."

    저는 지금 "코드: 사이버공간의 법이론"이라는 책을 읽고 있는데, 이 책에 의하면 코드의 규제를 통해 효과적으로 사이버 공간을 통제하는 것이 가능합니다. 저도 그렇게 생각합니다. 물론 그것이 좋다/나쁘다 하는 가치판단을 하는 것은 아니고, 그냥 가능할 것이라는 얘기입니다. ^^;
  • JSONP 등의 트릭을 쓰지 않고도 안전하게 Cross Domain 요청을 보낼 수 있는 방법에 대한 새로운 제안입니다. Flash의 보안 정책과 유사한 방식이군요.
  • Eye tracking 연구를 통해 얻어진 주요 교훈 몇 가지를 정리한 짧은 목록 입니다. 몇 가지 직관과 다른 의외의 결과들도 보입니다. 한번 가볍게 훑어봅시다.
  • 웹 접근성 문제에 관심이 있는 분이라면 꼭 읽어보셔야 할 글입니다. 구체적인 시나리오 상에서 정확히 어떠한 점이 문제가 되고 있는지 보여주고 있습니다.
  • 이거 재미있겠는데요? ㅋㅋ 제목은 또 얼마나 섹시한가요.
  • 저도 베타테스터 당첨 되었답니다. 오픈마루 사람도 테스터 신청을 해야하는 까칠함. ㅎㅎ 이런 까칠함은 좋단 말이죠. 아, 메일 보내주시면 초대해드립니다!
  • "순도 100% 개발자는 굶어죽기 딱 좋은 것 같다. 순도 100% 과학자는 연구비 못따서 연구 못하는 거랑 비슷." ㄷㄷㄷ 가슴을 후벼파는 한 문장(아니 두 문장) 입니다.
신고

Xquared 20071121 버전이 릴리즈 되었습니다.

xquared20071121.tar.gz

  • 소식: 오픈마루 프로젝트 버그 신고 센터인 ECUS의 글 편집기에 Xquared가 적용되었습니다.
  • 소식: 智熏님께서 WordPress 용 Xquared 플러그인을 만들어주셨습니다.
  • 추가: 글자색 및 배경색을 선택할 수 있도록 기본적인 Dialog가 추가 되었습니다.
  • 수정: 블럭 단위 엘리먼트인 HR을 인라인 단위 엘리먼트로 취급하여 발생하던 여러가지 문제들을 수정하였습니다.
  • 수정: 소스 편집 모드에서 툴바가 비활성화 되도록 수정하였습니다. (Secrice님의 제안)
  • 수정: 클래스 정의 및 상속 관련 코드를 Prototype 1.6에 맞도록 수정하였습니다.
  • 수정: FF에서 여러 인라인 엘리먼트가 겹쳐 있을 때 문단 끝에 줄바꿈(br) 태그가 저절로 삽입되던 문제를 수정하였습니다.
  • 수정: 각종 다이얼로그가 화면 가운데가 아닌 편집창 가운데에 나오도록  수정하였습니다.
  • 수정: xq.Editor.handleLink 에서 부적절하게 전역 변수에 의존하고 있는 문제를 수정하였습니다. (haneul님이 알려주신 버그)
  • 수정: xq.Editor.focus() 를 호출하지 않아도 저절로 초기에 focus가 주어지던 문제를 수정하였습니다.
  • 수정: UNDO/REDO가 잘 되지 않던 문제를 수정하였습니다.
  • 수정: 사파리(Webkit)에서 편집 모드가 실행되지 않던 문제를 수정하였습니다.
  • 수정: IE에서 줄이 들썩 거리던 CSS 문제를 수정하였습니다. xq_content.css 를 다시 복사해주시기 바랍니다.
  • 수정: FF에서 간혹 빈 줄이 마구 삽입되던 문제를 수정하였습니다.
  • 수정: IE에서 테이블 가로폭이 너무 길어 스크롤바가 생기던 문제를 수정하였습니다.
다이얼로그를 추가하긴 했는데, 디자인 작업 없이 제가 혼자 막 만들어서( --; ) 상당히 보기 흉한 상태입니다. ㅎㅎ 그래도 없는 것 보다는 괜찮겠다 싶어서 일단 릴리즈 하기로 결정하였습니다.

Windows용 Safari 정식 버전 출시 임박, Firefox 3.0 beta1 발표, 다음 Power Editor 발표, TinyMCE 새 버전 발표 등 뭔가 정신 없이 진행되고 있는데... Xquared도 더욱 빨리 달려야겠습니다. ㄷㄷㄷ
신고
  • FF 3.0 Beta1이 나왔습니다. 하지만 아직 여러가지 문제들이 있다고 하는군요. Gecko가 바뀌었으니 Xquared도 호환성 테스트를 해봐야겠습니요. FCKEditor는 벌써 테스트를 끝냈다고 합니다. 엉엉 ㅜㅠ
  • VS2008과 함께 발표된 JScript 8.0 소식.
  • 오호 이런 좋은 것이. 자바스크립트는 다른 리소스와 달리 sequential하게 로딩되기 때문에 웹페이지를 느리게 만드는 원인 중 하나죠.

    따라서 자주 쓰이는 라이브러리 등을 한 서버에 두면 서로서로 이득을 본다는 그런 얘기.
  • htmlfile을 이용한 IE HTTP 스트리밍. iframe 내부에는 배열만 있고, 밖에서 setInterval로 채크한다는 아이디어. 괜찮아 보입니다.
  • HTML 4의 태그 91개 중 5 분 안에 몇 개나 열거할 수 있을까요? 저는 76개가 한계. 다시 했더니 오히려 75개라는. ㅎㅎㅎ
  • 이미지를 하나도 안 쓰고 만든 UI 라이브러리. MooTools는 항상 애착이 간단 말이죠 ㅋㅋ 뭐 꼭 JSSpec 때문은 아니겠지만 험험..
  • 좋은 글입니다. 결국 기본에 충실하게 하고 요행을 바라지 않는 것이 좋다는 얘기겠죠.

    제 블로그도 컨텐츠 영역을 (보기 편한) 연노랑으로 하고, 광고 영역을 박스로 둘러쳤으며, 모든 링크는 동일한 색(파란색)으로 표현해 놓았으니 실수로 클릭이 일어날 일은 거의 없을 것 같아요. 다만 한가지 우려는 키워드 광고와 태그가 딱 붙이 있다는 점인데, 이 부분만 어떻게 개선하면 되겠습니다. ㅋ
  • HTML V5와 XHTML V2의 철학 및 역사를 비교한 짧은 글입니다. 둘 다 아직 공식적인 표준은 아니지만 미리미리 봐두면 좋겠습니다. :-)
신고
신고
xquared20071114.tar.gz

Xquared 화면

  • 추가: Prototype.js를 1.5.1에서 1.6으로 업그래이드 하였습니다.
  • 추가: 본문 CSS를 갱신하였습니다. examples 디렉터리의 css 및 img 폴더의 내용을 다시 복사하시면 새 스타일이 적용됩니다. 새 본문은 데모 사이트를 참고하세요.
  • 추가: 글 작성시 자동으로 현재 작성 중인 문단에서 핵심 단어를 추출해주는 XWriter의 소스 코드를 살펴보세요. Xquared의 확장점을 활용하는 다양한 방법을 보실 수 있습니다.
  • 추가: Validator를 사용자 정의할 수 있도록 하였습니다. 허용되는 태그 목록과 허용되는 속성 목록을 쉽게 재정의할 수 있습니다. 설정하기의 allowedTags 및 allowedAttributes를 참고하세요. 디자인은 jfactory님, CSS 작업은 wpeofh님이 해주셨습니다. :)
  • 추가: xq.majorVerion 및 xq.minorVersion 을 추가하였습니다. (ias님의 제안)
  • 수정: xq_ui.css 가 Rails가 제공하는 CSS와 충돌하는 문제를 수정하였습니다. (ias님이 알려주신 버그)
  • 수정: IE6, IE7에서 마우스로 본문을 드래그하여 선택하는 중 링크 위를 지나갈 때 선택이 사라지는 문제를 수정하였습니다.
  • 수정: FF에서 setEditMode를 처음 호출하면서 'wysiwyg'이 아니라 'source'를 인자로 넘길 경우 예외가 발생하던 문제를 수정하였습니다. (ias님이 알려주신 버그)
  • 수정: xq.Editor.config.imagePathForDefaultToobar의 값이 xq_ui.css의 규칙에 지정된 이미지 경로를 덮어쓰도록 하였습니다. (ias님의 제안)
  • 수정: 기본 툴바의 구분자 이미지(toolbarSeparator.gif)를 투명 GIF로 변경하였습니다.
  • 수정: IE에서 WYSIWYG 편집기 내부만 새로고침을 할 수 있도록 허용되는 문제를 수정하였습니다. (하하님께서 알려주신 버그)
  • 수정: 본문의 제일 첫 줄의 시작 부분에서 엔터키를 치면 빈 줄이 현재 문장 위에 삽입되도록 하였습니다(MS-Word와 비슷하게 작동하도록).
  • 수정: Undo/Redo 문제를 일부 수정하였습니다.
  • 수정: xq.Editor.handleLink 에서 "xed"라는 전역 변수를 가정하고 코딩된 부분을 수정하였습니다.
버그 신고, 기능 제안이 점차 활발하게 올라오고 있고, Xquared를 적용한, 혹은 적용할 예정인 개인 사이트 및 프로젝트가 점차 늘고 있습니다. (스프링노트에도 현재 진행중인 성능 개선 작업이 마무리되면 최신 버전의 Xquared가 적용될 예정입니다)

계속 달리도록 하겠습니다 :-)
신고
< Newer     Older >

티스토리 툴바