현재 위치

홈 ›› 블로그 ›› alee의 블로그

자바스크립트로 구현한 VI

alee의 이미지
글쓴이: alee / 작성시간: 수, 2007/02/07 - 10:29오후

VITA - VI On TextArea
웹 페이지의 TextArea를 VI로 바꿔주는 자바스크립트입니다.

http://alee.anj.kr/misc/vita.html

Bookmarklet을 사용하면 TextArea가 있는 곳이면 어느곳에서든 북마크 클릭만으로
TextArea를 VI처럼 사용할 수 있습니다.

http://kldp.org/node/75270
http://kldp.org/node/78070

에서 언급되었던 바로 그 프로그램인데, 이제 자주 쓰이는 명령 중에서 비교적 간단한 것은 대충
구현이 된 것 같습니다. 테스트를 부탁드립니다. 아직 버그가 매우 많습니다.

금방 테스트할 수 있도록 이곳 댓글창에도 적용이 되도록 하였습니다.
원래의 VI와는 달리 기본적으로 Insert 모드이고, Esc를 눌러야 Normal(Command) 모드로 바뀝니다.
또, Normal 모드에서도 마우스로 TextArea를 클릭하면 자동으로 Insert 모드로 바뀝니다.
이것은 VI를 모르는 사람이 이 스크립트가 적용되어 있는 TextArea에 글을 쓰면서 당황하지 않도록
하기 위해서입니다.

댓글

익명사용자의 이미지

글쓴이: 익명사용자 / 작성시간: 목, 2007/02/08 - 10:06오전

댓글이 없어서 글 답니다 :)

아직 ":"는 첨가되지 않았나 보군요 ? ㅎㅎ

:%s/hello/Hello/g 등등만이라도 구현되면 엄청난 파워를 느낄 수 있겠네요 와우

alee의 이미지

글쓴이: alee / 작성시간: 목, 2007/02/08 - 11:19오전

끝줄 모드는 아직 구현 계획이 없습니다. ㅡㅡ;
자바스크립트 자체가 정규식을 지원하기 때문에 그리 어렵지 않게 가능할 것 같기는 하지만
웹 페이지 textarea에서 코딩을 할 분이 계실 것 같지도 않고, 사실 그리 자주 쓰일만한
기능은 아닌 것 같습니다.
그렇지만 나중에 업데이트가 많이 되고 요청하는 분이 많이 계시면 추가 될 수도 있겠죠.

권순선의 이미지

글쓴이: 권순선 / 작성시간: 목, 2007/02/08 - 10:19오전

멋지군요!

feanor의 이미지

글쓴이: feanor / 작성시간: 목, 2007/02/08 - 10:44오전

d$ 하면 줄 끝까지 지워지지 않고, 다음 키를 쳤을 때 이동이 아니라 삭제가 됩니다.

alee의 이미지

글쓴이: alee / 작성시간: 목, 2007/02/08 - 11:05오전

c, d 명령은 cc, dd 및 아직 단어단위 수정/삭제만 구현되어 있습니다.
그 외에도 구현 안 된 기능이 구현된 기능보다 훨씬 많습니다.
그런데 줄 끝까지 지울땐 보통 D를 사용하지 않나요?

gofeel의 이미지

글쓴이: gofeel / 작성시간: 목, 2007/02/08 - 11:25오전

Maxthon에선 동작하지 않네요...브라우저를 바꿀때가 된건가-_-)>

hey의 이미지

글쓴이: hey / 작성시간: 목, 2007/02/08 - 11:41오전

어딘가에 프로젝트를 올려주세요 ^_^ ;

최신 소스 동향을 볼 수 있고 이슈를 올릴 곳이 있어야 할 것 같습니다.
KLDP.NET에 올려주시던가, 아니면 제가 svn과 trac이 있는 서버를 제공하겠습니다. ^^

May the F/OSS be with you..



----------------------------
May the F/OSS be with you..


alee의 이미지

글쓴이: alee / 작성시간: 목, 2007/02/08 - 1:16오후

