HTML
Javascript
Flash Actionscript
PHP
mySQL
ASP
MS-SQL
Linux
Others
Ziwoo Board
Portfolio
About
Javascript
작성  2006-09-23 01:28:57   추천: 141   조회: 19945
제목  위지윅(WYSIWYG) 웹에디터 입니다.
이름(ID)  지우 (ziwoo)
링크1  http://www.ziwoo.net/wysiwyg
파일
  파일명: wysiwyg_2011.12.14.zip 파일크기: 237,169 byte 다운로드: 7,513
  파일명: screenshot.jpg 파일크기: 160,736 byte 다운로드: 5,035
  파일명: w1.gif 파일크기: 8,702 byte 다운로드: 4,871
화면도 간단하고 사용법도 간단하지만 기능은 충실합니다.
웹메일에 쓰려고 만든것이라 화면을 심플하게 하고 필수기능만 구현하였습니다.
Internet Explorer뿐 아니라 FireFox에서도 잘 작동됩니다.
2011.11월의 부분수정으로 오페라, 크롬, 사파리 등에서도 잘 작동됩니다



[사용방법]

1. 상단에 "wysiwyg.js"를 호출하는 한줄 추가.
<head>
<script language="JavaScript" src="wysiwyg.js"></script>
</head>

2. 에디팅 하고 싶은 TEXTAREA 태그안에 title="editor" 라고 추가해주세요.
<textarea title="editor" ~~>

3. Editor 의 크기가 textarea에 스타일로 지정된 넓이와 높이를 참조하므로..
아래처럼 스타일로 지정해주세요.
<textarea name="content" title="editor" style="width:700px; height:300px;">

