fanbinit/rhymix
1
0
Fork 0
mirror of https://github.com/Lastorder-DC/rhymix.git synced 2026-01-07 02:31:40 +09:00
Code Issues Projects Releases Packages Wiki Activity

에디터의 DesignMode를 iframe에 focus가 일어날때 이루어지도록 코드 변경. 페이지 로딩 속도 증가 및 에디터 부분의 display:none일 경우 대비

Browse source 
git-svn-id: http://xe-core.googlecode.com/svn/sandbox@2646 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
zero 2007-09-28 03:54:44 +00:00
parent 5a7ab9cd11
commit 1aee7c7b60
2 changed files with 29 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

162
modules/editor/tpl/editor.html
View file

@ -1,162 +0,0 @@
<!--%import("js/editor.js")-->
<!--%import("css/editor.css")-->
<!--%import("./lang")-->
<!-- 에디터 활성화 -->
<script type="text/javascript">//<![CDATA[
var editor_height = '{$editor_height}';
var editor_path = "{$editor_path}";
var auto_saved_msg = "{$lang->msg_auto_saved}";
editorInit("{$upload_target_srl}", {$enable_resizable}, {$editor_height});
//]]></script>
<!-- 자동저장용 폼 -->
<!--@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_{$upload_target_srl}">
<!--@if($enable_default_component)-->
<div class="optionABC">
<div class="optionA">
<div class="selectGroup">
<select onchange="editorChangeFontName(this,'{$upload_target_srl}')" id="editor_font_{$upload_target_srl}">
<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,'{$upload_target_srl}')" id="editor_fontsize_{$upload_target_srl}">
<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,'{$upload_target_srl}')" id="editor_header_{$upload_target_srl}">
<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_{$upload_target_srl}_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_{$upload_target_srl}_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_{$upload_target_srl}_Underline" 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_{$upload_target_srl}_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_{$upload_target_srl}_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_{$upload_target_srl}_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_{$upload_target_srl}_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_{$upload_target_srl}_justifyright" onmouseover="eOptionOver(this)" onmouseout="eOptionOut(this)" />
<!--<img src="./images/editor_btn_aj.gif" width="23" height="63" 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_{$upload_target_srl}_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_{$upload_target_srl}_indent" onmouseover="eOptionOver(this)" onmouseout="eOptionOut(this)" />
</div>
<div class="buttonGroup">
<img src="./images/editor_btn_ol.gif" title="{$lang->edit->help_list_number}" alt="{$lang->edit->help_list_number}" id="component_{$upload_target_srl}_insertorderedlist" width="23" height="63" onmouseover="eOptionOver(this)" onmouseout="eOptionOut(this)" />
<img src="./images/editor_btn_ul.gif" title="{$lang->edit->help_list_bullet}" alt="{$lang->edit->help_list_bullet}" id="component_{$upload_target_srl}_insertunorderedlist" 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_{$upload_target_srl}">
<!--@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_{$upload_target_srl}_{$component_name}" onmouseover="eOptionOver(this)" onmouseout="eOptionOut(this)" />
<!--@end-->
<!--@end-->
</div>
</div>
</div>
<!--@end-->
</div>
<!--@if(!$_COOKIE['EditorInfo'])-->
<div id="editorInfo" class="editorInfo" >
{$lang->about_dblclick_in_editor}
<span id="for_ie_help_{$upload_target_srl}" style="display:none">{$lang->edit->help_use_paragrapth}</span>
<img src="./images/buttonClose.gif" alt="close" width="13" height="13" class="close" onclick="closeEditorInfo(); return false;" />
</div>
<!--@end-->
<div class="editor_info">
<div class="editor_option">
<input type="checkbox" id="use_html_{$upload_target_srl}" value="Y" onclick="editorChangeMode(this, '{$upload_target_srl}');" /> <label for="use_html_{$upload_target_srl}">HTML</label>
</div>
<div class="editor_autosaved_message" id="editor_autosaved_message_{$upload_target_srl}">&nbsp;</div>
</div>
<div class="editor_iframe_box" id="editor_iframe_area_{$upload_target_srl}"></div>
<div class="textAreaDragIndicator"><div class="textAreaDragIndicatorBar" id="editor_drag_bar_{$upload_target_srl}"></div></div>
<!--@if($allow_fileupload)-->
<!-- 첨부파일 영역 -->
<!--%import("./js/uploader.js")-->
<script type="text/javascript">
var zbxe_session_name = "{session_name()}";
var uploader_setting = { "allowed_filesize" : {$file_config->allowed_filesize}, "allowed_filetypes" : "{$file_config->allowed_filetypes}", "allowed_filetypes_description" : "{$file_config->allowed_filetypes}" }
editor_upload_init("{$upload_target_srl}");
</script>
<div class="fileAttach">
<input type="hidden" name="upload_target_srl" value="{$upload_target_srl}" />
<div class="preview" id="preview_uploaded_{$upload_target_srl}">
<img src="./images/blank.gif" alt="preview" width="100" height="100" />
</div>
<!-- 파일 업로드 영역 -->
<div class="fileListArea">
<select id="uploaded_file_list_{$upload_target_srl}" size="7" class="fileList" onclick="editor_preview(this, '{$upload_target_srl}');"></select>
<span class="file_attach_info" id="uploader_status_{$upload_target_srl}"></span>
</div>
<div class="fileUploadControl"><a href="#" onclick="editor_upload_file('{$upload_target_srl}');return false;" class="button"><span>{$lang->edit->upload_file}</span></a></div>
<div class="fileUploadControl"><a href="#" onclick="editor_remove_file('{$upload_target_srl}');return false;" class="button"><span>{$lang->edit->delete_selected}</span></a></div>
<div class="fileUploadControl"><a href="#" onclick="editor_insert_file('{$upload_target_srl}');return false;" class="button"><span>{$lang->edit->link_file}</span></a></div>
<div class="clear"></div>
</div>
<!--@end-->
</div>