예. 그러긴 해야 할 것 같은데 제가 이런 일을 해 본 적이 없어서
무엇을 어떻게 해야 할지 모르겠습니다.
아무래도 개인적으로 신세를 지는 것 보다는 KLDP.net이 편할 것 같은데,
KLDP.net에 프로젝트를 개설하려면 순선님께 신청하면 되는건가요?

또, 프로젝트 이름도 일단 VI on TextArea 에서 대문자를 따서 가칭 VITA로
붙이긴 했는데, 혹시 더 좋은 이름을 알려주시면 바꾸도록 하겠습니다.
개인적으로 VITA 외에 VJ(Vi on Javascript), WI(Web vI) 등도 생각해 보았는데
VITA가 가장 직관적이고 평범해 보여서 일단 VITA로 붙였습니다.
모씨가 광고하는 ****500과는 아무 관계가 없습니다.

세이군의 이미지

글쓴이: 세이군 / 작성시간: 목, 2007/02/08 - 1:17오후

자바스크립트로 구현한 VI하고 자바스크립트로 구현한 IME를 같이 관리하시면 될 것 같은데요.

KLDP.Net에 프로젝트 개설은 '개인 페이지-My Page'에서 '프로젝트 등록하기-Register Project'를 선택하신후에 내용을 입력하여 주시면 됩니다.

한 걸음 더 가까이

alee의 이미지

글쓴이: alee / 작성시간: 목, 2007/02/08 - 2:26오후

감사합니다.
그런데 프로젝트 등록을 하려고 보니 CVS와 SVN중에서 선택을 하도록 되어 있는데
어느 것이 더 좋을까요? 둘 다 사용해 본 적이 없어서 어느 것을 선택해야 할지 모르겠습니다.
우선 hey님과 행복한고니님께서 참여 의사를 주셨으니 둘 중 한 가지를 추천해 주세요.

hey의 이미지

글쓴이: hey / 작성시간: 목, 2007/02/08 - 5:20오후

전 개인적으로 svn 추천합니다.

May the F/OSS be with you..



----------------------------
May the F/OSS be with you..


김정균의 이미지

글쓴이: 김정균 / 작성시간: 목, 2007/02/08 - 12:09오후

yy 와 u 를 구현해 주세요. 가장 많이 사용하는 키인데.. T.T

alee의 이미지

글쓴이: alee / 작성시간: 목, 2007/02/08 - 1:13오후

yy는 큰 문제가 없을 듯 한데 vim에서 지원하는 무한 단계 u를 자바스크립트로
구현하자면 도대체 어떻게 하는게 좋을까요?
역시 무한단계는 포기하고 original vi처럼 한단계 되돌리기만 지원하는 수 밖에 없을까요?

김정균의 이미지

글쓴이: 김정균 / 작성시간: 목, 2007/02/08 - 1:28오후

배열을 이용해서 한 10개 정도의 배열만 가지고 있으면 되지 않을까요?

alee의 이미지

글쓴이: alee / 작성시간: 목, 2007/02/08 - 2:19오후

그런데 무엇을 저장해야 하는가가 문제입니다.
업데이트가 있을 때 마다 전체 텍스트 내용을 다 매번 새로 저장을 하는 방법은 글이 길어지면
좀 무리가 있을 것 같습니다.

다음으로 생각할 수 있는게 삭제한 내용과 커서 위치, redo까지 고려하려면 삭제한 내용과
함께 추가된 내용까지 저장을 해야하는데, 현재 속도 문제 때문에 커서의 절대 위치를 구하는 대신
상대 위치만을 가지고 작동하도록 구현이 되어 있기 때문에 현재의 구현으로는 매번 업데이트
가 있을 때 마다 커서의 위치를 알아내려면 속도를 희생해야 합니다.

제가 테스트 해 본 바로는 현재 IE의 경우에는 500줄 이상의 텍스트에서도 문제 없이 작동하지만
FF에서는 텍스트의 길이가 100줄 이상 넘어갈 경우 커서 이동 속도가 좀 떨어집니다.
따라서 여기에서 더 속도의 희생을 감안하기는 어렵습니다.

