작성일 : 11-11-25 16:51
|
[Html] KNEditor
|
 |
|
글쓴이 :
조형래
 조회 : 3,551
|
 KNEditor.zip (60.4K) [5] DATE : 2011-11-25 16:51:46 |
안녕하세요.
허접한 큰머리 입니다.
위지위그 에디터, 큰에디터의 두번째 버전입니다.
이번 버전에서는 바뀐점이 엄청 많습니다.
기본적인 모양은 기존 1버전의 모양과 비슷합니다만..
기능은 천차 만별입니다.
간략히 추가, 변경된 기능을 설명 드리겠습니다.
1. 입력창을 Textarea를 사용.
2. 별도의 많은 처리 없이 위직에디터 사용
3. 위치정보를 이벤트로 처리
4. 글 저장시 입력란 처리 불필요
5. 위직 입력창에서 적용된 스타일에 해당하는 버튼 활성화
6. 색상 선택의 다양화
7. 이미지 삽입시 형태의 다양함
8. 간단한 테이블 삽입
9. 사용의 편리함
위와 같이 대략적으로 9가지를 들수 있습니다.
기존 버전의 자잘한 버그를 수정이 되었습니다.
나름대로 완성은 했지만 어떤 버그가 있을지 모르니..
사용하시다가 문제점이 발견 되시면 제 홈페이지의 버그 픽스 게시판에 적어 주시기 바랍니다.
그럼 즐거운 웹프로그램 하시기 바랍니다.
적용 방법 :
일단 소스를 [다운] 받으신 후에요.
KNEditor.js 파일을 원하는 위치에 복사 하신후에 (이름변경은 안하셨음 합니다. ^^;; )
textarea의 상단에 추가 하신 후에
Editor_Root_Dir의 경로를 KNEditor.js 파일의 위치를 상대 경로로 입력하시면 됩니다.
<script language="JScript">
//** 에디터 파일이 있는 경로 맨 뒤에 / 포함
var Editor_Root_Dir = "./";
//**********************************************************************************
//* 브라우저 타입 및 버전에 따라 처리
//**********************************************************************************
//*
//* 1. 익스플로어 5.5보다 높은 버전일 경우
//* 에디터 js 파일 불러오기
//* 2. 네스케이프 및 오페라 등 익스플로어가 아닐경우는 teaxtarea로 불러오기
//*
//**********************************************************************************
var appName = navigator.appName; //** 브라우저명
var appVersion = parseFloat(navigator.appVersion.split("MSIE")[1]); //** 브라우저 버전
var bitUseEditor //** 에디터 사용 유무
if(appName != "Microsoft Internet Explorer" || appVersion < 5.5){
bitUseEditor = false; //** 익스플로어가 아니고 버전이 5.5보다 작을때는 "사용 안함"
}else{
bitUseEditor = true; //** 에디터 사용함
}
if(bitUseEditor){
document.write('<scrip'+'t language="JScript" src="'+Editor_Root_Dir+'KNEditor.js"></scrip'+'t>');
}
</script>
그리고 Textarea의 하단에는 에디터를 활성화 시켜 주는 구문을 넣어 주어야 합니다.
단 여기서.. 실수를 한부분이 있습니다..
Textarea의 이름에 __ (하이픈X2)이 들어가면 안됩니다 ㅡㅡ;
한개는 문제 없습니다.
<script language="JSCript">
//** 사용할 Textarea의 이름을 삽입
if(bitUseEditor){
Editor_New_Generate('Content');
}
</script>
여기서 Editor_New_Generate('Content'); 의 '' 안의 이름은
원래의 Textarea의 이름을 입력해 주시면 됩니다.
그리고 메뉴 변경 방법은...
위에 적은 Textarea의 하단부 소스가 변경 되면 됩니다.
<script language="JSCript">
if(bitUseEditor){
var Config = new Array;
Config.ToolBar = [
//** 폰트이름
['FontName'],
//** 폰트 사이즈
['FontSize'],
//** 글머리 기호 및 번호 메기기
['separator', 'InsertOrderedList', 'InsertUnOrderedList', 'Outdent', 'Indent'],
//** 정렬
['separator', 'JustifyLeft', 'JustifyCenter', 'JustifyRight'],
//** 버전 정보, 도움말
['separator', 'Version', 'Help'],
//** 줄바꿈
['LineBreak'],
//** 잘라내기, 복사, 붙이기
['Cut', 'Copy', 'Paste', 'separator'],
//** 글자 형태
['Bold', 'Italic', 'Underline', 'separator'],
//** 글자색, 글자 배경색
['ForeColor', 'BackColor', 'separator'],
//** 가로줄, 링크, 링크 그림 삽입, 테이블 삽입
['InsertHorizontalRule', 'CreateLink', 'InsertImage', 'InsertTable', 'separator']
]
Editor_New_Generate('Content', Config);
}
</script>
위 내용을 수정 해 주시면 됩니다.
['LineBreak']는 메뉴의 줄을 바꿔 주는 기능을 합니다.
'separator'는 메뉴 버튼 사이의 세로줄을 넣어 줍니다.
위와 같은 형태로 폰트, 글자 크기, 기본 스타일, 버튼의 정의 등등 모든 기본 설정 정보를 변경 할수 있습니다.
P.S
일단 에디터의 하단부에 저작권 글을 남겨 두었습니다.
카피라이트의 삭제 및 수정은 제작자(Knhead)의 허락이 있어야 합니다.
적용시에 크레이트 문구를 한번 보신 후에 "큰머리 수고했군~" 이라고 한마디 중얼 거리신 후에
KNEditor.js 파일의 298번째 줄의 내용을 지우시면 없어집니다.
그럼 허접한 위지위그 에디터지만.. 많이 사용하시기 바랍니다.
잘만들었다고 생각 하시면. 제 홈피에 글쩜 남겨 주세요.. ㅠ.ㅠ
달랑 테스트 게시판과.. 버그 픽스 게시판이지만요..
참고 사이트 :
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/execCommand.asp
위 사이트에서 제가 사용한 거의 모든 명령어의 정보를 보실수 있습니다.
큰머리 연락처 :
홈페이지 - http://knhead.pe.kr
메일 - knhead@dreamwiz.com
MSN - knhead@yahoo.co,kr
사용했던 html 용 함수
<%
Function txtParser(txt)
txt = Replace(txt, "&" , "&")
txt = Replace(txt, "<" , "<")
txt = Replace(txt, ">" , ">")
txt = Replace(txt, "<br>" , VbCrlf)
txt = Replace(txt, "&nbsp;" , " ")
txt = Replace(txt, "&lt;" , "<")
txt = Replace(txt, "&gt;" , ">")
txtParser = txt
End Function
%>
<%=txtParser(CONTENTS)%>
|
|
1756
