웹에디터, web editor 소스 (학습용)
기본 원리는 IFAME의을 편집 할 수 있도록 하고 자바스크립트에서 DHTML편집 할 수 있는 형태이며 저장은 자바스크립트에서 값을 변환 하고 넘기는 방식 입니다.
1. 편집창 만들기
편집창은 iframe태그를 사용 합니다.
<iframe></iframe>
속성으로는 다음과 같은 것들이 있습니다.
src="" iframe에서 연결 시킬 경로 width="" 너비 height="" 높이 name="" 이름으로 FRAME의 이름과 동일 하며 taget의 대상이 될 수 있습니다.
예) <iframe src="http://www.yahoo.co.kr" width="700" height="400" name="html"></ifame>
ifrme은 반드시 종료태그가 있어야 합니다.
IFRAME은 FRAME을 이미지 형식으로 만드는 태그 입니다. 하지만 일반형식은 브라우저의 내용을 그냥 읽어오는 형식 입니다. 그래서 편집 가능 하도록 자바스크립트에서 만들어 줍니다.
<HTML>
<HEAD>
<TITLE>웹에디터 예제1</TITLE>
</HEAD>
<BODY>
<IFRAME NAME=dhtmlframe></IFRAME>
<SCRIPT LANGUAGE="JavaScript">
<!-- JavaScript
dhtmlframe.document.designMode = "On"
// - JavaScript - -->
</SCRIPT>
</BODY>
</HTML>
여기서 자바스크립트는 iframe이후에 넣어 줘야 합니다.
그럼 위의 파일을 html로 만들고 브라우저에서 읽어오면 편집 가능 하도록 되어 있을 것 입니다.
2. 편집툴바 만들기
<HEAD>와 </HEAD>사이에 자바 스크립트 만듭니다.
<SCRIPT langauge="javascript">
function htmledit(excute){
dhtmlframe.document.execCommand(excute);
}
</SCRIPT>
그리고 툴바에는 볼드,이탤릭,언더라인 만들고 다음 과 링크를 연결 합니다.
<A href="javascript:htmledit('BOLD');">볼드</A>
<A href="javascript:htmledit('italic');">이탤릭</A>
<A href="javascript:htmledit('underline');">언더라인</A>
다음 예제를 저장 하고 브라우저를 통해 실행 합니다.
<HTML>
<HEAD>
<TITLE>웹에디터 예제2</TITLE>
<SCRIPT langauge="javascript">
function htmledit(excute){
dhtmlframe.document.execCommand(excute);
}
</SCRIPT>
</HEAD>
<BODY>
<A href="javascript:htmledit('bold');">볼드</A>
<A href="javascript:htmledit('italic');">이탤릭</A>
<A href="javascript:htmledit('underline');">언더라인</A>
<p>
<IFRAME NAME=dhtmlframe></IFRAME>
<SCRIPT LANGUAGE="JavaScript">
<!-- JavaScript
dhtmlframe.document.designMode = "On"
// - JavaScript - -->
</SCRIPT>
</BODY>
</HTML>
브라우저에서 편집 가능 한것을 볼수 있습니다.
볼드,이탤릭,언더라인 이외 무엇이 있을까요.
cut - 자르기
copy - 복사
paste - 붙여넣기
justifyleft - 좌측정렬
justifycenter - 중심정렬
justifyright - 우측정렬
insertorderedlist - 점표시목록
insertunorderedlist - 숫자목록
outdent - 들여쓰기 줄이기
indent- 들여쓰기 늘이기
createlink - 링크
fontname - 글꼴
fontSize - 글사이즈
<A href="javascript:htmledit('cut');">자르기</a>
형식등로 사용 할 수 있습니다.
그러나 글꼴 이나 글크기등은 값이 필요 합니다. 이경우 htmledit(excute)에서 excute이외 하나더 인자가 필요 합니다. values 라고 하나 더 추가 합니다.
<SCRIPT langauge="javascript">
function htmledit(excute,values){
if(values==null){
dhtmlframe.document.execCommand(excute);
}
else
dhtmlframe.document.execCommand(excute,"",values);
}
}
</SCRIPT>
글꼴을 궁서체로 만들고 싶으면
htmledit('fontname','궁서체') 가 됩니다. 다음 예제를 테스트 해보세요
<HTML>
<HEAD>
<TITLE>웹에디터 예제3</TITLE>
<SCRIPT langauge="javascript">
function htmledit(excute,values)
{
if(values==null)
{
dhtmlframe.document.execCommand(excute);
}
else
{
dhtmlframe.document.execCommand(excute,"",values);
}
}
</SCRIPT>
</HEAD>
<BODY>
<A href="javascript:htmledit('cut');">자르기</a>
<A href="javascript:htmledit('copy');">복사</a>
<A href="javascript:htmledit('paste');">붙여넣기</a>
<A href="javascript:htmledit('justifyleft');">좌측정렬</a>
<A href="javascript:htmledit('justifycenter');">중심정렬</a>
<A href="javascript:htmledit('justifyright');">우측정렬</a>
<A href="javascript:htmledit('insertorderedlist');">점표시목록</a>
<A href="javascript:htmledit('insertunorderedlist');">숫자목록</a>
<A href="javascript:htmledit('outdent');">들여쓰기줄이기</a>
<A href="javascript:htmledit('indent');">들여쓰기늘이기</a>
<A href="javascript:htmledit('createlink');">링크</a><BR>
글꼴 >
<A href="javascript:htmledit('fontname','굴림');">굴림</a>
<A href="javascript:htmledit('fontname','궁서');">궁서</a>
글크기 >
<A href="javascript:htmledit('fontSize',2);">2</a>
<A href="javascript:htmledit('fontSize',3);">3</a>
<A href="javascript:htmledit('fontSize',4);">4</a>
<A href="javascript:htmledit('bold');">볼드</A>
<A href="javascript:htmledit('italic');">이탤릭</A>
<A href="javascript:htmledit('underline');">언더라인</A>
<P><IFRAME NAME=dhtmlframe></IFRAME>
<SCRIPT LANGUAGE="JavaScript">
<!-- JavaScript
dhtmlframe.document.designMode = "On"
// - JavaScript - -->
</SCRIPT>
</BODY>
</HTML>
3. 값넘기기
이제까지 HTML과 자바스크립트로만 이용 해서 만들었습니다. 이렇게 만든 값을 CGI(PHP,ASP..)등으로 보내고야 합니다. 아시다 싶이 값을 전송 하는것은 form태그를 시용 합니다.
form을 만듭니다. 그리고 form의 속성중 name을 form으로 만들고(아무거나 만들어도 상관 없겠죠)
<IFRAME>밑에 <TEXTAREA></TEXTAREA>을 만듭니다. 이름은 아무거나.. 저는 comment라 지었습니다.
그리고 HEAD자바 스크립트에 다음과 같이 추가 합니다.
function datasubmit()
{
form.comment.value = dhtmlframe.document.body.innerHTML;
}
아래의 예제를 실행 하고 HTML보기를 클릭 하면 HTML소스가 <TEXTAREA>에 복사 되는 것을 볼 수 있습니다.
그상태에서 다른 CGI에서 comment로 변수로 읽어 저장 되는 것 입니다.
<HTML>
<HEAD>
<TITLE>웹에디터 예제4</TITLE>
<SCRIPT langauge="javascript">
function htmledit(excute,values)
{
if(values==null)
{
dhtmlframe.document.execCommand(excute);
}
else
{
dhtmlframe.document.execCommand(excute,"",values);
}
}
function datasubmit()
{
form.comment.value = dhtmlframe.document.body.innerHTML;
}
</SCRIPT>
</HEAD>
<BODY>
<form name=form>
<A href="javascript:htmledit('cut');">자르기</a>
<A href="javascript:htmledit('copy');">복사</a>
<A href="javascript:htmledit('paste');">붙여넣기</a>
<A href="javascript:htmledit('justifyleft');">좌측정렬</a>
<A href="javascript:htmledit('justifycenter');">중심정렬</a>
<A href="javascript:htmledit('justifyright');">우측정렬</a>
<A href="javascript:htmledit('insertorderedlist');">점표시목록</a>
<A href="javascript:htmledit('insertunorderedlist');">숫자목록</a>
<A href="javascript:htmledit('outdent');">들여쓰기줄이기</a>
<A href="javascript:htmledit('indent');">들여쓰기늘이기</a>
<A href="javascript:htmledit('createlink');">링크</a><BR>
글꼴 >
<A href="javascript:htmledit('fontname','굴림');">굴림</a>
<A href="javascript:htmledit('fontname','궁서');">궁서</a>
글크기 >
<A href="javascript:htmledit('fontSize',2);">2</a>
<A href="javascript:htmledit('fontSize',3);">3</a>
<A href="javascript:htmledit('fontSize',4);">4</a>
<A href="javascript:htmledit('bold');">볼드</A>
<A href="javascript:htmledit('italic');">이탤릭</A>
<A href="javascript:htmledit('underline');">언더라인</A>
<A href="javascript:htmledit('fontname');">언더라인</A>
<P><IFRAME NAME=dhtmlframe></IFRAME>
<P><TEXTAREA NAME="comment" ROWS="3"></TEXTAREA></P>
<P><A href="javascript:datasubmit()">HTML보기</a>
<SCRIPT LANGUAGE="JavaScript">
<!-- JavaScript
dhtmlframe.document.designMode = "On"
// - JavaScript - -->
</SCRIPT>
</form>
</BODY>
</HTML>
그럼 다른 CGI(PHP,ASP..)을 보내기 위해 소스를 다듬어 보도록 하겠습니다.
먼저 <TEXTAREA>에 STYLE="display: none"을 추가 합니다.
그럼 <TEXTAREA STYLE="display: none">가 되며 브라우저에서 보이지 않게 됩니다.
그리고 <form>에는 제대로 보내고자 하는 CGI위치와 method를 지정 합니다.
<A href="javascript:datasubmit()">HTML보기</a>을
<input type="submit" value="확인" Onclick="datasubmit()"> 으로 바꿉니다.
<HTML>
<HEAD>
<TITLE>웹에디터 예제5</TITLE>
<SCRIPT langauge="javascript">
function htmledit(excute,values)
{
if(values==null)
{
dhtmlframe.document.execCommand(excute);
}
else
{
dhtmlframe.document.execCommand(excute,"",values);
}
}
function datasubmit()
{
form.comment.value = dhtmlframe.document.body.innerHTML;
}
</SCRIPT>
</HEAD>
<BODY>
<form name=form method=post action="test.php">
<A href="javascript:htmledit('cut');">자르기</a>
<A href="javascript:htmledit('copy');">복사</a>
<A href="javascript:htmledit('paste');">붙여넣기</a>
<A href="javascript:htmledit('justifyleft');">좌측정렬</a>
<A href="javascript:htmledit('justifycenter');">중심정렬</a>
<A href="javascript:htmledit('justifyright');">우측정렬</a>
<A href="javascript:htmledit('insertorderedlist');">점표시목록</a>
<A href="javascript:htmledit('insertunorderedlist');">숫자목록</a>
<A href="javascript:htmledit('outdent');">들여쓰기줄이기</a>
<A href="javascript:htmledit('indent');">들여쓰기늘이기</a>
<A href="javascript:htmledit('createlink');">링크</a><BR>
글꼴 >
<A href="javascript:htmledit('fontname','굴림');">굴림</a>
<A href="javascript:htmledit('fontname','궁서');">궁서</a>
글크기 >
<A href="javascript:htmledit('fontSize',2);">2</a>
<A href="javascript:htmledit('fontSize',3);">3</a>
<A href="javascript:htmledit('fontSize',4);">4</a>
<A href="javascript:htmledit('bold');">볼드</A>
<A href="javascript:htmledit('italic');">이탤릭</A>
<A href="javascript:htmledit('underline');">언더라인</A>
<A href="javascript:htmledit('fontname');">언더라인</A>
<P><IFRAME NAME=dhtmlframe></IFRAME>
<P><TEXTAREA NAME="comment" ROWS="3"></TEXTAREA></P>
<P><input type="submit" value="확인" Onclick="datasubmit()">
<SCRIPT LANGUAGE="JavaScript">
<!-- JavaScript
dhtmlframe.document.designMode = "On"
// - JavaScript - -->
</SCRIPT>
</form>
</BODY>
</HTML>
지금까지 공개 되었던 소스보다 간단하다는것을 알 수 있습니다. 하지만 중요한 요소는 다들어 가 있으며 여기서부터는 살을 붙이고 디자인도 바꾸면 됩니다. 그 몫은 여러분이 해야 할 일 입니다.
PDF 파일 (223pp)
invalid-file
invalid-file