hey의 이미지

글쓴이: hey / 작성시간: 목, 2007/02/08 - 5:23오후

커서 이동할 땐 그냥 두고 편집이 일어날 때만 절대 위치로 저장하면 안 될까요? 3~4 단계만 저장이 되도 좋겠습니다.

May the F/OSS be with you..



----------------------------
May the F/OSS be with you..


nangchang의 이미지

글쓴이: nangchang / 작성시간: 목, 2007/02/08 - 12:34오후

이거 정말 멋진데요 +_+

그런데 커맨드 모드로 들어가서 한글 입력상태로

키를 누르면 바로 입력모드로 빠지면서 커서 위치의

글자가 지워져 버리네요..

vi 쓸때도 간혹 한글 입력하다가 커맨드 모드로 들어가서

한영전환을 안하고 키를 누르곤 하는데...

이런건 어떻게 처리가 안되나요?

zienie의 이미지

글쓴이: zienie / 작성시간: 목, 2007/02/08 - 3:45오후

일단 대단히 멋진 작업에 박수를 드리고 싶습니다.

커서 이동 같은게 잘 된다는데 의미를 두고 싶네요.

점점 멋진 모습으로 바뀌길 기대 하겠습니다.

페이지 이동을 하려고 Ctrl+F 를 눌렀더니 찾기 창이 번쩍 뜨는게 좀 아쉽긴 하지만요.. ^^

##########################################################
넘어지는건 아직 괜찮다.
하지만 넘어질때마다 무언가를 주워서 일어나자.

##########################################################
넘어지는건 아직 괜찮다.
하지만 넘어질때마다 무언가를 주워서 일어나자.

jg의 이미지

글쓴이: jg / 작성시간: 목, 2007/02/08 - 4:48오후

normal mode로 들어간뒤 마우스 등으로 선택영역을 바꾸면
이동시에 지워지거나 하는 문제가 생깁니다.
이동하는 키일 경우 viNormalMode 를 한번씩 더 실행해주니 해결되긴합니다만
속도저하가 심각한지 제 컴퓨터에서는 느낄 수가 없군요.

그밖에 몇가지 (고칠 수 있는) 버그가 보이네요.
등록하시면 금세 고쳐지겠지요?

$Myoungjin_JEON=@@=qw^rekcaH lreP rehtonA tsuJ^;$|++;{$i=$like=pop@@;unshift@@,$i;$~=18-length$i;print"\r[","~"x abs,(scalar reverse$i),"~"x($~-abs),"]"and select$good,$day,$mate,1/$~for 0..$~,-$~+1..-1;redo}

alee의 이미지

글쓴이: alee / 작성시간: 목, 2007/02/08 - 5:23오후

현재 계획은 선택 영역이 있으면 자동으로 Visual 모드로 인식되도록 하는 것입니다.
그런데 언제 Visual 모드까지 구현을 할 수 있을지 모르겠습니다.

익명사용자의 이미지

글쓴이: 익명사용자 / 작성시간: 금, 2007/02/09 - 3:57오전

아.. 너무 멋져요.
파이어팍스 애드온으로도 있으면 참 좋을 것 같습니다.

hey의 이미지

글쓴이: hey / 작성시간: 금, 2007/02/09 - 9:47오전

북마크릿으로 만들어서 제 위키를 편집할 때 쓰고 있습니다.

제일 시급한게 yy 입니다 ^^
그리고 생각해봤는데 u가 들어오면 C-z를 입력해주면 안되려나요? 커서 위치가 깨질 위험이 있긴 하지만요. 커서는 대충 아무 데나 가도 상관없고 대신 normal 모드로 잘 돌아오게만 해주면 다단 undo도 가능할 듯 합니다.

May the F/OSS be with you..



----------------------------
May the F/OSS be with you..


hey의 이미지

