#97 HTML코드 편집시 별도의 textarea를 이용하여 실질적인 html 에디팅 기능을 구현

git-svn-id: http://xe-core.googlecode.com/svn/sandbox@2547 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
zero 2007-09-06 09:03:08 +00:00
parent 795b65858d
commit 182d8f9528
4 changed files with 33 additions and 14 deletions

View file

@ -22,6 +22,7 @@
.xeEditor .editorInfo { background:#fbfbfb; padding:.5em; border:1px solid #e1e1dd; color:#999999; position:relative; margin:5px 20px 0 20px;}
.xeEditor .close { cursor:pointer; position:absolute; top:3px; right:3px; _top:3px; _right:25px;}
.xeEditor .editor_iframe_box { background:#ffffff; clear:both; border:1px solid; border-color:#a6a6a6 #d8d8d8 #d8d8d8 #a6a6a6; padding:.5em; margin:0 20px 0 20px; }
.xeEditor .editor_iframe_textarea { background:#ffffff; clear:both; border:1px solid; border-color:#a6a6a6 #d8d8d8 #d8d8d8 #a6a6a6; padding:.5em; margin:0 20px 0 20px; 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;}

View file

@ -130,6 +130,7 @@
</div>
<div class="editor_iframe_box"><iframe id="editor_iframe_{$upload_target_srl}" frameborder="0" width="100%" height="{$editor_height}" style="background-color:transparent;"></iframe></div>
<textarea id="editor_textarea_{$upload_target_srl}" class="editor_iframe_textarea" style="height:{$editor_height}"></textarea>
<div class="textAreaDragIndicator"><div class="textAreaDragIndicatorBar" id="editor_drag_bar_{$upload_target_srl}"></div></div>

View file

@ -6,6 +6,7 @@
// iframe의 id prefix
var iframe_id = 'editor_iframe_';
var textarea_id = 'editor_textarea_';
// upload_target_srl에 대한 form문을 객체로 보관함
var editor_form_list = new Array();
@ -19,6 +20,12 @@ function editorGetIFrame(upload_target_srl) {
return xGetElementById(obj_id);
}
// upload_target_srl값에 해당하는 textarea object를 return
function editorGetTextArea(upload_target_srl) {
var obj_id = textarea_id+upload_target_srl;
return xGetElementById(obj_id);
}
// editor 시작 (upload_target_srl로 iframe객체를 얻어서 쓰기 모드로 전환)
function editorStart(upload_target_srl, resizable, editor_height) {
if(typeof(resizable)=="undefined"||!resizable) resizable = false;
@ -183,13 +190,14 @@ function editorGetContent(upload_target_srl) {
var html = null;
if(editor_mode[upload_target_srl]=='html') {
var textarea_obj = editorGetTextArea(upload_target_srl);
var html = textarea_obj.value;
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);
contentDocument.body.innerHTML = html;
}
if(html) html = html.replace(/^<br>$/i,'');
html = xInnerHtml(iframe_obj.contentWindow.document.body);
if(html) html = html.replace(/^<br([^>]*)>$/i,'');
return html;
}
@ -540,28 +548,36 @@ function editorChangeMode(obj, upload_target_srl) {
var iframe_obj = editorGetIFrame(upload_target_srl);
if(!iframe_obj) return;
var textarea_obj = editorGetTextArea(upload_target_srl);
xWidth(textarea_obj, xWidth(iframe_obj.parentNode));
xHeight(textarea_obj, xHeight(iframe_obj.parentNode));
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;
html = html.replace(/<br>/ig,"<br />\n");
html = html.replace(/<br \/>\n\n/ig,"<br />\n");
textarea_obj.value = html;
iframe_obj.parentNode.style.display = "none";
textarea_obj.style.display = "block";
xGetElementById('xeEditorOption_'+upload_target_srl).style.display = "none";
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,'>');
var html = textarea_obj.value;
contentDocument.body.innerHTML = html;
iframe_obj.parentNode.style.display = "block";
textarea_obj.style.display = "none";
xGetElementById('xeEditorOption_'+upload_target_srl).style.display = "block";
editor_mode[upload_target_srl] = null;
}
}
/**

View file

@ -252,6 +252,7 @@ function editor_remove_file(upload_target_srl) {
// 업로드 목록의 선택된 파일을 내용에 추가
function editor_insert_file(upload_target_srl) {
if(editor_mode[upload_target_srl]=='html') return;
var obj = xGetElementById('uploaded_file_list_'+upload_target_srl);
if(obj.options.length<1) return;