[강좌]웹에디터만들기 소스와 설명

기본 원리는 IFAME의을 편집 할 수 있도록 하고 자바스크립트에서 DHTML편집 할 수 있는 형태이며 저장은 자바스크립트에서 값을 변환 하고 넘기는 방식 입니다. 1. 편집창 만들기 편집창은 iframe태그를 사용 합니다. 속성으로는 다음과 같은 것들이 있습니다. src="" iframe에서 연결 시킬 경로 width="" 너비 height="" 높이 name="" 이름으로 FRAME의 이름과 동일 하며 taget의 대상이 될 수 있습니다. 예) 여기서 자바스크립트는 iframe이후에 넣어 줘야 합니다. 그럼 위의 파일을 html로 만들고 브라우저에서 읽어오면 편집 가능 하도록 되어 있을 것 입니다. 2. 편집툴바 만들기 와 사이에 자바 스크립트 만듭니다. 그리고 툴바에는 볼드,이탤릭,언더라인 만들고 다음 과 링크를 연결 합니다. 볼드 이탤릭 언더라인 다음 예제를 저장 하고 브라우저를 통해 실행 합니다. 웹에디터 예제2 볼드 이탤릭 언더라인

브라우저에서 편집 가능 한것을 볼수 있습니다. 볼드,이탤릭,언더라인 이외 무엇이 있을까요. cut - 자르기 copy - 복사 paste - 붙여넣기 justifyleft - 좌측정렬 justifycenter - 중심정렬 justifyright - 우측정렬 insertorderedlist - 점표시목록 insertunorderedlist - 숫자목록 outdent - 들여쓰기 줄이기 indent- 들여쓰기 늘이기 createlink - 링크 fontname - 글꼴 fontSize - 글사이즈 자르기 형식등로 사용 할 수 있습니다. 그러나 글꼴 이나 글크기등은 값이 필요 합니다. 이경우 htmledit(excute)에서 excute이외 하나더 인자가 필요 합니다. values 라고 하나 더 추가 합니다. 글꼴을 궁서체로 만들고 싶으면 htmledit('fontname','궁서체') 가 됩니다. 다음 예제를 테스트 해보세요 웹에디터 예제3 자르기 복사 붙여넣기 좌측정렬 중심정렬 우측정렬 점표시목록 숫자목록 들여쓰기줄이기 들여쓰기늘이기 링크
글꼴 > 굴림 궁서 글크기 > 2 3 4 볼드 이탤릭 언더라인

3. 값넘기기 이제까지 HTML과 자바스크립트로만 이용 해서 만들었습니다. 이렇게 만든 값을 CGI(PHP,ASP..)등으로 보내고야 합니다. 아시다 싶이 값을 전송 하는것은 form태그를 시용 합니다. form을 만듭니다. 그리고 form의 속성중 name을 form으로 만들고(아무거나 만들어도 상관 없겠죠)

HTML보기 그럼 다른 CGI(PHP,ASP..)을 보내기 위해 소스를 다듬어 보도록 하겠습니다. 먼저

지금까지 공개 되었던 소스보다 간단하다는것을 알 수 있습니다. 하지만 중요한 요소는 다들어 가 있으며 여기서부터는 살을 붙이고 디자인도 바꾸면 됩니다. 그 몫은 여러분이 해야 할 일 입니다. 그럼 도움이 되었기 바라며 여기부터 광고!! 광고라 너무 이상 하게 생각 하지 말고요.. 제홈페이지가 업데이트 되었으니 많이 놀러 주세요.. http://www.i-nux.co.kr

댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
제목 작성자 날짜
공대여자
공대여자
mins01
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자