글쓴이: hey / 작성시간: 금, 2007/02/09 - 9:56오전

r도 필요합니다 ^^;

May the F/OSS be with you..



----------------------------
May the F/OSS be with you..


alee의 이미지

글쓴이: alee / 작성시간: 금, 2007/02/09 - 10:54오전

r, yy 등은 저도 필요한데 시간을 못 내고 있습니다···
라기 보다는 며칠 계속 여가시간마다 매달렸더니 잠시 좀 쉬어야 할 것 같습니다.
일단 함수 설명은 주석으로 달아 놓았고, 저는 며칠 소스를 안 건드릴 예정이니
가져다가 직접 구현을 해 주셔도 됩니다. :)

또 한 가지 고쳐야 할 부분은, viReplaceText() 함수에서 IE의 경우

s = document.selection.createRange()
viBuffer = s.text

이런식으로 선택된 영역을 버퍼로 복사해 오는데, s.text의 시작이나 끝 부분에 '\n'이 있을
경우 이게 잘려 나갑니다. 그래서 줄단위로 잘라낸 다음 P로 붙여 넣을 경우 줄바꿈 문자가
사라지는 문제가 있습니다. 이걸 어떻게 해결해야 할까 고민을 좀 해봤는데, 복사하기 전에
맨 앞과 맨 뒤에 스페이스 문자를 하나씩 삽입하고, 복사한 후 다시 잘라내는 것 밖에 방법이
없을 것 같습니다.

hey의 이미지

글쓴이: hey / 작성시간: 금, 2007/02/09 - 12:42오후

알겠습니다. 좀 들여다 보겠습니다. 대신 천천히 쉬세요 ^^ ;

May the F/OSS be with you..



----------------------------
May the F/OSS be with you..


alee의 이미지

글쓴이: alee / 작성시간: 금, 2007/02/09 - 1:59오후

감사합니다. :)
코드는 그대로이지만 주석을 약간 업데이트 했습니다. 참고해 주세요.

only2sea의 이미지

글쓴이: only2sea / 작성시간: 토, 2007/02/10 - 12:51오전

일단 저는 기본 모드가 삽입 모드인 것과 마우스로 클릭을 한 경우에 삽입 모드로 바뀌는 것이 가장 마음에 듭니다. 즉, 기존 사용자를 당황시키지 않으면서 아는 사람은 편하게 쓸 수 있는 것이지요.

오페라를 웹 브라우저로 쓰고 있는데 오페라에서는 유닉스용 단축키로 설정하면 이맥스 모드로 동작합니다. 아마 리눅스용 오페라는 기본이 유닉스용 단축키였던 것 같습니다. Alt키와 함께 누르는 것은 안 되지만 제한적이나마 Ctrl과 함께 누를 수 있는 F, B, P, N, A, E, D등이 동작합니다.

문제가 있다면 텍스트 박스에서 전체 선택을 Ctrl+A라고 생각하고 누르면 선택이 안 된다거나, 찾기를 하고 싶어서 Ctrl+F를 누르면 찾아지지 않고 오른쪽으로 한칸 이동한다거나 하는 문제가 있습니다. 게다가 Ctrl+E를 누르려다가 잘못 눌러서 Ctrl+R을 누르면 이것은 또 새로고침으로 인식이 되어서 새로 고쳐져 버립니다. (아주 멍하게 됩니다.)

그러나 alee님의 자바스크립트는 ESC 키를 누르면 모드가 바뀌는 형식이기 때문에 다른 사용과는 충돌이 일어날 가능성이 적을 것 같습니다. 원래 텍스트 박스에서 ESC 키를 누르는 경우가 거의 없으니까요.

++이전에 자바스크립트로 만드신 ahim은 오페라에서 한글 입력기 설정이 잘 안 되던 시기에 사용자 스크립트에 추가해서 유용하게 써 먹었습니다. :)

