전엔 게시판등에 html태그를 직접 코딩을 하는 식으로 게시물을 올렸지만 요새는 위지윅에딧 방식의 에디터를 달아 놓은 경우가 많습니다.
보통의 웹사이트에서는 익스 플로러 5.0이상에 내장되어 있는 dhtml edit 컨트롤이라는것을 사용하여 만들어놓은 경우가 종종 있습니다.
(오픈 소스의경우 거의 대부분이 이 컨트롤을 세세하게 자바스크립트를 이용하여 컨트롤하는 형식으로 만들어 둔것이 많습니다.)
제가 예전에 한국 과학 기술 평가원의 저작툴을 만들때 이 컨트롤을 이용하여 만들었었는데 분석하면서 자체 세미나 하면서 만들어 두었던 자료 입니다.
---------------------------------
<!--
[Use The DHtmlED control EX.]
[AT Seminar 2003.02.22]
작성자 : 정문수
작성일 : 2003.02.21
-->
<!--
본 소스는 익스 플로러에 내장 되어 있는 dhtmled 컨트롤을 javascript-x 로 핸들링을 하는 예제 소스 입니다.
현재 wysiwyg 방식으로 웹 문서를 작성하는 여러 툴들이 개발되어 있고 - 나모웹에디터, 프론트 페이지, 인터디브, 드림위버 등등-
그 툴들은 어떤 방식으로 만들어 지는가에 대해 대략적인 감을 잡을수 있으리라 생각됩니다.
각 제품마다의 dhtmled 컨트롤은 각 회사들이 개발한것들이기에 다소 차이가 있을수 있으나 기본은 같다라는것만 인지하시면 됩니다.
-->
<!--
[Use The DHtmlED control EX.]
[AT Seminar 2003.02.22]
작성자 : 정문수
작성일 : 2003.02.21
-->
<!--
본 소스는 익스 플로러에 내장 되어 있는 dhtmled 컨트롤을 javascript-x 로 핸들링을 하는 예제 소스 입니다.
현재 wysiwyg 방식으로 웹 문서를 작성하는 여러 툴들이 개발되어 있고 - 나모웹에디터, 프론트 페이지, 인터디브, 드림위버 등등-
그 툴들은 어떤 방식으로 만들어 지는가에 대해 대략적인 감을 잡을수 있으리라 생각됩니다.
각 제품마다의 dhtmled 컨트롤은 각 회사들이 개발한것들이기에 다소 차이가 있을수 있으나 기본은 같다라는것만 인지하시면 됩니다.
라는 코드가 익스 내장 dhmled 컨트롤을 불러 오는것인데 이 컨트롤의 모양은 나모 웹에디터의 편집창을 생각하시면 됩니다.
하얀 바탕에 글자도 써지고 글자를 선택하여 굵게도 하고 그런 일들을 하는 편집창(dhtmled) 을 불러 쓰겠다는 것입니다. (액티브액스 컨트롤 쓰기 태그)
dhtmled 컨트롤의 아이디를 tbCE 라 하고 tbCE의 여러 메소드등을 이용하여 간단하게 html 문서에서 웹문서를 작성하는것을 보여드리겠습니다.
//◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆//
//----------------------------------------------------------------------------------------------------------//
// 폰트를 바꾸는 펑션입니다. (마우스로 선택한 영역의문자들을 선택한 폰트로 바꿉니다.)
//----------------------------------------------------------------------------------------------------------//
function FontName_onchange(sel_obj) {
var ty = sel_obj.options[sel_obj.selectedIndex].value;
var n = sel_obj.selectedIndex;
if( ty != 0 ){
//이하의 함수들에서는 QueryStatus 메소드를 썼는데 이 메소드는 해당 작업을 하기전에 즉 명령을 날리기 전에 명령을 받을수 있는가를 미리 체크해 주는 메소드 입니다.
// 리턴값이 3이어야지 내리려는 명령이 타당하다는 것입니다.
// TriEdit SDK Document(msdn)에 상세히 나와있습니다.
//◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆//
//----------------------------------------------------------------------------------------------------------//
// 열추가
//----------------------------------------------------------------------------------------------------------//
function InsertRow() {
var result_ = obj_editor.QueryStatus(DECMD_INSERTROW); // 현재 인서트 로우 메소드를 수행할수 있는가?
if(result_ == 3){// 가능하다
obj_editor.ExecCommand(DECMD_INSERTROW,OLECMDEXECOPT_DODEFAULT);
}
else return false;
}
//◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆//
//----------------------------------------------------------------------------------------------------------//
// 열 삭제
//----------------------------------------------------------------------------------------------------------//
function DeleteRow() {
var result_ = obj_editor.QueryStatus(DECMD_DELETEROWS); // 체크
if(result_ == 3){
obj_editor.ExecCommand(DECMD_DELETEROWS,OLECMDEXECOPT_DODEFAULT);
}
else return false;
//◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆//
//----------------------------------------------------------------------------------------------------------//
// 셀 나누기
//----------------------------------------------------------------------------------------------------------//
function SplitCell() {
var result_ = obj_editor.QueryStatus(DECMD_SPLITCELL); // 체크
if(result_ == 3){
obj_editor.ExecCommand(DECMD_SPLITCELL,OLECMDEXECOPT_DODEFAULT);
}
else return false;
//obj_editor.focus();
}
//◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆//
//----------------------------------------------------------------------------------------------------------//
// 이 평션은 작은 셀 속성을 위한 창을 띄워서 표컨트롤에 사용자가 삽입하려는 속성을 정의하도록 해주는 펑션 입니다.
//----------------------------------------------------------------------------------------------------------//
function TableWizard() {
var pVar = document.ObjTableInfo;
var NR = pVar.NumRows;
var NC = pVar.NumCols;
var TA = pVar.TableAttrs;
var CA = pVar.CellAttrs;
var funct = 'opener.InsertTable'
var par_tab, k, tc
par_tab=window.open("","param_tables","screenX=80,screenY=80,width=400,height=215")
par_tab.document.open()
k=par_tab.document
k.writeln('<HTML><HEAD><TITLE>표 정의</TITLE>')
k.writeln('<STYLE TYPE="text/css">')
k.writeln(" td,body { font-family:Arial; font-size:9pt; font-weight:bold; } ")
k.writeln('</STYLE>')
k.writeln("<script-x> function comprova_valors() { ")
k.writeln(" var nf, nc, at, ac, tit, nerr=0 , avis")
k.writeln(" avis = '\\nTable can큧 be created due to:' ")
k.writeln(" nf = document.info_table.NumRows.value")
k.writeln(" nc = document.info_table.NumCols.value")
k.writeln(" at = document.info_table.TableAttrs.value")
k.writeln(" ac = document.info_table.CellAttrs.value")
k.writeln(" tit = document.info_table.Caption.value")
k.writeln(" if( nf != parseInt(nf) || nf < 0 ){ ")
k.writeln(" nerr++")
k.writeln(" avis += '\\n\\n-행의 수는 0보다 커야 합니다.'")
k.writeln(" }")
k.writeln(" if( nc != parseInt(nc) || nc < 0 ){ ")
k.writeln(" nerr++")
k.writeln(" avis += '\\n\\n-열의 수는 0보다 커야 합니다.'")
k.writeln(" }")
k.writeln(" if( nerr == 0){ ")
k.writeln(" "+funct+"(nf,nc,at,ac,tit) ")
k.writeln(" window.close(); ")
k.writeln(" }")
k.writeln(" else")
k.writeln(" {")
k.writeln(" alert(avis)")
k.writeln(" }")
k.writeln(" return true ")
k.writeln(" }</"+"script-x>")
k.writeln('</HEAD><BODY bgcolor=white ><center>')
k.writeln('<form name=info_table onsubmit="comprova_valors();" >');
k.writeln("<font color=black face=arial size=-1 ><b> 행, 열의 수를 정하고 입력버튼을 누르세요.</b></font>")
k.writeln('<TABLE CELLSPACING=10><TR><TD valign=absmiddle >Rows : <INPUT TYPE=TEXT SIZE=3 maxlength=2 NAME=NumRows value='+NR+' ></TD>')
k.writeln('<TD valign=absmiddle >Columns : <INPUT TYPE=TEXT SIZE=3 maxlength=2 NAME=NumCols value='+NC+'></TD></TR>')
k.writeln('<TR><TD>테이블속성 : </TD><TD valign=absmiddle ><INPUT TYPE=TEXT SIZE=20 NAME=TableAttrs maxlength=120 value='+TA+'></TD></TR>')
k.writeln('<TR><TD>셀 속성 :</TD><TD><INPUT TYPE=TEXT SIZE=20 NAME=CellAttrs value='+CA+'></TD></TR>')
k.writeln('<TR><TD>캡션 : </TD><TD><INPUT TYPE=TEXT SIZE=20 NAME=Caption ></TD></TR></TABLE>')
k.writeln('<TR><TD valign=absmiddle colspan=2 align=center ><INPUT TYPE=BUTTON NAME=OK VALUE=입력 onclick="comprova_valors()" ></TD></TR></TABLE></form>')
k.writeln('</center></BODY></HTML>')
k.close()
par_tab.focus()
return true
}
//이미지삽입을 위한 펑션입니다.
//◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆//
//----------------------------------------------------------------------------------------------------------//
// 사용자가 이미지를 지정해서 바로 삽입하는 펑션입니다.
//----------------------------------------------------------------------------------------------------------//
function InsertImageUserDefined() {
/*
OLECMDEXECOPT_DONTPROMPTUSER Specifies that no dialog box should be displayed. The name of the image file should be passed in the url parameter. If no url parameter is passed, the SRC attribute is omitted when the <IMG> tag is inserted into the document.
중간 파라미터 옵션에 따라 두가지 모드를 쓸수 있다.
promptuser 옵션은 다이얼로그 박스를 띄워서(컨트롤 내장) 사용자가 넣을수있도록 한다.
이것은 로컬 파일로 지정하므로 외부에서는 이미지를 볼수없다.
dontpromtpuser 옵션은 컨트롤 내장 다이얼로그 박스를 띄우는게 아니고 맨 뒤의 파라미터를 추가 해야한다. (이미지 url)
파일 업로드 창을 띄우고 이미지를 업로드 한 다음에 dontpromtpuser 옵션을 써서 execcommand를 호출한다.
*/
//var lecture_id="{lecture_id}";
//window.open("./UploadFile.php?kind=image&lecture_id=" + lecture_id,'ImageUpload','width=300,height=100,no');
var imgsrc = "D:\\Study\\won1.jpg";
obj_editor.ExecCommand(DECMD_IMAGE,OLECMDEXECOPT_DONTPROMPTUSER,imgsrc);
}
//◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆//
//----------------------------------------------------------------------------------------------------------//
// 이미지 다이얼로그박스를 띄워서 선택한 이미지를 넣을수 있도록 하는것입니다.
//----------------------------------------------------------------------------------------------------------//
function InsertImage(){
obj_editor.ExecCommand(DECMD_IMAGE,OLECMDEXECOPT_PROMPTUSER);
}
// 이 펑션은 소스를 볼수 있도록하는것입니다.
function ViewSource(){
var cont ;
cont = obj_editor.DocumentHTML;
alert(cont);
}
xEditCtrl은 게시판과 웹메일 등에 GUI 에디팅 환경을 제공하기 위한 것으로 원래는 http://www.powerdb.net/ (database.sarang.net, aka. DSN)에서 사용하기 위한 목적으로 개발되었다. 시제품으로 나온 상용 컨트롤에 비하면 미흡하겠지만, 아무런 제약이 없는 프리웨어이다. 컨트롤 자체를 판매하는 일만 아니고, 두 가지 약속 (사실상 한 가지)만 지킨다면, 상업적인 사이트에서 사용해도 된다. 이 컨트롤을 사용할 경우 지켜할 두 가지 사항에 대해서는 문서 마지막을 참조하길 바란다.
2009-03-27 07:06:21
1951
43
1
3
