에디터에 html edit기능 추가

git-svn-id: http://xe-core.googlecode.com/svn/trunk@2232 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
zero 2007-08-07 06:12:51 +00:00
parent dce40a2fac
commit d7aa8157a6
3 changed files with 166 additions and 93 deletions

View file

@ -25,7 +25,9 @@
.xeEditor .textAreaDragIndicator { text-align:center; background:url(../images/lineTextAreaDrag.gif) repeat-x left center; margin-bottom:1em; margin:.5em; }
.xeEditor .textAreaDragIndicatorBar { background:url(../images/buttonTextAreaDrag.gif) no-repeat center; margin-bottom:1em;cursor:move;height:14px;}
div.editor_autosaved_message { color:#888888; display:none; margin:.5em; text-align:right;}
.xeEditor .editor_info { clear:both; padding:.5em; overflow:hidden;}
.xeEditor .editor_info .editor_option { float:left; color:#888888; }
.xeEditor .editor_info .editor_autosaved_message { color:#888888; float:right; }
.xeEditor .inputTypeTextArea { background:#fbfbfb; padding:1em; width:94%;}
.xeEditor #textAreaDrag {}

View file

@ -19,93 +19,95 @@
<!-- 에디터 -->
<div class="xeEditor">
<!--@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>
<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="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>
<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="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="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="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 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>
<!--
<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-->
<!--@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)" />
<!--@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-->
<!--@end-->
</div>
</div>
</div>
<!--@end-->
</div>
<!--@end-->
<!--@if(!$_COOKIE['EditorInfo'])-->
<div id="editorInfo" class="editorInfo" >
@ -115,7 +117,12 @@
</div>
<!--@end-->
<div class="editor_autosaved_message" id="editor_autosaved_message"></div>
<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>

View file

@ -10,6 +10,9 @@ var iframe_id = 'editor_iframe_';
// upload_target_srl에 대한 form문을 객체로 보관함
var editor_form_list = new Array();
// 편집 상태에 대한 체크
var editor_mode = new Array();
// upload_target_srl값에 해당하는 iframe의 object를 return
function editorGetIFrame(upload_target_srl) {
var obj_id = iframe_id+upload_target_srl;
@ -158,13 +161,7 @@ function _editorAutoSave() {
_autoSaveObj.title = title;
_autoSaveObj.content = content;
/*
xTop("editor_autosaved_message", xScrollTop()+10);
xGetElementById("editor_autosaved_message").style.display = "block";
setTimeout(function() {xGetElementById("editor_autosaved_message").style.display = "none";}, 1000);
*/
var obj = xGetElementById("editor_autosaved_message");
var obj = xGetElementById("editor_autosaved_message_"+upload_target_srl);
var oDate = new Date();
html = oDate.getHours()+':'+oDate.getMinutes()+' '+auto_saved_msg;
xInnerHtml(obj, html);
@ -193,8 +190,15 @@ function editorRemoveSavedDoc() {
function editorGetContent(upload_target_srl) {
var iframe_obj = editorGetIFrame(upload_target_srl);
if(!iframe_obj) return null;
var html = null;
html = xInnerHtml(iframe_obj.contentWindow.document.body);
if(editor_mode[upload_target_srl]=='html') {
var contentDocument = iframe_obj.contentWindow.document;
var html = contentDocument.body.innerHTML;
html = html.replace(/&amp;/ig, '&').replace(/&lt;/ig,'<').replace(/&gt;/ig,'>');
} else {
html = xInnerHtml(iframe_obj.contentWindow.document.body);
}
if(html) html = html.replace(/^<br>$/i,'');
return html;
}
@ -267,10 +271,22 @@ function editorFocus(upload_target_srl) {
function editorKeyPress(evt) {
var e = new xEvent(evt);
var obj = e.target;
var body_obj = null;
if(obj.nodeName == "BODY") body_obj = obj;
else body_obj = obj.firstChild.nextSibling;
if(!body_obj) return;
var upload_target_srl = body_obj.getAttribute("upload_target_srl");
if(!upload_target_srl) return;
// IE에서 enter키를 눌렀을때 P 태그 대신 BR 태그 입력
if (xIE4Up && !e.ctrlKey && !e.shiftKey && e.keyCode == 13) {
if(e.target.parentElement.document.designMode!="On") return;
var obj = e.target.parentElement.document.selection.createRange();
if (xIE4Up && !e.ctrlKey && !e.shiftKey && e.keyCode == 13 && editor_mode[upload_target_srl]!='html') {
var iframe_obj = editorGetIFrame(upload_target_srl);
if(!iframe_obj) return;
var contentDocument = iframe_obj.contentWindow.document;
var obj = contentDocument.selection.createRange();
obj.pasteHTML('<br />');
obj.select();
evt.cancelBubble = true;
@ -280,15 +296,9 @@ function editorKeyPress(evt) {
// ctrl-S, alt-S 클릭시 submit하기
if( e.keyCode == 115 && (e.altKey || e.ctrlKey) ) {
var obj = e.target;
var body_obj = obj.firstChild.nextSibling;
if(!body_obj) return;
var upload_target_srl = body_obj.getAttribute("upload_target_srl");
if(!upload_target_srl) return;
var iframe_obj = editorGetIFrame(upload_target_srl);
if(!iframe_obj) return;
var contentDocument = iframe_obj.contentWindow.document;
var fo_obj = iframe_obj.parentNode;
while(fo_obj.nodeName != 'FORM') { fo_obj = fo_obj.parentNode; }
@ -303,6 +313,19 @@ function editorKeyPress(evt) {
// ctrl-b, i, u, s 키에 대한 처리 (파이어폭스에서도 에디터 상태에서 단축키 쓰도록)
if (e.ctrlKey) {
var iframe_obj = editorGetIFrame(upload_target_srl);
if(!iframe_obj) return;
var contentDocument = iframe_obj.contentWindow.document;
// html 에디터 모드일 경우 이벤트 취소 시킴
if(editor_mode[upload_target_srl]=='html') {
evt.cancelBubble = true;
evt.returnValue = false;
xPreventDefault(evt);
xStopPropagation(evt);
return;
}
switch(e.keyCode) {
// ctrl+1~6
case 49 :
@ -381,6 +404,8 @@ function editorEventCheck(evt) {
var component_name = target_id.replace(/^component_([0-9]+)_/,'');
if(!upload_target_srl || !component_name) return;
if(editor_mode[upload_target_srl]=='html') return;
switch(component_name) {
// 기본 기능에 대한 동작 (바로 실행)
@ -412,6 +437,8 @@ function editorEventCheck(evt) {
// 컴포넌트 팝업 열기
function openComponent(component_name, upload_target_srl, manual_url) {
editorPrevSrl = upload_target_srl;
if(editor_mode[upload_target_srl]=='html') return;
var popup_url = request_uri+"?module=editor&act=dispEditorPopup&upload_target_srl="+upload_target_srl+"&component="+component_name;
if(typeof(manual_url)!="undefined" && manual_url) popup_url += "&manual_url="+escape(manual_url);
@ -440,11 +467,12 @@ function editorSearchComponent(evt) {
var upload_target_srl = tobj.getAttribute("upload_target_srl");
var widget = obj.getAttribute("widget");
editorPrevNode = obj;
if(editor_mode[upload_target_srl]=='html') return;
popopen(request_uri+"?module=widget&act=dispWidgetGenerateCodeInPage&selected_widget="+widget+"&module_srl="+upload_target_srl,'GenerateCodeInPage');
return;
}
// 선택되어진 object부터 상단으로 이동하면서 editor_component attribute가 있는지 검사
if(!obj.getAttribute("editor_component")) {
while(obj && !obj.getAttribute("editor_component")) {
@ -515,13 +543,46 @@ function editorHideObject(evt) {
return;
}
/**
* HTML 편집 기능
**/
function editorChangeMode(obj, upload_target_srl) {
var iframe_obj = editorGetIFrame(upload_target_srl);
if(!iframe_obj) return;
var contentDocument = iframe_obj.contentWindow.document;
// html 편집 사용시
if(obj.checked) {
xGetElementById('xeEditorOption_'+upload_target_srl).style.display = "none";
var html = contentDocument.body.innerHTML;
html = html.replace(/&/ig, '&amp;').replace(/</ig,'&lt;').replace(/>/ig,'&gt;');
contentDocument.body.innerHTML = html;
editor_mode[upload_target_srl] = 'html';
// 위지윅 모드 사용시
} else {
xGetElementById('xeEditorOption_'+upload_target_srl).style.display = "block";
var html = contentDocument.body.innerHTML;
html = html.replace(/&amp;/ig, '&').replace(/&lt;/ig,'<').replace(/&gt;/ig,'>');
contentDocument.body.innerHTML = html;
editor_mode[upload_target_srl] = null;
}
}
/**
* 편집기능 실행
*/
// 편집 기능 실행
function editorDo(command, value, target) {
var doc = null;
// target이 object인지 upload_target_srl인지에 따라 document를 구함
if(typeof(target)=="object") {
if(xIE4Up) doc = target.parentElement.document;
@ -531,6 +592,9 @@ function editorDo(command, value, target) {
doc = iframe_obj.contentWindow.document;
}
var upload_target_srl = doc.body.getAttribute('upload_target_srl');
if(editor_mode[upload_target_srl]=='html') return;
// 포커스
if(typeof(target)=="object") target.focus();
else editorFocus(target);