diff --git a/modules/editor/skins/default/css/editor.css b/modules/editor/skins/default/css/editor.css index 48d68376a..8675cbb9a 100644 --- a/modules/editor/skins/default/css/editor.css +++ b/modules/editor/skins/default/css/editor.css @@ -212,15 +212,13 @@ a.skipToolBox:active span{ width:auto; height:auto; padding:3px 15px; font-weigh .xeEditor .editorBox .editorMargin{ margin:0 5px;} /* Editor Display */ -.xeEditor .toolBox, -.xeEditor .richEditor, -.xeEditor .htmlEditor{ display:none;} -.xeEditor.rich .toolBox, -.xeEditor.rich .richEditor, -.xeEditor.html .htmlEditor{ display:block;} -.xeEditor .richEditor, -.xeEditor .htmlEditor{ border:0;} +.xeEditor .toolBox, .xeEditor .richEditor, .xeEditor .htmlEditor {display:none;} +.xeEditor.rich .toolBox, .xeEditor.rich .richEditor, .xeEditor.html .htmlEditor{ display:block;} +.xeEditor.preview .toolBox, .xeEditor.rich .xeEditor.html .htmlEditor { display:none;} +.xeEditor.preview .previewEditor { display:block;} +.xeEditor .richEditor, .xeEditor .htmlEditor{ border:0;} .xeEditor .htmlEditor{ width:100%; padding:10px 0; font-size:12px;} +.xeEditor .previewEditor { display:none; } /* Editor Resize Bar */ .xeEditor .textAreaDragIndicator{ border-top:1px solid; border-bottom:1px solid; clear:both; margin-bottom:5px;} diff --git a/modules/editor/skins/default/editor.html b/modules/editor/skins/default/editor.html index 7dc16ddeb..e67271a67 100644 --- a/modules/editor/skins/default/editor.html +++ b/modules/editor/skins/default/editor.html @@ -54,7 +54,7 @@ -
  • {$lang->cmd_preview}
    • +
  • {$lang->cmd_preview}
    • @@ -183,6 +183,7 @@
    +
    diff --git a/modules/editor/tpl/js/editor.js b/modules/editor/tpl/js/editor.js index f9c4fb909..db90d95a0 100755 --- a/modules/editor/tpl/js/editor.js +++ b/modules/editor/tpl/js/editor.js @@ -17,6 +17,10 @@ function editorGetTextArea(editor_sequence) { return xGetElementById( 'editor_textarea_' + editor_sequence ); } +function editorGetPreviewArea(editor_sequence) { + return xGetElementById( 'editor_preview_' + editor_sequence ); +} + // editor_sequence에 해당하는 form문 구함 function editorGetForm(editor_sequence) { var iframe_obj = editorGetIFrame(editor_sequence); @@ -197,7 +201,7 @@ function editorKeyPress(evt) { if(!editor_sequence) return; // IE에서 enter키를 눌렀을때 P 태그 대신 BR 태그 입력 - if (xIE4Up && !e.ctrlKey && !e.shiftKey && e.keyCode == 13 && editorMode[editor_sequence]!='html') { + if (xIE4Up && !e.ctrlKey && !e.shiftKey && e.keyCode == 13 && !editorMode[editor_sequence]) { var iframe_obj = editorGetIFrame(editor_sequence); if(!iframe_obj) return; @@ -252,7 +256,7 @@ function editorKeyPress(evt) { if(!iframe_obj) return; // html 에디터 모드일 경우 이벤트 취소 시킴 - if(editorMode[editor_sequence]=='html') { + if(editorMode[editor_sequence]) { evt.cancelBubble = true; evt.returnValue = false; xPreventDefault(evt); @@ -343,7 +347,7 @@ function editorDo(command, value, target) { } var editor_sequence = doc.body.getAttribute('editor_sequence'); - if(editorMode[editor_sequence]=='html') return; + if(editorMode[editor_sequence]) return; // 포커스 if(typeof(target)=="object") target.focus(); @@ -399,80 +403,60 @@ function editorChangeMode(mode, editor_sequence) { if(!iframe_obj) return; var textarea_obj = editorGetTextArea(editor_sequence); - xWidth(textarea_obj, xWidth(iframe_obj.parentNode)); - xHeight(textarea_obj, xHeight(iframe_obj.parentNode)); - + var preview_obj = editorGetPreviewArea(editor_sequence); var contentDocument = iframe_obj.contentWindow.document; - // html 편집 사용시 - if(mode == 'html') { - var html = contentDocument.body.innerHTML; + var html = null; + if(editorMode[editor_sequence]=='html') { + html = textarea_obj.value; + } else if (editorMode[editor_sequence]=='preview') { + html = xInnerHtml(preview_obj); + } else { + html = contentDocument.body.innerHTML; html = html.replace(/
    /ig,"
    \n"); html = html.replace(/
    \n\n/ig,"
    \n"); - textarea_obj.value = html; + } -// iframe_obj.parentNode.style.display = "none"; - xGetElementById('xeEditor_'+editor_sequence).className = 'xeEditor html'; + // html 편집 사용시 + if(mode == 'html' && textarea_obj) { + textarea_obj.value = html; + xWidth(textarea_obj, xWidth(iframe_obj.parentNode)); + xHeight(textarea_obj, xHeight(iframe_obj.parentNode)); editorMode[editor_sequence] = 'html'; - xGetElementById('use_rich_'+editor_sequence).className = ''; - xGetElementById('use_html_'+editor_sequence).className = 'active'; - + if(xGetElementById('xeEditor_'+editor_sequence)) { + xGetElementById('xeEditor_'+editor_sequence).className = 'xeEditor html'; + xGetElementById('use_rich_'+editor_sequence).className = ''; + xGetElementById('preview_html_'+editor_sequence).className = ''; + xGetElementById('use_html_'+editor_sequence).className = 'active'; + } + // 미리보기 + } else if(mode == 'preview' && preview_obj) { + xInnerHtml(preview_obj, html); + xWidth(preview_obj, xWidth(iframe_obj.parentNode)); + editorMode[editor_sequence] = 'preview'; + if(xGetElementById('xeEditor_'+editor_sequence)) { + xGetElementById('xeEditor_'+editor_sequence).className = 'xeEditor preview'; + xGetElementById('use_rich_'+editor_sequence).className = ''; + xGetElementById('preview_html_'+editor_sequence).className = 'active'; + xGetElementById('use_html_'+editor_sequence).className = ''; + } // 위지윅 모드 사용시 } else { - var html = textarea_obj.value; contentDocument.body.innerHTML = html; - -// iframe_obj.parentNode.style.display = "block"; - xGetElementById('xeEditor_'+editor_sequence).className = 'xeEditor rich'; editorMode[editor_sequence] = null; - xGetElementById('use_rich_'+editor_sequence).className = 'active'; - xGetElementById('use_html_'+editor_sequence).className = ''; - + if(xGetElementById('xeEditor_'+editor_sequence)) { + xGetElementById('xeEditor_'+editor_sequence).className = 'xeEditor rich'; + xGetElementById('use_rich_'+editor_sequence).className = 'active'; + xGetElementById('preview_html_'+editor_sequence).className = ''; + xGetElementById('use_html_'+editor_sequence).className = ''; + } } } -/* -function editorChangeMode(obj, editor_sequence) { - var iframe_obj = editorGetIFrame(editor_sequence); - if(!iframe_obj) return; - - var textarea_obj = editorGetTextArea(editor_sequence); - xWidth(textarea_obj, xWidth(iframe_obj.parentNode)); - xHeight(textarea_obj, xHeight(iframe_obj.parentNode)); - - var contentDocument = iframe_obj.contentWindow.document; - - // html 편집 사용시 - if(obj.checked || obj == 'html') { - var html = contentDocument.body.innerHTML; - html = html.replace(/
    /ig,"
    \n"); - html = html.replace(/
    \n\n/ig,"
    \n"); - - textarea_obj.value = html; - - iframe_obj.parentNode.style.display = "none"; - textarea_obj.style.display = "block"; - xGetElementById('xeEditorOption_'+editor_sequence).style.display = "none"; - - editorMode[editor_sequence] = 'html'; - - // 위지윅 모드 사용시 - } else { - var html = textarea_obj.value; - contentDocument.body.innerHTML = html; - iframe_obj.parentNode.style.display = "block"; - textarea_obj.style.display = "none"; - xGetElementById('xeEditorOption_'+editor_sequence).style.display = "block"; - editorMode[editor_sequence] = null; - } - -} -*/ - // Editor Info Close function closeEditorInfo(editor_sequence) { xGetElementById('editorInfo_'+editor_sequence).style.display='none'; @@ -488,15 +472,6 @@ function showEditorHelp(e,editor_sequence){ if(xGetElementById(oid).className =='helpList'){ xGetElementById(oid).className = 'helpList open'; - /* - if(e.pageX <= xWidth('helpList_'+editor_sequence)){ - xGetElementById('helpList_'+editor_sequence).style.right='auto'; - xGetElementById('helpList_'+editor_sequence).style.left='0'; - }else{ - xGetElementById('helpList_'+editor_sequence).style.right='0'; - xGetElementById('helpList_'+editor_sequence).style.left=''; - } - */ }else{ xGetElementById(oid).className = 'helpList'; }