[특징]
  • 하나의 js파일만으로 구현되었습니다.
  • IE에서 엔터에 <P>태그가 붙는것을 <br>로 변경했습니다.
  • URL링크 적용시 타켓이 "_blank"가 되도록 별도 처리했습니다.
  • 한 화면에 두개 이상의 에디터가 있어도 잘 작동됩니다.


  • 에디터에서 드래그하여 선택한 부분을 소스보기에서도 자동으로 선택되게 하였습니다.
  • 이 기능은 실제 사용시 상당히 유용한 기능이라 오랜시간 공을 들인 끝에 구현했습니다.


    [파일구성]
    JS파일 한개와 아이콘 몇개입니다.

    [2011.11.26 업데이트 내용]
    에디터의 StyleSheet를 자동으로 부모페이지에서 복사하도록 변경.
    IE에서 엔터를 <br>로, Shift+엔터를 <p>로 변경.
    URL링크기능 추가.
    테이블 삽입기능 추가.
    에디터에서 선택한 부분을 텍스트모드에서 보여주는 기능추가 (불안정).
    포커스이동에 관한 접근방법 변경.
    FF, 오페라, 크롬, 사파리 등 호환성 추가.
    소스보기 모드에서 아이콘 흐리게 표시 등..
    type="editor" 에서 title="editor"로 변경(웹표준 반영)

    [2011.12.14 업데이트 내용]
    혹시 모를 다른 스크립트와의 변수명 충돌을 피하기 위해 코드를 캡슐화했습니다.
    에디터의 크기를 조절할 수 있게 하단에 크기조절바를 삽입했습니다.


    테스트 : 상단에 링크 클락하거나 아래 URL을 클릭하세요.
    http://www.ziwoo.net/wysiwyg

  • 덧글 (28)
    지우(ziwoo) 2006-09-25 07:55:56
    글 쓰다가 글크기를 변경한 후 바로 추가타이핑을 하면
    에디트 영역이 아닌 본문에 글이 써지는 버그가 있었네요.
    22번 라인 삭제하면 됩니다.
    145번라인은 오타입니다. 
    다운로드 파일은 수정된 파일로 변경했습니다.

    22번라인 삭제
    if(layerId) document.getElementById(layerId).focus(); <= 포커스 버그

    145번 라인 숫자리스트 부분 오타
    javascript:htmledit('insertorderedlist', false, null), '"+i+"'; <= 괄호닫기 오타
    javascript:htmledit('insertorderedlist', false, null, '"+i+"'); <= 수정 후.
    김재현(220.124.193.232) 2006-10-20 14:07:05
    p태그 대신에 br태그로 글이 넘어갈 순 없을까요?
    지우(218.155.158.82) 2006-10-20 19:54:09
    <p>태그의 줄간격문제인데요..
    <p>를 <br>로 바꾸는건 스크립트를 이용하면 가능하긴 합니다만..
    좋은 방법이 아닙니다.
    그냥 본 스크립트에서 처럼 스타일을 이용해 줄간격을 조절하시고
    나중에 디스플레이 되는곳에서도 같은 스타일을 적용하는것이 좋습니다.
    그래도 하사려면 phpschool.com에서 검색해보시면 자료가 있습니다.
    김상욱(211.230.92.14) 2006-11-15 19:43:03
    지우님 에디터 적용해볼라고 테스트 중인데요.
    http:로 시작되는것 자동으로 링크잡히는 부분에서
    target 값을 지정할 수 있는 방법이 있는지요?
    HTML로 가서 지정하면 되긴 하는데, 항상 _blank로 주고 싶어서요.

    참, 이미지 삽입은 항상 HTML로 가서 직접 링크삽입해야 하는거 맞나요?
    지우(220.78.115.95) 2006-11-15 22:09:30
    현재로선 타겟을 소스보기에서 바꿔야합니다.
    이미지 삽입은 붙여넣기(Ctrl+V)도 가능하고요..
    웹메일에 답변메일 등에 사용하기 위해 만든것이므로,
    기능에 충실하기 보다는 간단명료하게 만드는데 주안점이 있습니다.
    김상욱(211.230.92.14) 2006-11-16 12:45:49
    답변주셔서 감사합니다.
    소스보기에서 일일이 바꿔야 한다면,
    아예 링크가 자동으로 걸리지 않게 했으면 좋겠는데,
    그건 가능한지요? 가능하다면 어디를 손봐야 하는지 알려주세요.
    지우(220.78.115.95) 2006-11-16 14:50:46
    내장함수로 실행되기 때문에 수정할 수 있는것이 아닙니다.
    김상욱(211.230.92.14) 2006-11-16 16:35:18
    감사합니다.
    제 실력이 일천하다보니, 수정가능한지 아닌지도 잘 몰랐네요.
    간결하고 알찬 웹에디터 잘 쓰도록 하겠습니다. ^^
    윤영호(211.48.216.26) 2006-12-12 15:38:14
    근데 XP에서만 작동하고 윈도우2000에서는 안되는 이유는 뭘까요??
    지우(ziwoo) 2006-12-12 20:55:33
    //윤영호
    2000 환경이 없어 테스트해보지 못했습니다.
    파이어폭스에서도 되는것이라.. 당연히 2000에서 되는줄 알았습니다.
    윈도우인지 파이어폭스인지 구분하는 스크립트 부근에다가..
    윈도우2000을 윈도우 계열이 아닌, 파이어폭스로 인식하게 바꿔보면 어떨런지요..
    조금 주물럭 거리시면.. 되긴 될겁니다..
    2000테스팅(203.236.49.53) 2006-12-22 21:15:26
    윈2000에서 테스트 해봤는데 안되는군요.
    요기 위엣분도 해보신 모양인데 역시 저도 안됩니다.
    주물럭 걸릴 실력두 안되구..-.-
    윈2000에 익스6.0인데...
    펑션은 불러오던데...
    실행이 왜 안되는지... 이거참...
    누가 주물럭 잘하시는 분이 좀 주물럭 해봐유~~~~ ^&^
    태현아빠(125.188.79.17) 2006-12-27 20:02:49
    잘 사용하겠습니다. 제 블러그에 쏘스링크를 했어요. ^^.
    그리고 에디터와 이지웍간 변형시 iframe의 body 여백 부분이 아까운 느낌이 있어서
    JS파일 90번 줄안에    
    doc.write("body{ margin-top:2px;  margin-left:2px;  margin-right:2px; }");
    위 부분 추가하였습니다.
    김상욱(211.230.92.14) 2007-01-05 12:06:35
    phpschool 코멘트중 win2000에서 자스오류 발생한다는 경우와 동일하게
    xp professional (최신버그패치완료) 사용하는 사람이 자스오류 난다고 하더군요.
    17번 및 117번 줄에서요.(IE 7 아님)
    위지윅도구들이 전혀 뜨지 않는 현상이었구요.
    117번줄 doc.attachEvent("onmousedown", copyTohtml, false); 을 주석처리하니
    해결되었습니다.(기존에 잘되던 IE 및 FF 도 모두 문제없구요)
    117번줄 관련된 기능들을 밤새 찾아봤는데, 원인이 뭔지는 모르겠네요.
    (오류 난다고 알려준 사람 컴퓨터가 다른 지역이어서 가 볼 수도 없네요...)
    아무튼 사용하시는 분들중 혹시 도구들이 뜨지 않고 자스오류 발생한다는 연락받으시는
    분들은 117번 줄을 주석처리해 보시는 것도 도움될 듯 합니다.
    참, 지우님 에디터 깔끔,상큼하게 잘 쓰고 있습니다. 새해 복 많이 받으세요.
    김상윤(211.204.3.135) 2007-06-24 13:31:40
    그림삽입, 테이블삽입, 링크 기능 추가하려면 어떻게 해야하는지요?
    MySQL DB 저장 및 수정, 상세보기 에서 DB 불려올때 어떻게 해야하는지요? 초보자입니다.
    이종석(210.126.12.61) 2007-07-28 17:39:41
    잘쓰겠습니다. ^^
    아주 심플한 에디터네요 ^^
    이상우(221.141.168.217) 2007-08-29 13:52:20
    현재 버전은 22번 라인이 삭제 되어 있는데..
    글꼴, 글자크기를 변경하니까 포커스가 상단으로 가버리네요..
    어떻게 된걸까요?
    지우(121.157.178.160) 2007-08-29 21:51:25
    //이상우
    스쿨 댓글을 읽어보시면 아시겠지만..
    해당문제는 포기했다고 이미 밝힌 내용입니다.
    다른분이 해결방법이 있다고 말씀은 하셨지만..
    저로선 잘 모르겠고.. 딱히 불편하지 않기도 해서요..
    성실한 답변이 아닌듯 해서 죄송합니다.
    워니(147.46.241.146) 2007-09-08 20:22:24
    감사합니다!! 많은 도움이 되었습니다 ㅎㅎ
    최재용(210.108.178.253) 2007-10-10 15:01:19
    117번째줄만 주석달면 전부 잘 되네요
    //doc.attachEvent("onmousedown", copyTohtml, false);


    [테스트환경]
    2000 : ie6sp1,FireFox
    2003 : ie7
    xp : ie6sp2
    하동훈(211.175.233.137) 2008-03-06 11:46:47
    지금 위지윅 에디터 만들어 보려고 소스 찾고 있었는데

    작동 방식이 감이 안서요 ㅎㅎ;;

    지우님 소스 보고 공부해서 저도 하나 만들어 봐야겠네요 ㅎㅎ

    감사합니다~
    장창영(125.191.19.105) 2008-07-29 11:05:29
    아.. 저도 위지윅 에티터 만들고 싶지만 아직은 가져다 쓰기만 할게요 ㅠㅠ
    언젠간 지우님 보다 더 좋은 위지윅 에디터를 탄생시키고 싶네요
    그러려면 공부를... ㅠㅠ
    엔피씨(222.119.122.169) 2008-09-12 11:53:12
    P태그 대신 BR 태그로 넘기시려면, Shift + Enter 를 해보시면됩니다.
    나모웹에디터나, 드림위버에서 쓰는 방식입니다.
    hogan(64.94.43.66) 2008-10-09 01:07:26
    지금까지 명우님의 보드와 에디터를 잘 쓰고 있습니다.
    지우보드의 코멘트 부분에 이 위지윅에디터를 붙였는데요.
    큰 문제는 아니지만 기본적으로 에디터모드에서 글을 쓰고 올리면
    enter친곳과 끝에는 <br>이 붙어서 글이 모양 예쁘지를 않습니다.
    자동으로 <br>이 않나오게 하려면 어디를 수정해야 하는지요?
    지우(218.155.158.29) 2008-10-09 20:30:49
    //hogan
    게시판 view.php 637번 라인 부근에 아래와 같은 부분을 수정하세요.
    에디터를 사용한다면.. nl2br(), str_replace() 등은 필요 없을듯하네요.

    수정전:
    <?=nl2br(auto_link(str_replace("  ","&nbsp; ",str_replace("\t","&nbsp; &nbsp; ",$cmt_Records[$i]["comment_content"]))))?>

    수정후:
    <?=$cmt_Records[$i]["comment_content"]?>

    hogan(64.94.43.66) 2008-10-10 06:41:37
    적용해 보았지만 않됩니다.
    view.php 파일이 아니라 wysiwyg 파일안에서 해결해야 하는 것은 아닌지요.
    아니면 시작을 에디터 모드가 아니라 html모드에서 할수는 없는지요?
    html 모드에서 나타나는 <br>을 지우고 하면 <br> 이 나타나지 안지만
    그건 저의 방식이고 일반회원들이게 일일이 그렇게 하라고 가르쳐가면서 쓰기도 그렇고요.
    지우(218.155.158.29) 2008-10-11 02:02:50
    //hogan
    엔터 친곳에 <BR> 이 붙는게 지극히 정상적인것 아닌가요?
    김진우(mazima) 2008-10-31 16:54:40
    여기서 에디터를 다운받아 아주 잘 사용하고 있습니다.
    근데 한가지 문제가 발생해서 질물 드립니다.
    수정하는 페이지에서 페이지 전환 없이 자바스크립트 코드 만으로 에디터 안에 있는 내용을 바꿔야 하는 작업이 발생해서요...
    이 에디터 어디를 찾아봐도 getContent나 setContent같은 기능은 못찾겠더라구요...
    이 방법 어떻게 하는 방법이 없을까요??? 알려 주시면 감사하겠습니다.

    그리고 한가지 더 여러줄을 쓰고 글자 크기를 크게 하니까
    글자들의 줄이 겹치는 현상이 발생하더군요.. 이건 또 어케 수정을 해야할지...
    초보자인 저로서는 참 난감하네요... 답변해 주시면 감사하겠습니다.
    예진(211.247.62.184) 2009-11-04 04:22:32
    명우님 에디터를 사용하게 되었습니다- 위에분도 물으셨는데 <p>를 <br>로 바꾸는
    자바소스 부분이 어딘지 짚어주실수 있으실까요?
    스타일태그로 부분부분 고쳐도 <br>만큼의 여백디자인이 되지않습니다 ㅜㅜ...
    번호 제목 이름 날짜 추천 조회
    중요 위지윅(WYSIWYG) 웹에디터 입니다.[28]파일 지우 2006-09-23 141 19945
    55 제이쿼리(JQuery)를 활용한 라디오, 체크박.. 지우 2017-07-05 15 3635
    54 최근 메일서비스 리스트 지우 2016-06-26 16 7632
    53 IE 버전 구분 정규식 지우 2013-07-07 36 8065
    52 자바스크립트로 스타일 제어하기 지우 2011-12-15 58 23255
    51 attachEvent, addEventListener 활용 지우 2011-12-07 41 8441
    50 Drag&Drop을 이용한 진열순서 변경파일 지우 2011-11-19 49 27073
    49 비밀번호 입력형식 변환 지우 2011-11-16 29 2585
    48 페이드 효과 및 로테이션파일 지우 2011-11-10 29 2991
    47 이메일 유효성 정규식 - 자바스크립트 지우 2011-06-03 40 3831
    46 < tab1 tab2 tab3 tab4 tab5 >[3] 大道 2011-02-05 37 3562
    45 함수명을 변수로 해야할 때 지우 2010-04-11 52 5050
    44 달력 - 날짜입력기(Date Picker)파일 지우 2010-04-11 62 16336
    43 중앙정렬 홈페이지에 레이어 좌표맞추기 지우 2009-12-10 69 3662
    42 자바스크립트 이벤트 핸들러 (Event Handl.. 지우 2009-11-13 53 3179
    41 날짜 더하기 & 시간 더하기 함수 지우 2009-10-31 56 9431
    40 동적테이블 TR 추가 지우 2009-10-31 57 3299
    39 IE 설계변경 패치 했는데요...왜 안되는지...[2]파일 최혜경 2008-06-11 68 4778
    38 지우님... 도와주세요.. ㅜ_ㅜ[2] 김영필 2008-01-11 78 3216
    37 정규식이용 특정문자만 변환 (콜백함수 사.. 지우 2007-08-25 89 5676
    [1][2][3]
    제목 내용 이름  
    ziwooboard v1.0
    Contact Phone Number
    Bank Account number
    ns1.ziwoo.net (211.115.222.24)
    ns2.ziwoo.net (211.115.222.24)
    Naver BLOG : http://blog.ziwoo.net
    Family Homepage : http://home.ziwoo.net
    Copyright ⓒ 2006 By Ziwoo.net All right reserved. Administrator.ziwoonet@naver.com