|
HTML
Javascript
Flash Actionscript
PHP
mySQL
ASP
MS-SQL
Linux
Others
Ziwoo Board
Portfolio
About
|
 |
 Javascript |
 |
|
|
화면도 간단하고 사용법도 간단하지만 기능은 충실합니다.
웹메일에 쓰려고 만든것이라 화면을 심플하게 하고 필수기능만 구현하였습니다.
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
|
|
|
|
| 지우(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(" "," ",str_replace("\t"," ",$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>만큼의 여백디자인이 되지않습니다 ㅜㅜ... |
|
|
|
|
Contact Phone Number
파일명: 
