현재 위치

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

자바스크립트로 Vi를 만든다면?

alee의 이미지
글쓴이: alee / 작성시간: 일, 2006/11/12 - 11:55오후

얼마 전부터 개인 위키를 하나 설치해서 사용하고 있는데,
VI를 쓰다가 웹 브라우저의 편집기를 사용해서 글을 쓰려니 영 불편합니다.
그래서 생각해 본 것이, 웹 페이지의 textarea에서 vi처럼 글을 편집할 수 있다면 무척
편리하지 않을까 하는 것입니다.

얼마 전에 올렸던 자바스크립트 한글 입력기를 만들면서 배운 것을 토대로 생각해 보면
folding이나 창 나누기 같은 vim의 고급 기능 까지는 힘들어도, 기본적인 커서 이동이나
간단한 편집 명령, 약간 더 기교를 부리면 visual 편집 기능 정도는 javascript로 구현이
가능할 것 같습니다.

혹시 이와 비슷한 프로젝트가 있는지 아시는 분이 계시면 가르쳐주세요.
없다면 kldp.net에서 한번 시도해 보는 것은 어떨까요?

댓글

hey의 이미지

글쓴이: hey / 작성시간: 월, 2006/11/13 - 12:09오전

!!! 필요해요!

May the F/OSS be with you..



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


임창진의 이미지

글쓴이: 임창진 / 작성시간: 월, 2006/11/13 - 9:03오전

http://www.masswerk.at/jsuix/

guest 로 로그인하시고 vi 해보세요

hey의 이미지

글쓴이: hey / 작성시간: 월, 2006/11/13 - 11:04오전

훌륭하네요! 코드가 공개되어 있나요? 너무 느려서 ;;

May the F/OSS be with you..



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


jeehk의 이미지

글쓴이: jeehk / 작성시간: 월, 2006/11/13 - 2:25오후

한편으론 훌륭하단 생각이 들고, 한편으론 황당하기도 하네요 (이런 걸 진지하게 만든 사람이 있다니.. =_=;)

free software가 아니라고 밝히고 있긴 하지만, javascript 이기 때문에 소스 코드를 받는 건 어렵지 않네요 (웹페이지의 HTML source를 보면 *.js 의 위치와 파일명이 다 나오니까, wget으로 받을 수 있습니다).

그 코드를 그대로 쓸 수는 없겠지만 참고는 할 수 있을 것 같습니다

only2sea의 이미지

글쓴이: only2sea / 작성시간: 수, 2006/11/15 - 10:56오후

전혀 느리지 않은데요...

윗분 말씀대로 이런걸 진지하게 만든 사람이 있다니...

헉!!! 소리 납니다.

이제는 서명에 무엇을 써야하는지 생각해보자.

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

jeehk의 이미지

글쓴이: jeehk / 작성시간: 월, 2006/11/13 - 9:17오전

반가운 말씀이네요.

저는 (cvsweb이나 lxr등으로 만들어진 페이지에서) 웹브라우저로 소스코드를 읽는 때가 종종 있는데요. 그럴 때에 vim의 키들이 지원되면 편할 거라고 오래 전부터 항상 생각해 왔습니다. javascript로 vi-like editing이 구현된다면, cvsweb이나 lxr등과 합쳤을 때 매우 유용한 게 나오지 않을까 합니다.

행복한고니의 이미지

글쓴이: 행복한고니 / 작성시간: 월, 2006/11/13 - 9:58오전

시작하실거면 저도 참여시켜 주세요.
막코딩 전문입니다. ^^

__________________________________
나는 세상에서 가장 중요한 사람이다.

alee의 이미지

글쓴이: alee / 작성시간: 월, 2006/11/13 - 5:50오후

당장은 시간이 없어서 시작하기 힘들 것 같고, 다음달 말 정도부터 한번 시작해 볼까 생각만 하고
있습니다. 그런데 제가 컴퓨터 쪽 전공도 아니고 프로그래밍이라고 해봐야 수백 라인 정도 스파게티
소스 밖에 짜 본 적이 없어서 잘 될런지 모르겠습니다.
좀더 프로그래밍 경험이 풍부하신 분께서 맡아주신다면 끼거이 넘겨드리겠습니다. :)

위에 링크를 걸어주신 사이트에 잠깐 들어가 봤는데, 감탄이 나오네요. 그렇지만 그 사이트는
실제로 웹 페이지 textarea에서의 편집 위한 목적으로 만든 것이 아니라서 실제 사용에는 문제가
좀 있을 것 같습니다. 더 큰 문제는 그렇지만 소스가 너무 길어서 제 실력으로는 참고하고 뭐 하고
그럴 엄두를 못 내겠습니다. ㅡㅡ;;

hey의 이미지

글쓴이: hey / 작성시간: 월, 2006/11/13 - 9:00오후

저도 이런 프로젝트를 해보려고 생각은 했었지만 너무 막막해서 관둔적이 있었지요. 이름도 지어놨었는데.
EunHye입니다. FCKEditor 형식의 Rich Editor로 만들려고 했었는데, 으음. 뭐 코드를 한 줄도 안 짰으니 참고하시라고 할 수도 없고요. 그런 일이 있었다는 것만 ...

May the F/OSS be with you..



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


netisinfinite의 이미지

글쓴이: netisinfinite / 작성시간: 월, 2006/11/13 - 10:34오후

"vi 유저가 그렇게나 많은데, 결코 없을리가 없다" 생각해서 찾아 봤습니다.

VIEDIT : Vi enhanced editing of a html textarea (불여우 전용)

제 생각에는 JS로 만들면 그 사이트에 직접 적용시킨 사이트에서만 사용할 수 있고, 경험상 JS로 만든 (FCK등 알려진 위지윅 에디터를 포함)애플리케이션들은 로딩이 느리고 (아마도 그로 인해)버그가 많다는 편견을 가지고 있기 때문에, 차라리 MozEX처럼 TextArea의 편집을 외부 프로그램을 통해 할 수 있도록 돕는 확장 기능을 이용하거나 만드는 편이 나을 거란 생각이 듭니다.

(MozEX는 전에 위키 편집이 불편해서 올린 질문에서 마잇님이 알려 주셨군요.)

alee의 이미지

글쓴이: alee / 작성시간: 화, 2006/11/14 - 9:22오전

목적을 약간 잘못 이해하신 듯 한데, 이 프로그램의 목적은 자신의 홈페이지나 위키 등에
공용 PC로 접속했을 때 vi 명령을 사용해서 내용을 편집할 수 있도록 하는 것입니다.
말씀하신 확장 기능과는 그 목적이 다릅니다.

또, 만약 프로그램이 완성된다면 FireFox 확장 기능으로 포팅도 가능하리라 생각합니다.
FireFox 확장 기능도 자바스크립트로 구현하는 것이 가능하니까요.

마지막으로, 속도 문제가 걱정되신다면 제가 얼마 전에 올렸던 자바스크립트 한글 IME를
참고해 주세요.
http://kldp.org/node/71983

확인해 보면 아시겠지만, OS 자체의 IME와 비교해 봐도 속도가 전혀 느리지 않습니다.
위지윅 에디터와는 달리 vi의 경우 키 처리와 문자열 편집(IME에서도 마찬가지)만 하면
되니까 속도 문제는 별로 걱정할 필요가 없을 것 같습니다.

cleansugar의 이미지

글쓴이: cleansugar / 작성시간: 목, 2012/08/09 - 11:57오후

http://gpl.internetconnection.net/vi/

http://code.google.com/p/webvi/

재벌 2세가 재벌이 될 확률과
금메달리스트 2세가 금메달을 딸 확률이 비슷해지도록
자유오픈소스 대안화폐를 씁시다.

아이디의 아이디어 무한도전
http://blog.aaidee.com

귀태닷컴
http://www.gwitae.com

댓글 달기

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

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
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.