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

git-svn-id: http://xe-core.googlecode.com/svn/sandbox@2547 201d5d3c-b55e-5fd7-737f-ddc643e51545

modules/editor/skins/default/css/editor.css

@@ -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;}

modules/editor/skins/default/editor.html

@@ -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>
 

modules/editor/tpl/js/editor.js

@@ -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;
+        contentDocument.body.innerHTML = html;
-        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,'');
+
+    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;');
+        html = html.replace(/<br>/ig,"<br />\n");
-        contentDocument.body.innerHTML = html;
+        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 = textarea_obj.value;
-
-        var html = contentDocument.body.innerHTML;
-        html = html.replace(/&amp;/ig, '&').replace(/&lt;/ig,'<').replace(/&gt;/ig,'>');
         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;
     }
+
 }
 
 /**

modules/editor/tpl/js/uploader.js

@@ -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;