아직 오페라에서는 잘 동작하지 않지만, 원래 자바스크립트를 모든 브라우저에서 잘 동작하게 하는 것도 쉬운 일이 아닌 것으로 알고 있습니다. 일단 파폭에서라도 완성도가 높아지고 나면 이런 일에 신경을 쓰시는 것이 좋겠지요. 프로젝트 등록되면 소스 보고 개선점을 발견하면 패치도 올려보고 하겠습니다. :)

아마록에서 가사와 앨범 표지를... http://kldp.net/projects/amarok-script/ 블로그: http://turtleforward.blogspot.com

블로그: http://turtleforward.blogspot.com

alee의 이미지

글쓴이: alee / 작성시간: 월, 2007/02/12 - 1:32오후

주말 동안 시간이 좀 나서 yy, r, R, f, F 를 구현했습니다.
그런데 KLDP.net에 프로젝트를 등록했으니 이제 SVN 사용법부터 배워야 할 것 같은데
게을러서 큰일입니다. ㅡㅡ;

hey의 이미지

글쓴이: hey / 작성시간: 목, 2007/02/15 - 2:26오전

비주얼 모드 패치를 만들어 봤습니다.
http://kldp.net/tracker/index.php?func=detail&aid=301644&group_id=1031&atid=352517

보실지 모르겠네요.

May the F/OSS be with you..



----------------------------
May the F/OSS be with you..


alee의 이미지

글쓴이: alee / 작성시간: 금, 2007/02/16 - 9:24오전

Visual 모드에서 사용 가능한 명령이 꽤 늘어났습니다.
h,j,k,l,b,e,w,B,E,W,0,$로 선택 영역 변경이 가능하고,
선택 상태에서 c,d,s,x,y 명령이 사용 가능합니다.

only2sea의 이미지

글쓴이: only2sea / 작성시간: 금, 2007/02/16 - 9:32오전

정말 점점 기능이 늘어나네요. :) 화이팅입니다.

아마록에서 가사와 앨범 표지를... http://kldp.net/projects/amarok-script/ 블로그: http://turtleforward.blogspot.com

블로그: http://turtleforward.blogspot.com

alee의 이미지

글쓴이: alee / 작성시간: 일, 2007/11/11 - 9:57오전

GreaseMonkey 지원을 추가했습니다.
GreaseMonkey 확장 기능을 설치한 다음 아래 링크를 클릭하면 설치가 됩니다.
http://alee.anj.kr/misc/vita.user.js
이제 TextArea에 글을 쓸 때에도 글을 편하게 쓰세요. :)

wkpark의 이미지

글쓴이: wkpark / 작성시간: 일, 2007/11/11 - 1:32오전

끝줄모드만 급하게 구현해보았습니다~

:100 # 100 라인으로 감
:0 # 라인 0으로 감
:% :$ # 끝으로 감
:%s/Hellow/Hello/g
:1,100s/Hello/hello/g

등등이 됩니다.

그밖에 방향키도 듣게 하고, /문자열 ?문자열 명령도 되게 하고,
재미로 모질라 firefox에서만 되는 beep음도 추가하였습니다~

댓글 첨부 파일: 
첨부파일 크기
Plain text icon vita.js_.txt33.2 KB

온갖 참된 삶은 만남이다 --Martin Buber

alee의 이미지

글쓴이: alee / 작성시간: 일, 2007/11/11 - 1:38오후

프로젝트 가입하셔서 commit 해주세요. :)

http://kldp.net/projects/vita/

김일영의 이미지

글쓴이: 김일영 / 작성시간: 일, 2007/11/11 - 11:51오전

아이디어도 대단하시고(vi라니... 전 그런게 TextArea에서 가능하리라곤 생각도 못했는데)
한마디로 굿~굿굿굿!입니다

루키의 이미지

글쓴이: 루키 / 작성시간: 일, 2007/11/11 - 7:15오후

java script로 구현하셨다니 재밌는 생각을 하셨네요..
리눅스 에디터의 반란이라 해야하나..?
오랜만에 멋진 작품 보고 갑니다.

댓글 달기

텍스트 포맷에 대한 자세한 정보

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.