Editor ing.

git-svn-id: http://xe-core.googlecode.com/svn/sandbox@4735 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
ChanMyeong 2008-10-31 18:49:20 +00:00
parent b47437b088
commit 2accecec5d
12 changed files with 937 additions and 723 deletions

View file

@ -1,52 +1,207 @@
@charset "utf-8";
.xeEditor { }
.xeEditor .optionABC { clear:both; width:100%; overflow:hidden; background:transparent;}
.xeEditor .optionABC .selectGroup { white-space:nowrap; display:block; height:21px; margin:0 .5em 0 0; padding-left:1em; float:left;}
.xeEditor .optionABC .buttonGroup { white-space:nowrap; position:relative; display:block; margin:0 .5em 0 0; float:left; height:21px; overflow:hidden; padding-left:2px;}
.xeEditor .optionABC .buttonGroup img { float:left; display:block; margin-left:-1px; cursor:pointer;}
.xeEditor .optionA,
.xeEditor .optionB,
.xeEditor .optionC { float:left; background:transparent; padding:.5em 0 .5em .7em; overflow:hidden;}
.xeEditor .optionA *,
.xeEditor .optionB *,
.xeEditor .optionC * { vertical-align:middle;}
.xeEditor .optionA { background-position:-3px bottom; padding-left:0;}
.xeEditor .optionA select option { font-size:.9em; }
.xeEditor .optionDE { width:100%; clear:both; overflow:hidden; background:transparent;height:29px;}
.xeEditor .optionDE .buttonGroup { white-space:nowrap; position:relative; display:block; float:left; height:21px; overflow:hidden; padding-left:2px;}
.xeEditor .optionDE img { float:left; display:block; margin-right:.5em; cursor:pointer;}
.xeEditor .optionD { padding:.5em 0 .5em .8em; overflow:hidden; float:left; border-right:1px solid #e0e0e0;}
.xeEditor .optionE { padding:4px 0 0 9px; overflow:hidden; float:left;}
.xeEditor .editorInfo { background:transparent; padding:.5em; border:1px solid #e1e1dd; color:#999999; position:relative; margin:5px 10px 0 10px;}
.xeEditor .close { cursor:pointer; position:absolute; top:3px; right:3px; _top:3px; _right:15px;}
.xeEditor .editor_iframe_box { clear:both; border:1px solid; border-color:#a6a6a6 #d8d8d8 #d8d8d8 #a6a6a6; padding:0; margin:3px 10px 5px 10px; }
.xeEditor .editor_iframe_textarea { background:#ffffff; clear:both; border:1px solid; border-color:#a6a6a6 #d8d8d8 #d8d8d8 #a6a6a6; margin:5px 10px 0 10px; width:100%; font-size:1em; display:none;}
.xeEditor .textAreaDragIndicator { text-align:center; background:url(../images/lineTextAreaDrag.gif) repeat-x left center; padding:5px 0 5px 0; }
.xeEditor .textAreaDragIndicatorBar { background:url(../images/buttonTextAreaDrag.gif) no-repeat center; cursor:move;height:14px;}
.xeEditor .editor_info { clear:both; padding:5px 10px 0 10px; overflow:hidden;}
.xeEditor .editor_info .editor_option { float:left; color:#888888; }
.xeEditor .editor_info .editor_autosaved_message { display:none; color:#888888; float:right; }
.xeEditor .inputTypeTextArea { background:#fbfbfb; padding:1em; width:94%;}
.xeEditor .fileAttach { border:none; table-layout:fixed; margin:0 10px 0 10px; }
.xeEditor .fileAttach .preview { padding:5px; border:1px solid #e1e1dd; width:100px; height:100px; margin-right:10px;}
.xeEditor .fileAttach .preview img { width:100px; height:100px; }
.xeEditor .fileAttach .fileListArea .fileList { background:transparent; overflow:auto; width:100%; height:auto; border:1px solid; border-color:#a6a6a6 #d8d8d8 #d8d8d8 #a6a6a6; margin-bottom:10px; font-size:11px;}
.xeEditor .fileAttach .fileListArea .fileList option { line-height:100%; padding-left:.5em;}
.xeEditor .fileAttach .fileUploadControl { float:left; }
.xeEditor .fileAttach .file_attach_info { color:#AAAAAA; font-size:.9em; _font-size:8pt; text-align:right;}
*:first-child+html .xeEditor .fileAttach .file_attach_info { font-size:8pt; }
.xeEditor .fileAttach .fileUploadControl .uploaderButton { display:block; cursor:pointer; background:url(../images/buttonTypeBCenter.gif) repeat-x left center; line-height:100%; overflow:visible; color:#3f4040; margin:0 1px; font-size:.9em; white-space:nowrap;}
.xeEditor .fileAttach .fileUploadControl .uploaderButton:hover { text-decoration:none;}
.xeEditor .fileAttach .fileUploadControl .uploaderButton img { vertical-align:middle;}
.xeEditor .fileAttach .fileUploadControl .uploaderButton .leftCap { width:2px; height:21px; background:url(../images/buttonTypeBLeft.gif) no-repeat; margin:0 .3em 0 0; position:relative; left:-1px;}
.xeEditor .fileAttach .fileUploadControl .uploaderButton .rightCap { width:2px; height:21px; background:url(../images/buttonTypeBRight.gif) no-repeat; margin:0 -1px 0 .4em;}
.xeEditor .fileAttach .fileUploadControl .uploaderButton .icon { margin:0 .2em;}
@charset "utf-8";
.xeEditor{}
.editorTypeSelector{ position:relative; right:3px; z-index:10; float:right; clear:both; *zoom:1; margin-bottom:-2px !important;}
.editorTypeSelector:after{ content:""; display:block; clear:both;}
.editorTypeSelector li,
.editorTypeSelector a{ display:block; float:left; position:relative; background-image:url(../images/tabEditorSelector.gif); background-repeat:no-repeat;}
.editorTypeSelector li{ background-position:left top; margin-right:5px;}
.editorTypeSelector li a{ padding:3px 10px 0 10px; height:21px; left:3px; background-position:right top; text-decoration:none !important; white-space:nowrap;}
.editorTypeSelector li.active{ background-position:left -24px;}
.editorTypeSelector li.active a{ background-position:right -24px; font-weight:bold; height:23px;}
.editorList{ clear:both; position:relative; z-index:1; border-top:1px solid #ddd; *zoom:1}
.editorList .editorItem{ display:none;}
.editorList.xe #xeEditor,
.editorList.text #textEditor,
.editorList.html #htmlEditor{ display:block;}
.toolBox{ padding:5px 10px 8px 10px !important; background:#fafafa url(../images/buttonSetBg.gif) repeat-x left bottom; *zoom:1;}
.toolBox:after{ content:""; display:block; clear:both;}
.toolBox .toolA{ position:relative; float:left; clear:both; *margin-bottom:5px;}
.toolBox .toolA ul{ float:left; margin:0 5px 5px 0;}
.toolBox .toolA li{ float:left; font-size:0; line-height:0;}
.toolBox .toolA button{ border:0; width:21px; height:21px; background-color:#fff; background-image:url(../images/buttonSet.gif); background-position:no-repeat; cursor:pointer;}
.toolBox .toolA span{ position:relative; z-index:-1;}
.toolBox .toolB{ clear:both; position:relative; left:-5px; overflow:hidden;}
.toolBox .toolB li{ position:relative; left:-1px; display:inline; padding-left:3px; background:url(../images/lineV11.gif) no-repeat left center; *zoom:1;}
.toolBox .toolB li button{ background:none; border:none; height:21px; *margin:0 -5px; cursor:pointer; font:11px Dotum, Tahoma; letter-spacing:-1px; display:inline; padding:0 !important;}
/* ToolBox Button Default */
.toolBox .do{ width:43px;}
.toolBox .undo button{ width:22px;}
.toolBox .redo button{ background-position:-22px 0;}
.toolBox .type *{ font-size:12px; line-height:100%;}
.toolBox .type select{ height:21px;}
.toolBox .type .hx{}
.toolBox .type .size .px10{ font-size:10px;}
.toolBox .type .size .px13{ font-size:13px;}
.toolBox .type .size .px16{ font-size:16px;}
.toolBox .type .size .px18{ font-size:18px;}
.toolBox .type .size .px24{ font-size:24px;}
.toolBox .type .size .px32{ font-size:32px;}
.toolBox .type .size .px48{ font-size:48px;}
.toolBox .type .family{}
.toolBox .style{ width:214px;}
.toolBox .bold button{ width:22px; background-position:-43px 0;}
.toolBox .underline button{ background-position:-65px 0;}
.toolBox .italic button{ background-position:-86px 0;}
.toolBox .strike button{ background-position:-107px 0;}
.toolBox .sup button{ background-position:-128px 0;}
.toolBox .sub button{ background-position:-149px 0;}
.toolBox .txColor button{ background-position:-170px 0;}
.toolBox .bgColor button{ background-position:-191px 0;}
.toolBox .styleRemover button{ width:45px; background-position:-212px 0;}
.toolBox .paragraph{ width:169px;}
.toolBox .alignLeft button{ width:22px; background-position:-257px 0;}
.toolBox .alignCenter button{ background-position:-279px 0;}
.toolBox .alignRight button{ background-position:-300px 0;}
.toolBox .alignJustify button{ background-position:-321px 0;}
.toolBox .orderedList button{background-position:-342px 0;}
.toolBox .unorderedList button{ background-position:-363px 0;}
.toolBox .outdent button{ background-position:-384px 0;}
.toolBox .indent button{ background-position:-405px 0;}
.toolBox .extension{ width:132px;}
.toolBox .url button{ width:27px; background-position:-426px 0;}
.toolBox .blockquote button{ background-position:-453px 0;}
.toolBox .table button{ background-position:-474px 0;}
.toolBox .image button{ background-position:-495px 0;}
.toolBox .movie button{ background-position:-516px 0;}
.toolBox .emoticon button{ background-position:-537px 0;}
/* ToolBox Button Hover & Focus & Active */
.toolBox .undo button:hover,
.toolBox .undo button:focus{ background-position:0 -21px;}
.toolBox .undo button:active{ background-position:0 -42px;}
.toolBox .redo button:hover,
.toolBox .redo button:focus{ background-position:-22px -21px;}
.toolBox .redo button:active{ background-position:-22px -42px;}
.toolBox .bold button:hover,
.toolBox .bold button:focus{ background-position:-43px -21px;}
.toolBox .bold button:active{ background-position:-43px -42px;}
.toolBox .underline button:hover,
.toolBox .underline button:focus{ background-position:-65px -21px;}
.toolBox .underline button:active{ background-position:-65px -42px;}
.toolBox .italic button:hover,
.toolBox .italic button:focus{ background-position:-86px -21px;}
.toolBox .italic button:active{ background-position:-86px -42px;}
.toolBox .strike button:hover,
.toolBox .strike button:focus{ background-position:-107px -21px;}
.toolBox .strike button:active{ background-position:-107px -42px;}
.toolBox .sup button:hover,
.toolBox .sup button:focus{ background-position:-128px -21px;}
.toolBox .sup button:active{ background-position:-128px -42px;}
.toolBox .sub button:hover,
.toolBox .sub button:focus{ background-position:-149px -21px;}
.toolBox .sub button:active{ background-position:-149px -42px;}
.toolBox .txColor button:hover,
.toolBox .txColor button:focus{ background-position:-170px -21px;}
.toolBox .txColor button:active{ background-position:-170px -42px;}
.toolBox .bgColor button:hover,
.toolBox .bgColor button:focus{ background-position:-191px -21px;}
.toolBox .bgColor button:active{ background-position:-191px -42px;}
.toolBox .styleRemover button:hover,
.toolBox .styleRemover button:focus{ background-position:-212px -21px;}
.toolBox .styleRemover button:active{ background-position:-212px -42px;}
.toolBox .alignLeft button:hover,
.toolBox .alignLeft button:focus{ background-position:-257px -21px;}
.toolBox .alignLeft button:active{ background-position:-257px -42px;}
.toolBox .alignCenter button:hover,
.toolBox .alignCenter button:focus{ background-position:-279px -21px;}
.toolBox .alignCenter button:active{ background-position:-279px -42px;}
.toolBox .alignRight button:hover,
.toolBox .alignRight button:focus{ background-position:-300px -21px;}
.toolBox .alignRight button:active{ background-position:-300px -42px;}
.toolBox .alignJustify button:hover,
.toolBox .alignJustify button:focus{ background-position:-321px -21px;}
.toolBox .alignJustify button:active{ background-position:-321px -42px;}
.toolBox .orderedList button:hover,
.toolBox .orderedList button:focus{background-position:-342px -21px;}
.toolBox .orderedList button:active{background-position:-342px -42px;}
.toolBox .unorderedList button:hover,
.toolBox .unorderedList button:focus{ background-position:-363px -21px;}
.toolBox .unorderedList button:active{ background-position:-363px -42px;}
.toolBox .outdent button:hover,
.toolBox .outdent button:focus{ background-position:-384px -21px;}
.toolBox .outdent button:active{ background-position:-384px -42px;}
.toolBox .indent button:hover,
.toolBox .indent button:focus{ background-position:-405px -21px;}
.toolBox .indent button:active{ background-position:-405px -42px;}
.toolBox .url button:hover,
.toolBox .url button:focus{ background-position:-426px -21px;}
.toolBox .url button:active{ background-position:-426px -42px;}
.toolBox .blockquote button:hover,
.toolBox .blockquote button:focus{ background-position:-453px -21px;}
.toolBox .blockquote button:active{ background-position:-453px -42px;}
.toolBox .table button:hover,
.toolBox .table button:focus{ background-position:-474px -21px;}
.toolBox .table button:active{ background-position:-474px -42px;}
.toolBox .image button:hover,
.toolBox .image button:focus{ background-position:-495px -21px;}
.toolBox .image button:active{ background-position:-495px -42px;}
.toolBox .movie button:hover,
.toolBox .movie button:focus{ background-position:-516px -21px;}
.toolBox .movie button:active{ background-position:-516px -42px;}
.toolBox .emoticon button:hover,
.toolBox .emoticon button:focus{ background-position:-537px -21px;}
.toolBox .emoticon button:active{ background-position:-537px -42px;}
/* .xeEditor { }
.xeEditor .optionABC { clear:both; width:100%; overflow:hidden; background:transparent;}
.xeEditor .optionABC .selectGroup { white-space:nowrap; display:block; height:21px; margin:0 .5em 0 0; padding-left:1em; float:left;}
.xeEditor .optionABC .buttonGroup { white-space:nowrap; position:relative; display:block; margin:0 .5em 0 0; float:left; height:21px; overflow:hidden; padding-left:2px;}
.xeEditor .optionABC .buttonGroup img { float:left; display:block; margin-left:-1px; cursor:pointer;}
.xeEditor .optionA,
.xeEditor .optionB,
.xeEditor .optionC { float:left; background:transparent; padding:.5em 0 .5em .7em; overflow:hidden;}
.xeEditor .optionA *,
.xeEditor .optionB *,
.xeEditor .optionC * { vertical-align:middle;}
.xeEditor .optionA { background-position:-3px bottom; padding-left:0;}
.xeEditor .optionA select option { font-size:.9em; }
.xeEditor .optionDE { width:100%; clear:both; overflow:hidden; background:transparent;height:29px;}
.xeEditor .optionDE .buttonGroup { white-space:nowrap; position:relative; display:block; float:left; height:21px; overflow:hidden; padding-left:2px;}
.xeEditor .optionDE img { float:left; display:block; margin-right:.5em; cursor:pointer;}
.xeEditor .optionD { padding:.5em 0 .5em .8em; overflow:hidden; float:left; border-right:1px solid #e0e0e0;}
.xeEditor .optionE { padding:4px 0 0 9px; overflow:hidden; float:left;}
.xeEditor .editorInfo { background:transparent; padding:.5em; border:1px solid #e1e1dd; color:#999999; position:relative; margin:5px 10px 0 10px;}
.xeEditor .close { cursor:pointer; position:absolute; top:3px; right:3px; _top:3px; _right:15px;}
.xeEditor .editor_iframe_box { clear:both; border:1px solid; border-color:#a6a6a6 #d8d8d8 #d8d8d8 #a6a6a6; padding:0; margin:3px 10px 5px 10px; }
.xeEditor .editor_iframe_textarea { background:#ffffff; clear:both; border:1px solid; border-color:#a6a6a6 #d8d8d8 #d8d8d8 #a6a6a6; margin:5px 10px 0 10px; width:100%; font-size:1em; display:none;}
.xeEditor .textAreaDragIndicator { text-align:center; background:url(../images/lineTextAreaDrag.gif) repeat-x left center; padding:5px 0 5px 0; }
.xeEditor .textAreaDragIndicatorBar { background:url(../images/buttonTextAreaDrag.gif) no-repeat center; cursor:move;height:14px;}
.xeEditor .editor_info { clear:both; padding:5px 10px 0 10px; overflow:hidden;}
.xeEditor .editor_info .editor_option { float:left; color:#888888; }
.xeEditor .editor_info .editor_autosaved_message { display:none; color:#888888; float:right; }
.xeEditor .inputTypeTextArea { background:#fbfbfb; padding:1em; width:94%;}
.xeEditor .fileAttach { border:none; table-layout:fixed; margin:0 10px 0 10px; }
.xeEditor .fileAttach .preview { padding:5px; border:1px solid #e1e1dd; width:100px; height:100px; margin-right:10px;}
.xeEditor .fileAttach .preview img { width:100px; height:100px; }
.xeEditor .fileAttach .fileListArea .fileList { background:transparent; overflow:auto; width:100%; height:auto; border:1px solid; border-color:#a6a6a6 #d8d8d8 #d8d8d8 #a6a6a6; margin-bottom:10px; font-size:11px;}
.xeEditor .fileAttach .fileListArea .fileList option { line-height:100%; padding-left:.5em;}
.xeEditor .fileAttach .fileUploadControl { float:left; }
.xeEditor .fileAttach .file_attach_info { color:#AAAAAA; font-size:.9em; _font-size:8pt; text-align:right;}
*:first-child+html .xeEditor .fileAttach .file_attach_info { font-size:8pt; }
.xeEditor .fileAttach .fileUploadControl .uploaderButton { display:block; cursor:pointer; background:url(../images/buttonTypeBCenter.gif) repeat-x left center; line-height:100%; overflow:visible; color:#3f4040; margin:0 1px; font-size:.9em; white-space:nowrap;}
.xeEditor .fileAttach .fileUploadControl .uploaderButton:hover { text-decoration:none;}
.xeEditor .fileAttach .fileUploadControl .uploaderButton img { vertical-align:middle;}
.xeEditor .fileAttach .fileUploadControl .uploaderButton .leftCap { width:2px; height:21px; background:url(../images/buttonTypeBLeft.gif) no-repeat; margin:0 .3em 0 0; position:relative; left:-1px;}
.xeEditor .fileAttach .fileUploadControl .uploaderButton .rightCap { width:2px; height:21px; background:url(../images/buttonTypeBRight.gif) no-repeat; margin:0 -1px 0 .4em;}
.xeEditor .fileAttach .fileUploadControl .uploaderButton .icon { margin:0 .2em;} */

View file

@ -1,195 +1,215 @@
<!--// 스킨 css 로드 -->
<!--%import("css/editor.css")-->
<!--// 기본 js/언어파일 로드 -->
<!--%import("../../tpl/js/editor_common.js")-->
<!--%import("../../tpl/js/editor.js")-->
<!-- 자동저장용 폼 -->
<!--@if($enable_autosave)-->
<input type="hidden" name="_saved_doc_title" value="{htmlspecialchars($saved_doc->title)}" />
<input type="hidden" name="_saved_doc_content" value="{htmlspecialchars($saved_doc->content)}" />
<input type="hidden" name="_saved_doc_message" value="{$lang->msg_load_saved_doc}" />
<!--@end-->
<!-- 에디터 -->
<div class="xeEditor">
<div id="xeEditorOption_{$editor_sequence}">
<!--@if($enable_default_component)-->
<!-- 기본 컴포넌트 출력 -->
<div class="optionABC">
<div class="optionA">
<div class="selectGroup">
<select onchange="editorChangeFontName(this,'{$editor_sequence}')" id="editor_font_{$editor_sequence}">
<option value="">{$lang->edit->fontname}</option>
<!--@foreach($lang->edit->fontlist as $key=>$obj)-->
<option style="font-family:{$obj}" value="{$obj}">{$obj}</option>
<!--@end-->
</select>
<select onchange="editorChangeFontSize(this,'{$editor_sequence}')" id="editor_fontsize_{$editor_sequence}">
<option value="" selected="selected">{$lang->edit->fontsize}</option>
<option value="1">8pt</option>
<option value="2">10pt</option>
<option value="3">12pt</option>
<option value="4">14pt</option>
<option value="5">18pt</option>
<option value="6">24pt</option>
<option value="7">36pt</option>
</select>
<select onchange="editorChangeHeader(this,'{$editor_sequence}')" id="editor_header_{$editor_sequence}">
<option value="">{$lang->edit->header}</option>
<!--@foreach($lang->edit->header_list as $key=>$obj)-->
<option value="{$key}">{$obj}</option>
<!--@end-->
</select>
</div>
<div class="buttonGroup">
<img src="./images/editor_btn_b.gif" width="23" height="63" title="{$lang->edit->help_bold}" alt="{$lang->edit->help_bold}" id="component_{$editor_sequence}_Bold" onmouseover="eOptionOver(this)" onmouseout="eOptionOut(this)" />
<img src="./images/editor_btn_i.gif" width="23" height="63" title="{$lang->edit->help_italic}" alt="{$lang->edit->help_italic}" id="component_{$editor_sequence}_Italic" onmouseover="eOptionOver(this)" onmouseout="eOptionOut(this)" />
<img src="./images/editor_btn_u.gif" width="23" height="63" title="{$lang->edit->help_underline}" alt="{$lang->edit->help_underline}" id="component_{$editor_sequence}_Underline" onmouseover="eOptionOver(this)" onmouseout="eOptionOut(this)" />
<img src="./images/editor_btn_strikethrough.gif" width="23" height="63" title="{$lang->edit->help_strike_through}" alt="{$lang->edit->help_underline}" id="component_{$editor_sequence}_StrikeThrough" onmouseover="eOptionOver(this)" onmouseout="eOptionOut(this)" />
<img src="./images/editor_btn_removeformat.gif" width="23" height="63" title="{$lang->edit->help_remove_format}" alt="{$lang->edit->help_underline}" id="component_{$editor_sequence}_RemoveFormat" onmouseover="eOptionOver(this)" onmouseout="eOptionOut(this)" />
<img src="./images/editor_btn_c.gif" width="23" height="63" title="{$lang->edit->help_fontcolor}" alt="{$lang->edit->help_fontcolor}" id="component_{$editor_sequence}_colorpicker_text" onmouseover="eOptionOver(this)" onmouseout="eOptionOut(this)" />
<img src="./images/editor_btn_bg.gif" width="23" height="63" title="{$lang->edit->help_fontbgcolor}" alt="{$lang->edit->help_fontbgcolor}" id="component_{$editor_sequence}_colorpicker_bg" onmouseover="eOptionOver(this)" onmouseout="eOptionOut(this)" />
</div>
</div>
<div class="optionB">
<div class="buttonGroup">
<img src="./images/editor_btn_al.gif" width="23" height="63" title="{$lang->edit->help_align_left}" alt="{$lang->edit->help_align_left}" id="component_{$editor_sequence}_JustifyLeft" onmouseover="eOptionOver(this)" onmouseout="eOptionOut(this)" />
<img src="./images/editor_btn_ac.gif" width="23" height="63" title="{$lang->edit->help_align_center}" alt="{$lang->edit->help_align_center}" id="component_{$editor_sequence}_JustifyCenter" onmouseover="eOptionOver(this)" onmouseout="eOptionOut(this)" />
<img src="./images/editor_btn_ar.gif" width="23" height="63" title="{$lang->edit->help_align_right}" alt="{$lang->edit->help_align_right}" id="component_{$editor_sequence}_JustifyRight" onmouseover="eOptionOver(this)" onmouseout="eOptionOut(this)" />
<img src="./images/editor_btn_aj.gif" width="23" height="63" title="{$lang->edit->help_align_full}" alt="{$lang->edit->help_align_full}" id="component_{$editor_sequence}_JustifyFull" onmouseover="eOptionOver(this)" onmouseout="eOptionOut(this)" />
</div>
<div class="buttonGroup">
<img src="./images/editor_btn_od.gif" title="{$lang->edit->help_remove_indent}" alt="{$lang->edit->help_remove_indent}" id="component_{$editor_sequence}_Outdent" width="23" height="63" onmouseover="eOptionOver(this)" onmouseout="eOptionOut(this)" />
<img src="./images/editor_btn_id.gif" width="23" height="63" title="{$lang->edit->help_add_indent}" alt="{$lang->edit->help_add_indent}" id="component_{$editor_sequence}_Indent" onmouseover="eOptionOver(this)" onmouseout="eOptionOut(this)" />
</div>
<div class="buttonGroup">
<img src="./images/editor_btn_ul.gif" title="{$lang->edit->help_list_bullet}" alt="{$lang->edit->help_list_bullet}" id="component_{$editor_sequence}_InsertUnorderedList" width="23" height="63" onmouseover="eOptionOver(this)" onmouseout="eOptionOut(this)" />
<img src="./images/editor_btn_ol.gif" title="{$lang->edit->help_list_number}" alt="{$lang->edit->help_list_number}" id="component_{$editor_sequence}_InsertOrderedList" width="23" height="63" onmouseover="eOptionOver(this)" onmouseout="eOptionOut(this)" />
</div>
<!--
<div class="buttonGroup">
<img src="./images/editor_btn_lh.gif" alt="Line hight" width="23" height="63" onmouseover="eOptionOver(this)" onmouseout="eOptionOut(this)" />
</div>
-->
</div>
<!--
<div class="optionC">
<div class="buttonGroup">
<img src="./images/editor_btn_tag.gif" alt="Tag" width="23" height="63" onmouseover="eOptionOver(this)" onmouseout="eOptionOut(this)" />
</div>
</div>
-->
</div>
<!--@end-->
<!--@if($enable_component)-->
<!-- 확장 컴포넌트 출력 -->
<div class="optionDE">
<div class="optionE">
<div class="buttonGroup" id="editor_component_{$editor_sequence}">
<!--@foreach($component_list as $component_name => $component)-->
<!--@if(substr($component_name,0,11)!="colorpicker")-->
<img src="../../components/{$component_name}/icon.gif" alt="{$component->title}" title="{$component->title}" id="component_{$editor_sequence}_{$component_name}" onmouseover="eOptionOver(this)" onmouseout="eOptionOut(this)" />
<!--@end-->
<!--@end-->
</div>
</div>
</div>
<!--@end-->
</div>
<!--@if(!$_COOKIE['EditorInfo'])-->
<!-- 에디터 안내 출력 -->
<div id="editorInfo_{$editor_sequence}" class="editorInfo" >
{$lang->about_dblclick_in_editor}
<span id="for_ie_help_{$editor_sequence}" style="display:none">{$lang->edit->help_use_paragrapth}</span>
<img src="./images/buttonClose.gif" alt="close" width="13" height="13" class="close" onclick="closeEditorInfo('{$editor_sequence}'); return false;" />
</div>
<!--@end-->
<!-- HTML 모드 사용 기능 및 자동저장 메세지 출력용 -->
<!--@if($html_mode || $enable_autosave)-->
<div class="editor_info">
<!--@if($html_mode)-->
<div class="editor_option">
<input type="checkbox" id="use_html_{$editor_sequence}" value="Y" onclick="editorChangeMode(this, '{$editor_sequence}');" /> <label for="use_html_{$editor_sequence}">HTML</label>
</div>
<!--@end-->
<!--@if($enable_autosave)-->
<div class="editor_autosaved_message" id="editor_autosaved_message_{$editor_sequence}"></div>
<!--@end-->
</div>
<!--@end-->
<!-- 에디터 출력 -->
<div class="editor_iframe_box"><iframe id="editor_iframe_{$editor_sequence}" frameborder="0" height="{$editor_height}" style="background-color:transparent;" allowTransparency="true"></iframe></div>
<textarea id="editor_textarea_{$editor_sequence}" class="editor_iframe_textarea" style="display:none; height:{$editor_height}" rows="10" cols="10"></textarea>
<!-- 에디터 크기 조절 bar -->
<!--@if($enable_resizable)-->
<div class="textAreaDragIndicator"><div class="textAreaDragIndicatorBar" id="editor_drag_bar_{$editor_sequence}"></div></div>
<!--@end-->
<!--@if($allow_fileupload)-->
<!-- 첨부파일 영역 -->
<!--%import("../../tpl/js/uploader.js",optimized=false)-->
<!--%import("../../tpl/js/swfupload.js",optimized=false)-->
<script type="text/javascript">//<![CDATA[
editorUploadInit(
{
"editorSequence" : {$editor_sequence},
"sessionName" : "{session_name()}",
"allowedFileSize" : "{$file_config->allowed_filesize}",
"allowedFileTypes" : "{$file_config->allowed_filetypes}",
"allowedFileTypesDescription" : "{$file_config->allowed_filetypes}",
"insertedFiles" : {(int)$files_count},
"replaceButtonID" : "swfUploadButton{$editor_sequence}",
"fileListAreaID" : "uploaded_file_list_{$editor_sequence}",
"previewAreaID" : "preview_uploaded_{$editor_sequence}",
"uploaderStatusID" : "uploader_status_{$editor_sequence}"
}
);
//]]></script>
<table cellspacing="0" class="fileAttach">
<col width="120" />
<col width="100%" />
<tr valign="top">
<td width="120"><div class="preview" id="preview_uploaded_{$editor_sequence}"><img src="./images/blank.gif" alt="preview" width="100" height="100" /></div></td>
<td>
<!-- 파일 업로드 영역 -->
<div class="fileListArea">
<select id="uploaded_file_list_{$editor_sequence}" multiple="multiple" size="5" class="fileList"></select>
</div>
<div class="fileUploadControl">
<span id="swfUploadButton{$editor_sequence}"><span class="button"><button type="button">{$lang->edit->upload_file}</button></span></span>
<a href="#" onclick="removeUploadedFile('{$editor_sequence}');return false;" class="button"><span>{$lang->edit->delete_selected}</span></a>
<a href="#" onclick="insertUploadedFile('{$editor_sequence}');return false;" class="button"><span>{$lang->edit->link_file}</span></a>
</div>
<div class="file_attach_info" id="uploader_status_{$editor_sequence}">{$upload_status}</div>
</td>
</tr>
</table>
<!--@end-->
</div>
<!-- 에디터 활성화 -->
<script type="text/javascript">//<![CDATA[
var editor_path = "{$editor_path}";
var auto_saved_msg = "{$lang->msg_auto_saved}";
<!--@if(!$editor_manual_start)-->
editorStart("{$editor_sequence}", "{$editor_primary_key_name}", "{$editor_content_key_name}", '{$editor_height}' , '#000000');
<!--@end-->
//]]></script>
<!--// 스킨 css 로드 -->
<!--%import("css/editor.css")-->
<!--// 기본 js/언어파일 로드 -->
<!--%import("../../tpl/js/editor_common.js")-->
<!--%import("../../tpl/js/editor.js")-->
<!-- 자동저장용 폼 -->
<!--@if($enable_autosave)-->
<input type="hidden" name="_saved_doc_title" value="{htmlspecialchars($saved_doc->title)}" />
<input type="hidden" name="_saved_doc_content" value="{htmlspecialchars($saved_doc->content)}" />
<input type="hidden" name="_saved_doc_message" value="{$lang->msg_load_saved_doc}" />
<!--@end-->
<ul class="editorTypeSelector">
<li class="active"><a href="#xeEditor" onclick="return false"><span>스타일 편집기</span></a></li>
<li><a href="#textEditor" onclick="return false"><span>텍스트 편집기</span></a></li>
<!-- HTML 모드 사용 -->
<!--@if($html_mode)-->
<!--@if($html_mode)-->
<li><a href="#htmlEditor" id="use_html_{$editor_sequence}" onclick="editorChangeMode(this, '{$editor_sequence}')"><span>HTML 편집기</span></a></li>
<!--@end-->
<!--@end-->
</ul>
<!-- 에디터 -->
<div class="editorList xe">
<!-- class="editorList xe" | class="editorList text" | class="editorList html" -->
<div id="xeEditor" class="editorItem">
<div id="xeEditorOption_{$editor_sequence}" class="toolBox">
<!--@if($enable_default_component)-->
<!-- 기본 컴포넌트 출력 -->
<div class="toolA">
<ul class="do">
<li class="undo"><button type="button" title="Ctrl+Z:Un Do"><span>Un Do</span></button></li>
<li class="redo"><button type="button" title="Ctrl+Y:Re Do"><span>Re Do</span></button></li>
</ul>
<ul class="type">
<li class="hx">
<select onchange="editorChangeHeader(this,'{$editor_sequence}')" id="editor_header_{$editor_sequence}">
<option value="">{$lang->edit->header}</option>
<!--@foreach($lang->edit->header_list as $key=>$obj)-->
<option value="{$key}">{$obj}</option>
<!--@end-->
</select>
</li>
<li class="size">
<select onchange="editorChangeFontSize(this,'{$editor_sequence}')" id="editor_fontsize_{$editor_sequence}">
<option value="" selected="selected">{$lang->edit->fontsize}</option>
<option value="1" class="px10">10px</option>
<option value="2" class="px13">13px</option>
<option value="3" class="px16">16px</option>
<option value="4" class="px18">18px</option>
<option value="5" class="px24">24px</option>
<option value="6" class="px32">32px</option>
<option value="7" class="px48">48px</option>
</select>
</li>
<li class="family">
<select onchange="editorChangeFontName(this,'{$editor_sequence}')" id="editor_font_{$editor_sequence}">
<option value="">{$lang->edit->fontname}</option>
<!--@foreach($lang->edit->fontlist as $key=>$obj)-->
<option style="font-family:{$obj}" value="{$obj}">{$obj}</option>
<!--@end-->
</select>
</li>
</ul>
<ul class="style">
<li class="bold"><button type="button" title="Ctrl+B:{$lang->edit->help_bold}" id="component_{$editor_sequence}_Bold"><span>Bold</span></button></li>
<li class="underline"><button type="button" title="Ctrl+U:{$lang->edit->help_underline}" id="component_{$editor_sequence}_Underline"><span>Underline</span></button></li>
<li class="italic"><button type="button" title="Ctrl+I:{$lang->edit->help_italic}" id="component_{$editor_sequence}_Italic"><span>Italic</span></button></li>
<li class="strike"><button type="button" title="{$lang->edit->help_strike_through}" id="component_{$editor_sequence}_StrikeThrough"><span>Strike</span></button></li>
<li class="sup"><button type="button" title="Sup"><span>Sup</span></button></li>
<li class="sub"><button type="button" title="Sub"><span>Sub</span></button></li>
<li class="txColor"><button type="button" title="{$lang->edit->help_fontcolor}" id="component_{$editor_sequence}_colorpicker_text"><span>Text Color</span></button></li>
<li class="bgColor"><button type="button" title="{$lang->edit->help_fontbgcolor}" id="component_{$editor_sequence}_colorpicker_bg"><span>Background Color</span></button></li>
<li class="styleRemover"><button type="button" title="Ctrl+D:{$lang->edit->help_remove_format}" id="component_{$editor_sequence}_RemoveFormat"><span>Style Remover</span></button></li>
</ul>
<ul class="paragraph">
<li class="alignLeft"><button type="button" title="{$lang->edit->help_align_left}" id="component_{$editor_sequence}_JustifyLeft"><span>Align Left</span></button></li>
<li class="alignCenter"><button type="button" title="{$lang->edit->help_align_center}" id="component_{$editor_sequence}_JustifyCenter"><span>Align Center</span></button></li>
<li class="alignRight"><button type="button" title="{$lang->edit->help_align_right}" id="component_{$editor_sequence}_JustifyRight"><span>Align Right</span></button></li>
<li class="alignJustify"><button type="button" title="{$lang->edit->help_align_full}" id="component_{$editor_sequence}_JustifyFull"><span>Align Justify</span></button></li>
<li class="orderedList"><button type="button" title="{$lang->edit->help_list_number}" id="component_{$editor_sequence}_InsertOrderedList"><span>Orderd List</span></button></li>
<li class="unorderedList"><button type="button" title="{$lang->edit->help_list_bullet}" id="component_{$editor_sequence}_InsertUnorderedList"><span>Unordered List</span></button></li>
<li class="outdent"><button type="button" title="{$lang->edit->help_remove_indent}" id="component_{$editor_sequence}_Outdent"><span>Outdent</span></button></li>
<li class="indent"><button type="button" title="{$lang->edit->help_add_indent}" id="component_{$editor_sequence}_Indent"><span>Indent</span></button></li>
</ul>
<ul class="extension">
<li class="url"><button type="button" title="Ctrl+L:URL" id="component_1_url_link"><span>URL</span></button></li>
<li class="blockquote"><button type="button" title="Blockquote" id="component_1_quotation"><span>Blockquote</span></button></li>
<li class="table"><button type="button" title="Table" id="component_1_table_maker"><span>Table</span></button></li>
<li class="image"><button type="button" title="Image" id="component_1_image_link"><span>Image</span></button></li>
<li class="movie"><button type="button" title="Movie" id="component_1_multimedia_link"><span>Movie</span></button></li>
<li class="emoticon"><button type="button" title="Emoticon" id="component_1_emoticon"><span>Emoticon</span></button></li>
</ul>
</div>
<!--@end-->
<!--@if($enable_component)-->
<!-- 확장 컴포넌트 출력 -->
<ul id="editor_component_{$editor_sequence}" class="toolB">
<!--@foreach($component_list as $component_name => $component)-->
<!--@if(substr($component_name,0,11)!="colorpicker")-->
<li><button type="button" id="component_{$editor_sequence}_{$component_name}"><span>{$component->title}</span></button></li>
<!--@end-->
<!--@end-->
</ul>
<!--@end-->
</div>
<!--@if(!$_COOKIE['EditorInfo'])-->
<!-- 에디터 안내 출력 -->
<div id="editorInfo_{$editor_sequence}" class="editorInfo" >
{$lang->about_dblclick_in_editor}
<span id="for_ie_help_{$editor_sequence}" style="display:none">{$lang->edit->help_use_paragrapth}</span>
<img src="./images/buttonClose.gif" alt="close" width="13" height="13" class="close" onclick="closeEditorInfo('{$editor_sequence}'); return false;" />
</div>
<!--@end-->
<!-- HTML 모드 사용 기능 및 자동저장 메세지 출력용 -->
<!--@if($html_mode || $enable_autosave)-->
<div class="editor_info">
<!--@if($html_mode)-->
<div class="editor_option">
<input type="checkbox" id="use_html_{$editor_sequence}" value="Y" onclick="editorChangeMode(this, '{$editor_sequence}');" /> <label for="use_html_{$editor_sequence}">HTML</label>
</div>
<!--@end-->
<!--@if($enable_autosave)-->
<div class="editor_autosaved_message" id="editor_autosaved_message_{$editor_sequence}"></div>
<!--@end-->
</div>
<!--@end-->
<!-- 에디터 출력 -->
<div class="editor_iframe_box"><iframe id="editor_iframe_{$editor_sequence}" frameborder="0" height="{$editor_height}" style="background-color:transparent;" allowTransparency="true"></iframe></div>
<textarea id="editor_textarea_{$editor_sequence}" class="editor_iframe_textarea" style="display:none; height:{$editor_height}" rows="10" cols="10"></textarea>
<!-- 에디터 크기 조절 bar -->
<!--@if($enable_resizable)-->
<div class="textAreaDragIndicator"><div class="textAreaDragIndicatorBar" id="editor_drag_bar_{$editor_sequence}"></div></div>
<!--@end-->
<!--@if($allow_fileupload)-->
<!-- 첨부파일 영역 -->
<!--%import("../../tpl/js/uploader.js",optimized=false)-->
<!--%import("../../tpl/js/swfupload.js",optimized=false)-->
<script type="text/javascript">//<![CDATA[
editorUploadInit(
{
"editorSequence" : {$editor_sequence},
"sessionName" : "{session_name()}",
"allowedFileSize" : "{$file_config->allowed_filesize}",
"allowedFileTypes" : "{$file_config->allowed_filetypes}",
"allowedFileTypesDescription" : "{$file_config->allowed_filetypes}",
"insertedFiles" : {(int)$files_count},
"replaceButtonID" : "swfUploadButton{$editor_sequence}",
"fileListAreaID" : "uploaded_file_list_{$editor_sequence}",
"previewAreaID" : "preview_uploaded_{$editor_sequence}",
"uploaderStatusID" : "uploader_status_{$editor_sequence}"
}
);
//]]></script>
<table cellspacing="0" class="fileAttach">
<col width="120" />
<col width="100%" />
<tr valign="top">
<td width="120"><div class="preview" id="preview_uploaded_{$editor_sequence}"><img src="./images/blank.gif" alt="preview" width="100" height="100" /></div></td>
<td>
<!-- 파일 업로드 영역 -->
<div class="fileListArea">
<select id="uploaded_file_list_{$editor_sequence}" multiple="multiple" size="5" class="fileList"></select>
</div>
<div class="fileUploadControl">
<span id="swfUploadButton{$editor_sequence}"><span class="button"><button type="button">{$lang->edit->upload_file}</button></span></span>
<a href="#" onclick="removeUploadedFile('{$editor_sequence}');return false;" class="button"><span>{$lang->edit->delete_selected}</span></a>
<a href="#" onclick="insertUploadedFile('{$editor_sequence}');return false;" class="button"><span>{$lang->edit->link_file}</span></a>
</div>
<div class="file_attach_info" id="uploader_status_{$editor_sequence}">{$upload_status}</div>
</td>
</tr>
</table>
<!--@end-->
</div>
<div id="textEditor" class="editorItem">
여기에 class "textEditor"의 내용 입력
</div>
<div id="htmlEditor" class="editorItem">
여기에 class "htmlEditor"의 내용 입력
</div>
</div>
<!-- 에디터 활성화 -->
<script type="text/javascript">//<![CDATA[
var editor_path = "{$editor_path}";
var auto_saved_msg = "{$lang->msg_auto_saved}";
<!--@if(!$editor_manual_start)-->
editorStart("{$editor_sequence}", "{$editor_primary_key_name}", "{$editor_content_key_name}", '{$editor_height}' , '#000000');
<!--@end-->
//]]></script>

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB