DHTML EDITOR하나 훔쳐왔다. 대개 웹상에서 편집을 하려면 나모, 넝쿨, 태그프리 Active X 편집기등등을 이용한다.
이런 편집기들이야 전문 HTML 편집기라서 여러가지 다양한 기능을 제공하지만 대개 사용자는 단순한 기능만
이용한다.(내가 그러니 다른 사람들도 그럴것이라 생각됨 -_-;;)
비싸게 돈 주고 산것을 단순히 글자에 색 입히기로만 사용된다 -_-
이 편집기가 비싸기도 하거니와 개발할때도 이리저리 괴롭다. 설치할때, 개발할때 이리저리 괴롭고
힘들게 달아두었다고 해도 사용하다보면 이런 저런 편집기의 오류가 간간히 나타난다.
해서 DHTML EDITOR 뭔가 좋은것 없나..예전에 몇번씩 살펴보다가 썩 맘에 드는것이 없어서
그냥 넘어가곤 했는데 이번에 필요할 일이 생겨서 제대로 한번 구해봤다. 물론 구해본건 아니고
몇백만?몇천만 유저들이 이용하는 HOTMAIL에서 편지쓸때 이용되는 DHTML EDITOR 부분만 쏙~ 훔쳐왔다.
어차피 DHTML EDITOR이 client단 script이기 때문에 누구나 좀만 알면 훔쳐올수 있는데..요것 걸릴려나 -_-;;
아무튼 소스가져와서 사용하기 편리하게 이것 저것 고쳐놓아서 올린다.
소스는 다른것 볼필요 없고 write_form.html, write_proc.asp 이 2개만 보면 된다.
다른 파일들은 좀 더 미세한 수정을 하고자할때 각자 수정하면 된다.
사용법은 간단하다. write_form.html파일을 보자
<html>
<head>
<title>DHTML Editor</title>
<script language=javascript src=hotmail_dhtmleditor.js></script>
<style>
td{font-size:9pt}
</style>
</head>
<script language=javascript>
function goSubmit(f) {
// 편집기의 데이타를 form의 content 값에 넣는다.
f.content.value = getDhtmlData();
return true;
}
</script>
<body>
<form name=frm method=post action=write_proc.asp onSubmit="return goSubmit(this)">
<table width=650 border=1>
<tr>
<td width=100 align=center>제목</td>
<td width=550><input type=text name=subject size=50></td>
<tr>
<td align=center>내용</td>
<td>
<textarea style=display:none name=content></textarea>
<script language=javascript>initDhtmlEditor('frm','content');</script>
</td>
</tr>
<tr>
<td colspan=2><input type=submit></td>
</tr>
</table>
</form>
</body>
</html>
실질적으로 필요한 부분만 빨간색으로 강조해두었다.
기존 게시판에 혹 편집기 달아둘일 생기면 빨간색 부분만 수정하거나 주의해서 보면 쉽게 달 수 있을것이다.
일단 DHTML EDITOR을 이용하기 위해서 스크립트를 인클루드 한다.
<script language=javascript src=hotmail_dhtmleditor.js></script>
그런후 기존 사용하던 글 입력창..아마 99%는 textarea 태그일것이다. 요것 style태그를 이용해서 숨김으로 해둔다. (style=display:none 요렇게)
그런후 아랫부분에 DHTML EDITOR을 초기화시키는 initDhtmlEditor 함수를 실행시키는데 2개의 인자를 던져준다.
하나는 form의 이름이고 다른 하나는 textarea 의 이름이다. 여기 예제소스는 폼이름이 frm , textarea이름이 content라 정의했다.
<textarea style=display:none name=content></textarea>
<script language=javascript>initDhtmlEditor('frm','content');</script>
이정도 작업만 해주고 실행시키면 편집기가 웹상에서 떡하니 떠있는 모습을 볼 수 있을것이다.
안뜬다면 아마..경로상의 문제가 있을테니 이것저것 잘 살펴봐라 -_-..
편집기 달아두었으면 이 편집기의 데이타를 다시 textarea에 넣는 일을 해야한다.
아래처럼 getDhtmlData() 함수를 이용하면 편집기의 데이타를 얻어올수 있는데 이 값을 content값에 넣었다.
f.content.value = getDhtmlData();
이렇게만 해주고 submit 하면 끝이다. 이제 이 값을 DB에 넣어보자. 편집기를 이용하느라 이리저리 태그가 많이 사용되서
DB에 그냥 입력하면 오류가날수 있으므로 조금 데이터를 가공해서 넣어야 한다. 이 데이터 가공함수는
write_proc.asp 페이지 열어보면 2개의 함수가있다. 하나는 DB에 입력할때 쓰이는 함수 다른 하나는 DB에서 불러올때 쓰이는 함수이다.
' DB에 입력시
Function inputDHTML(CheckValue)
if CheckValue <> "" then
CheckValue = replace(CheckValue, """", "chr(34)")
CheckValue = replace(CheckValue, "'", "chr(39)")
CheckValue = replace(CheckValue, ",", "chr(44)")
CheckValue = replace(CheckValue, " ", "")
inputDHTML = CheckValue
end if
End Function
' DB에서 가져올때
Function outputDHTML(CheckValue)
if CheckValue <> "" then
CheckValue = replace(CheckValue, "chr(34)", """")
CheckValue = replace(CheckValue, "chr(39)", "'")
CheckValue = replace(CheckValue, "chr(44)", ",")
CheckValue = replace(CheckValue, "", " ")
outputDHTML = CheckValue
end if
End Function
submit된 페이지에서 content 값을 inputDHTML함수 이용해서 DB에 넣고 글 보기 화면에선 outputDHTML 함수로 뿌려주면 된다.
마지막으로 글 수정화면에서 편집기에 글 작성시 적었던 내용이 미리 들어가있어야 하는데 요건 아주 간단하다. 아래 소스보면 이해될꺼다 -_-
<textarea style=display:none name=content>
요기에 내용이 들어가면 자동으로 편집기에 요 내용이 들어가지롱~
</textarea>
<script language=javascript>initDhtmlEditor('frm','content');</script>
편집기 사용법 끝났다. 힘들다 -_-;; 역시나 귀찮아서 날림 작성이니 모르는것은 질문으로!
asp 언어만 다룰줄 아는 상황에서 프로그램을 곰곰히 뜯어보고 있습니다.
2일차. 직감하셨듯이 전혀.. 난감. 아무것도 모르겠어요. ㅜㅜ
그래도 질문이 있는것은 제 dhtmlbody.html 만 열어보면 이미지 와 이모티콘 항목이 보이는데 write_form.html 에서는 두개의 버튼이 보이질 않아요.
이것만이라도 알아보려고 하는데 영 모르겠네요. 답변 부탁드릴께요.
자료 감사합니다.