웹마스터 팁

  2. Support
  3. 웹마스터 팁

나만의 위지윅 웹에디터 만들기 - 기본 준비1

2008.05.05 05:53

예뜨락

제작은 XHTML 1.1의 형태로 만들겠습니다
그러니 헤더의 document doctype이 변하면 다소 레이아웃이 깨지는 경향이 있을수도 있음을 미리 고지합니다
타입 지정에 의해 엄격모드와 일반모드 버전등 또는 지정없이 썼을 경우 렌더링의 차이에 의해 약간의 픽셀 오차가 있습니다


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
<title>테스트 위지윅에디터</title>
<script type="text/javascript" src="./editer.js"></script>
<style type="text/css">
body{
     margin  : 80px;
     padding : 0px 0px 0px  0px;
}
</style>
</head>
<body>
<textarea name="memo" id="memos" rows="20" cols="55" style="width:500px;height:250px;">
변환 과정을 테스트 하기 위해 쓰는 글
</textarea>
<br />
<textarea name="memo2" id="memos2" rows="20" cols="55" style="width:500px;height:250px;">
변환 과정을 테스트 하기 위해 쓰는 글2
</textarea>
</body>
</html>



먼저 editer란 이름으로 바탕화면에 폴더를 하나 생성합니다
그후 위의 소스를 복사해서 메모장을 열고 붙여 넣은후 editer.html 로 저장합니다
저장되어 만들어진  editer.html 를  editer폴더 안에 집어 넣습니다

이번에 editer폴더 안에 images란 이름의 폴더 를 하나 더 만들어 놓습니다 이곳에 앞으로 만들어질 이미지들을
집어 넣을 생각입니다

메모장을 열고 editer.js란 이름으로 js파일을 생성합니다

현재의 폴더 모양은 다음과 같습니다

editer(폴더)----------------images        (  폴더   -  이미지들이 들어가게될 폴더)
                      |_________editer.js      (   js파일   -  에디터에 사용되어질 자바스크립트가 기록될 파일 )
                      |_________editer.html (   html파일 - 에디터가 담길 파일 - textarea가 스크립에 의해 자동으로 에디터로 변환 )



잠깐 한마디 -
첨부파일을 통해 직접 드릴수도 있지만 이런 작은 일련의 수고스러움도 없이 배우시겠다는 생각이시면 이미 만들어진
에디터 사용을 권해 드립니다 갖고자 하는 의욕만 앞서고 하고자 하는 의욕이 없으면 아무리 쉽게 알려드린다고 해도
이미 그 지식은 자신의 것이 아닌 겉치레에 불과합니다
버튼 이미지 파일외에 완성된 파일은 강의가 끝나는 그 시점에 상황을 봐서 올릴 생각입니다
그러니 파일을 올리란 얘기는 아예 답글로 남기시지 않았으면 합니다



js파일을 열고 다음의 굵게 쓰여진 사항을 기재하십시오
( js파일엔 자바스크립트 선언 없이 아래의 사항만 타이핑하시면 됩니다
  직접 본문에 자바스크립트를 써 넣어도 되지만 만들어 가는 과정에 소스가 계속 불어나게 되므로 강의 차원에서
  이후 알려드리게 될 소스라인의 정확도나 (몇째줄 추가 몇째줄 수정 등등 )편리성을 위해서 입니다


//전역변수 선언

//버튼에 관한 배열

//에디터 기능함수들

//에디터 start

//에디터 모드 체인지

//온로드시 실행함수


위에 있는 사항이 기본골자이며 이외의 것은 진행하면서 살을 붙이도록 하겠습니다

자바스크립트는 c와 비슷해서 //을 주석으로 여기며 그줄은 해석하지 않습니다
몇줄 안되는 소스 같으면 한줄 주석으로도 충분하지만 진행과정에 의해 소스가 많아질것입니다
그럴 경우 소스확인을 편하게 하기 위해서 /* */ 와 같이 여러줄을 커버할수 있는 주석 처리와 병행하게 할 것이며
소스를 적거나 쓸 경우 주의할 점은 가독성을 높이기 위해 들여쓰기를 잘하길 당부합니다

html소스보기만 해도 프로그램을 만든 사람의 성격을 볼수 있습니다
프로그램을 잘짜는 사람들을 보면 자신도 이해할 뿐 아니라 타인이 봐도 보기좋고 간결하게 코드를 짜며 배치 시킵니다
그러니 들여쓰기 적절한 주석등은 타인을 위해서도 자신을 위해서도 습관을 잘 들이십시오

아래 업로드 시킨 이미지들은 images폴더 안에 업로드 하십시오
이미지의 온오프 변경은 제로보드 xe에서 사용한 스타일 시트 형식을 사용합니다 온 오프 그림을 따로 로딩시키거나 할수
있지만 나름 편리한 면이 더 있기에 해당 방식으로 진행할 것입니다



글을 좀더 쓰고 싶지만 분량이 많아 지다 보면 자연 읽으면서 질리기에 연재량을 늘리는 한이 있더라도 글의 양은 질리지
않는 한도내에서 되도록 짧게 작성할테니 이해 바랍니다


포인트성 노림글이냐 라고 물으시면 끄덕여 드릴수 있지만
자유게시판에 글 몇개 남기는게 더 쉬운 노동력이란걸 덧 붙이고 싶습니다













이 게시물을
수정 삭제
좋아요
목록
태그 쓰기