47
modules/editor/tpl/js/editor.js
View file

@ -20,7 +20,6 @@ var editor_rel_keys = new Array(); ///< 에디터와 각 모듈과의 연동을
xAddEventListener(window, 'load', _editorSync); ///< 에디터의 동기화를 하는 함수를 window.load시 실행
/**
* 에디터의 상태나 객체를 구하기 위한 함수
**/
@ -148,9 +147,15 @@ function editorStart(editor_sequence, primary_key, content_key, resizable, edito
// iframe내의 document element를 구함
var contentDocument = iframe_obj.contentWindow.document;
/**
* 에디터를 위지윅 모드로 만들기 위해 내용 작성 후 designMode 활성화
**/
// 크기 변경 불가일 경우 드래그바 숨김
if(resizable == false) xGetElementById("editor_drag_bar_"+editor_sequence).style.display = "none";
else xGetElementById("editor_drag_bar_"+editor_sequence).style.display = "block";
// IE일 경우 ctrl-Enter 안내 문구를 노출
if(xIE4Up && xGetElementById('for_ie_help_'+editor_sequence)) {
xGetElementById('for_ie_help_'+editor_sequence).style.display = "block";
}
var contentHtml = ''+
'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'+
'<html lang="ko" xmlns="http://www.w3.org/1999/xhtml><head><meta http-equiv="content-type" content="text/html; charset=utf-8"/>'+
@ -165,15 +170,31 @@ function editorStart(editor_sequence, primary_key, content_key, resizable, edito
content+
'</body></html>'+
'';
contentDocument.open("text/html","replace");
contentDocument.write(contentHtml);
contentDocument.close();
// editor_mode를 기본으로 설정
editor_mode[editor_sequence] = null;
// iframe에 focus가 될때 에디터 모드로 전환하도록 이벤트 지정
if(xIE4Up) xAddEventListener(iframe_obj, "focus", function() { editorSetDesignMode(iframe_obj, contentDocument, content, fo_obj, editor_sequence, editor_height); } );
else xAddEventListener(iframe_obj.contentWindow, "focus", function() { editorSetDesignMode(iframe_obj, contentDocument, content, fo_obj, editor_sequence, editor_height); } );
}
/**
* 에디터를 위지윅 모드로 만들기 위해 내용 작성 후 designMode 활성화
**/
var editor_is_started = new Array();
function editorSetDesignMode(iframe_obj, contentDocument, content, fo_obj, editor_sequence, editor_height) {
if(editor_is_started[editor_sequence]) return;
contentDocument.designMode = 'on';
try {
contentDocument.execCommand("undo", false, null);
contentDocument.execCommand("useCSS", false, true);
} catch (e) {
}
contentDocument.open("text/html","replace");
contentDocument.write(contentHtml);
contentDocument.close();
/**
* 더블클릭이나 키눌림등의 각종 이벤트에 대해 listener 추가
@ -189,11 +210,6 @@ function editorStart(editor_sequence, primary_key, content_key, resizable, edito
xAddEventListener(document,'mouseup',editorEventCheck);
xAddEventListener(document,'mousedown',editorHideObject);
// IE일 경우 ctrl-Enter 안내 문구를 노출
if(xIE4Up && xGetElementById('for_ie_help_'+editor_sequence)) {
xGetElementById('for_ie_help_'+editor_sequence).style.display = "block";
}
/**
* 에디터의 내용을 지속적으로 fo_obj.content의 값과 동기화를 시킴.
* 차후 다른 에디터를 사용하더라도 fo_obj.content와 동기화만 된다면 어떤 에디터라도 사용 가능하도록 하기 위해
@ -204,12 +220,7 @@ function editorStart(editor_sequence, primary_key, content_key, resizable, edito
// 자동저장 필드가 있다면 자동 저장 기능 활성화
if(typeof(fo_obj._saved_doc_title)!="undefined" ) editorEnableAutoSave(fo_obj, editor_sequence);
// 크기 변경 불가일 경우 드래그바 숨김
if(resizable == false) xGetElementById("editor_drag_bar_"+editor_sequence).style.display = "none";
else xGetElementById("editor_drag_bar_"+editor_sequence).style.display = "block";
// editor_mode를 기본으로 설정
editor_mode[editor_sequence] = null;
editor_is_started[editor_sequence] = true;
}