작성일 댓글 남기기

위지윅(wysiwyg) 에디터

공개 위지윅 에디터 수배중..

일단 제일 마음에 든것.
http://www.fckeditor.net/download


파일업로드 기능, 표 구현 및 수정, 한글 지원 여부가 가장 큰 관건이었는데
공개 에디터중 위 세가지 기능을 만족하는 것은 아직까지는 FCKeditor 밖에 없는 것 같다.
몇몇 유명 에디터들을 찾아봤는데 표기능이 좀 약하거나 파일업로드는 따로 만들어야 하거나
한글화를 따로 해야하는 번거로움이 있었다.
헉.. 라이선스가 올해 3월에 업데이트된 웹에디터 비교문서(http://www.geniisoft.com/showcase.nsf/WebEditors) 에서는 LGPL이었는데
그 이후에 Commercial로 바뀐것 같네요.
위 문서가 2008년 3월 22일 마지막으로 업데이트된 문서인데 각 에디터의 기능과 지원 브라우저를
잘 정리해놨네요.




그리고 팁 한개.






[팁] 초간단 위지윅 에디터 만들기 



자바스크립트 한줄만으로도 위지윅 에디터를 만들 수 있다면 믿으시겠습니까.

IE에서는 document.body.contentEditable 속성을 true로,
타 브라우저에선 document.designMode 속성을 on으로 해주면
페이지는 마술같게도 그 즉시 위지윅모드로 바뀌게 됩니다.

뭔 말인지 잘 모르시겠다구요?

백문이 불여일견이라고, 아래의 스크립트를 HTML에 넣어보시기 바랍니다.

 // ie에서는 contentEditable의 값을 true로 세팅해주면 위지윅 에디터 모드로 변경된다.
 // 그 외 브라우저에서는 iframe의 designMode의 값을 on으로 세팅해주면 된다.
[code]
 window.onload = function() {
  if (document.body && document.body.contentEditable != undefined && window.ActiveXObject) {
   document.body.contentEditable = “true”;
  } else {
   document.designMode = “on”;
  }
 }
 [/code]



작성일 댓글 남기기

[펌] 마우스 제스처 – js





[스크립트] [JS] Mouse Gesture






















글쓴이   Seeker 날 짜 08-10-30 21:25 조 회 823
Link1   http://www.seeker.kr/test/mouse_gesture.html (258)






마우스 제스처, 즉 마우스의 이동으로 지정한 동작을 실행하는 기능입니다.

FF는 이 기능을 사용할 수 있는 부가기능이 몇개 있고, 아예 제스처 기능이 기본으로 내장된 브라우저도 있지만 IE는 전혀 상관없기 때문에…

단축키 기능을 만들고 난 뒤 문득 이것도 있으면 편리하겠다 싶어서 만들어 봤습니다.


_gestures 에 동작과 함수를 지정하면 됩니다.


링크된 페이지에서 간단한 동작을 확인할 수 있습니다.


# 동작 : U(up) / D(down) / R(right) / L(left) 의 4가지 방향으로 구성

# 단계 제한은 없음. (하지만 많아도 3단계 이하로 지정하는게 사용에 편리)

# 20픽셀 이상의 동작만 인식 (인식 길이 조정 가능)

# 방향 구분은 60도, 즉 수직에서 좌우 30도(합 60도) 이내의 범위를 지나면 U 혹은 D이고 수평에서 상하 30도 이내의 범위를 지나면 R 혹은 L 판정 (범위 조정 가능)


# IE6/7, FF3, 크롬에서 테스트했습니다.




/*
이 스크립트에 대한 모든 권리는 제작자에게 있습니다.
스크립트를 이용하려면 제작자를 반드시 표기해야 합니다.

제작자 : Seeker
제작자 홈페이지 :
http://www.seeker.kr/
*/

// 이벤트 부여 함수
function addEvent(target,e,f) {
    if(window.addEventListener)
        target.addEventListener(e,f,false);
    else if(window.attachEvent)
        target.attachEvent(“on”+e,f);
    else
        target[“on”+e] = f;
}

function removeEvent(target,e,f) {
    if(window.removeEventListener)
        target.removeEventListener(e,f,false);
    else if(window.detachEvent)
        target.detachEvent(“on”+e,f);
    else
        target[“on”+e] = null;
}


// 액션 리스트
var _gestures = {
    U : [“스크롤 UP”,function() {document.documentElement.scrollTop -= document.documentElement.clientHeight;}],
    D : [“스크롤 DOWN”,function() {document.documentElement.scrollTop += document.documentElement.clientHeight;}],
    LU : [“페이지 상단”,function() {document.documentElement.scrollTop = 0;}],
    LD : [“페이지 하단”,function() {document.documentElement.scrollTop = document.documentElement.scrollHeight;}],

    R : [“앞으로”,function() {history.forward();}],
    L : [“뒤로”,function() {history.back();}],

    DR : [“새 창(탭) 열기”,function() {window.open(‘about:blank’);}],
    DL : [“창(탭) 닫기”,function() {window.close();}],

    DU : [“창(탭) 복사”,function() {window.open(location.href);}],
    UD : [“새로 고침”,function() {location.reload();}]
}

// 사용 전역변수 선언
var _g_pX,_g_pY,_g_tX,_g_tY;
var _g_path = “”;
var _g_target;
var _g_t_dir = “”;

// 마우스 다운시
function _g_down(e) {
    var e = e || event;
    _g_path = “”;
    _g_target = e.target || e.srcElement;

    if(e.button == 2) {
        _g_pX = _g_tX = e.clientX;
        _g_pY = _g_tY = e.clientY;
        addEvent(document,”mousemove”,_g_move);
        addEvent(document,”mouseup”,_g_up);
    } else {
        removeEvent(document,”mousemove”,_g_move);
        removeEvent(document,”mouseup”,_g_up);
    }
}

// 마우스 업시
function _g_up(e) {
    if(e.button == 2) {
        if(_g_path in _gestures) _gestures[_g_path][1]();
        removeEvent(document,”mousemove”,_g_move);
        removeEvent(document,”mouseup”,_g_up);
    }
}

// 컨텍스트 메뉴 방지용 리턴 막는 함수
function _g_false(e) {
    if(_g_path) {
        var e = e || event;
        if(e.preventDefault) e.preventDefault();
        if(“returnValue” in e) e.returnValue = false;
        return false;
    }
}

addEvent(document,”contextmenu”,_g_false);

// 마우스 이동시
function _g_move(e) {
    var e = e || event;
    var x = e.clientX;
    var y = e.clientY;
    var mX = x – _g_pX;
    var mY = _g_pY – y;
    var dir;

    if(mX == 0) {
        if(mY > 0) dir = “U”;
        else if(mY < 0) dir = “D”;
        else return;
    } else {
        var slope = mY/mX;
        if(slope > 2 || slope < -2) {
            if(mY > 0) dir = “U”;
            else dir = “D”;
        } else if(slope < 0.5 && slope > -0.5) {
            if(mX > 0) dir = “R”;
            else dir = “L”;
        }
    }

    if(dir && dir != _g_path.charAt(_g_path.length-1)) {
        if(_g_t_dir != dir) {
            _g_tX = _g_pX;
            _g_tY = _g_pY;
        }
        if(Math.abs(x-_g_tX) > 20 || Math.abs(_g_tY-y) > 20) {
            _g_path += dir;
        }
    }
    _g_t_dir = dir;
    _g_pX = x;
    _g_pY = y;

    window.status = _g_path + ((_g_path in _gestures)?(” : ” + _gestures[_g_path][0]):””);
}

addEvent(document,”mousedown”,_g_down);

작성일 댓글 남기기

자바스크립트를 이용한 정규표현식 체크









function validPWD( str )
{


var isPW = /^[a-z0-9]{6,16}$/;
     if( !isPW.test(str) ) {
         alert(“비밀번호는 6~16자의 영문 소문자와 숫자만 사용할 수 있습니다.”);
         return 0;
     }
     return 1;


}



——-








































































































문자 설명
\ 다음에 오는 문자를 특수 문자나 리터럴로 표시합니다. 예를 들어, “n”은 문자 “n”과 일치합니다. “\n”은 줄 바꿈 문자와 일치합니다. 시퀀스 “\\”은 “\”와 같고, “\(“는 “(“와 같습니다.
^ 입력의 시작 부분을 찾습니다.
$ 입력의 끝 부분을 찾습니다.
* 앞에 오는 문자를 0번 이상 찾습니다. 예를 들어, “zo*”를 입력하면 “z” 또는 “zoo”를 찾습니다.
+ 앞에 오는 문자를 1번 이상 찾습니다. 예를 들어, “zo+”를 입력하면 “zoo”를 찾지만 “z”는 여기에 포함되지 않습니다.
? 앞에 오는 문자를 0번 이상 찾습니다. 예를 들어, “a?ve?”를 입력하면 “never”에 있는 “ve”를 찾습니다.
. 줄 바꿈 문자를 제외한 단일 문자를 찾습니다.
(pattern) pattern을 찾고 일치하는 내용을 기억합니다. 일치하는 부분 문자열은 Item [0]…[n]을 사용하여 결과로 나오는 Matches 컬렉션에서 검색할 수 있습니다. 괄호 문자 ( )를 찾으려면 “\(” 또는 “\)”를 사용합니다.
x|y x 또는 y를 찾습니다. 예를 들어, “z|food”는 “z” 또는 “food”를 찾습니다. “(z|f)ood”로는 “zoo”나 “food”를 찾을 수 있습니다.
{n} n은 음이 아닌 정수입니다. 정확하게 n번 일치하는 부분을 찾습니다. 예를 들어, “o{2}”는 “Bob”의 “o”를 찾지 않지만 “foooood”의 처음 두 o를 찾습니다.
{n,} n은 음이 아닌 정수입니다. 적어도 n번 일치하는 부분을 찾습니다. 예를 들어, “o{2,}”는 “Bob”의 “o”를 찾지 않지만 “foooood”의 o는 모두 찾습니다. “o{1,}”은 “o+”와 같습니다. “o{0,}”은 “o*”과 같습니다.
{n,m} mn은 음이 아닌 정수입니다. 최소 n번, 최대 m번 일치하는 부분을 찾습니다. 예를 들어, “o{1,3}”은 “fooooood”의 처음 세 o를 찾습니다. “o{0,1}”은 “o?”와 같습니다.
[xyz] 문자 집합입니다. 괄호 안의 문자 중 하나를 찾습니다. 예를 들어, “[abc]”는 “plain”의 “a”를 찾습니다.
[^xyz] 문자 집합에 없는 문자를 찾습니다. 괄호 안에 있지 않은 문자 중 하나를 찾습니다. 예를 들어, “[^abc]”는 “plain”의 “p”를 찾습니다.
[a-z] 문자 범위입니다. 지정한 범위에 있는 문자 중 하나를 찾습니다. 예를 들어, “[a-z]”는 “a”에서 “z”까지의 알파벳 소문자를 찾습니다.
[^m-z] 지정한 문자 범위가 아닌 집합입니다. 지정한 범위에 있지 않은 문자 중 하나를 찾습니다. 예를 들어, “[m-z]”는 “m”에서 “z”까지에 없는 문자를 찾습니다.
\b 단어의 경계, 즉 단어와 공백 사이의 위치를 찾습니다. 예를 들어, “er\b”는 “never”의 “er”를 찾지만 “verb”의 “er”는 찾지 않습니다.
\B 단어의 경계에 있지 않은 문자를 찾습니다. “ea*r\B”는 “never early”의 “ear”을 찾습니다.
\d 숫자를 찾습니다. [0-9]와 같습니다.
\D 숫자가 아닌 문자를 찾습니다. [^0-9]와 같습니다.
\f 용지 공급 문자를 찾습니다.
\n 줄 바꿈 문자를 찾습니다.
\r 캐리지 리턴 문자를 찾습니다.
\s 공백, 탭, 용지 공급 등 모든 종류의 공백 문자를 찾습니다. “[ \f\n\r\t\v]”와 같습니다.
\S 공백 문자가 아닌 문자를 찾습니다. “[^ \f\n\r\t\v]”와 같습니다.
\t 탭 문자를 찾습니다.
\v 세로 탭 문자를 찾습니다.
\w 밑줄을 포함한 모든 단어 문자를 찾습니다. “[A-Za-z0-9_]”와 같습니다.
\W 단어가 아닌 문자를 찾습니다. “[^A-Za-z0-9_]”와 같습니다.
\num num을 찾습니다. 여기서 num은 양의 정수입니다. 이전에 참조한 값을 다시 참조합니다. 예를 들어, “(.)\1″은 연속적으로 같은 문자가 두 번 나오는 것을 찾습니다.
\n n을 찾습니다. 여기서 n은 8진 제어 값입니다. 8진 제어 값은 1, 2, 3 자리 중 하나라야 합니다. 예를 들어, “\11″과 “\011″은 모두 탭 문자를 나타내지만 “\0011″은 “\001” & “1”과 같습니다. 8진 제어 값은 256을 넘을 수 없습니다. 이 값이 256을 넘는 경우에는 처음 두 자릿수 만이 식을 구성합니다. 정규식에 ASCII 코드를 사용할 수 있습니다.
\xn n을 찾습니다. 여기서 n은 16진 제어 값입니다. 16진 제어 값은 정확히 두 자리이어야 합니다. 예를 들어, “\x41″은 “A”에 해당하지만 “\x041″은 “\x04” & “1”과 같습니다. 정규식에 ASCII 코드를 사용할 수 있습니다.



정규식에 사용할 수 있는 메소드는


test(), compile(), match(), replace(), search() 등이 있습니다