tinyMCE 에디터 달기

Moxiecode Systems(https://tinyMCE.moxiecode.com) 의 위지윅 에디터인 tinyMCE 를 XE스킨으로 제작하였습니다.

/* 운좋게도 제가 어제(9월 23일) 작업하려고 다운받았는데 하루 전날인 9월 22일에 3.2.7버젼이 새로 나왔네요.. 당분간은 에디터 업데이트도 필요 없을 것 같네요 */

 

우선 회사 업무 상

1. 테이블을 자유롭게 수정 가능할 것

2. 엑셀에서 붙여넣기 한 데이터가 정상적으로 출력될 것

3. 가능한한 자유롭게 편집 가능한 기능을 보유하고 있을 것

 

이라는 점을 염두에 두고 에디터들을 찾아 보았습니다.

 

우선 1번을 만족 시키는 에디터는  XE에디터와 SPAW에디터, tineMCE 세가지가 있었으며

XE에디터는 현재 테이블 수정 시 테이블 겹침 문제가 심각하여 사내에서 조금 쪼이고 있는 실정입니다.(이게 다른 에디터를 찾은 주 원인)

또 대부분의 에디터들은 한번 작성한 테이블을 수정할 경우 기존의 내용이 삭제 되던가 테이블 수정이 안되는게 대부분 입니다.

 

2번 항목의 경우 1번을 만족하는 에디터 중 XE 에디터는 이 부분에서도 종종 스타일이 사라질 경우가 발생하고 있습니다.

SPAW에디터는 php전용이라  html 파일로 출력하는 XE에 연동하려다가 포기했습니다 -_-;;

 

3번의 경우 많은 에디터들이 있지만 위 두가지 이유로 결국 tinyMCE를 택했습니다.

더군다나  FCK에서 지원하는 대부분의 기능이 그대로 적용되어 더욱 만족합니다.

 

여기까지는 제가 tinyMCE를 택한 이유입니다.

========================================================================================================================

 * 여기부터는 tinyMCE 스킨을 설치하는 방법입니다. 아래 내용을 꼭 읽고 설치 해주세요 (특히 빨간 글씨는 필독)

1. 우선 tinyMCE는 LGPL 라이센스 입니다.  그래서 자유롭게 수정해서 XE에 적용하였으며 이렇게 배포합니다.

2. tinyMCE설정이 상당히 많으므로 가능하면 홈페이지의 examples 항목을 읽고 설정을 수정하셔서 사용을 권합니다.

 - https://tinymce.moxiecode.com/examples/full.php

 

3. 첨부된 tinyMCE.zip 파일을 압축을 푼후 /modules/editor/skins/에 복사합니다.

  - c:/apache2/htdocs/modules/editor/skins/tinyMCE/ 폴더가 됩니다.

 

4. 첨부된 js.zip 파일을 압축을 푼 후 /modules/editor/tpl/js/ 에 복사합니다.

  - uploader.js와 editor_common.js를 백업(혹은 이름 바꾸기) 후에 덮어쓰기하세요

 

아래는  uploader.js와  editor_common.js의 수정 내용입니다. (첨부 파일은 수정된 사항으로 적용되어있습니다.);

 

/modules/editor/tpl/js/uploader.js  마지막 줄 수정

  - if(text.length>0) editorReplaceHTML(iframe_obj, text.join(''));   을

  - if(text.length>0) editorReplaceHTML(iframe_obj, text.join(''), editorSequence);  로 수정

 

/modules/editor/tpl/js/editor_common.js 수정

  - line 25   기존의 iframe의 컨텐츠에 포커스를 주는 소스에 tinyMCE에 포커스를 주는 if문 추가

    // 에디터에 포커스를 줌
function editorFocus(editor_sequence) {

   //# tinyMCE는 iframe이 아님 ..  tiny에서 지원하는 포커스 기능을 사용   

   if(editorRelKeys[editor_sequence]["editor_skin"] != undefined){

        var editor = editorRelKeys[editor_sequence]["editor"];

        editor.execInstanceCommand("mceFocus", true, "tinyMCE_"+editor_sequence);

   } else {

        var iframe_obj = editorGetIFrame(editor_sequence);
        iframe_obj.contentWindow.focus();

   }
}

 

  - line 105  iframe을 가져오는 부분을  tiny일 경우 그냥 object를 반환하도록 수정

// editor_sequence값에 해당하는 iframe의 object를 return
function editorGetIFrame(editor_sequence) {
    if(editorRelKeys != undefined && editorRelKeys[editor_sequence] != undefined && editorRelKeys[editor_sequence]['editor'] != undefined) {   // if문에  { } 태그를 추가하였음

         // # tinyMCE일 경우  iframe이 아닌 object를 반환

         if(editorRelKeys[editor_sequence]['editor_skin'] != undefined ) {

              return xGetElementById( ' tinyMCE_'+editor_sequence);

         } else {

              return editorRelKeys[editor_sequence]['editor'].getFrame();
              return xGetElementById( 'editor_iframe_'+ editor_sequence );

         }

     }
}

 

  - line 350  첨부 파일을 "본문 삽입"을 눌렀을 때 포커스 위치에 첨부 파일 삽입

// 에디터 내의 선택된 부분의 html코드를 변경
function editorReplaceHTML(iframe_obj, html, editorSequence  ) {    // upload.js 에서 추가한 것과 동일
    // 이미지 경로 재지정 (rewrite mod)
    var srcPathRegx = /src=https://www.xpressengine.com/("|\'){1}(\.\/)?(files\/attach|files\/cache|files\/faceOff|files\/member_extra_info|modules|common|widgets|widgetstyle|layouts|addons)\/([^"\']+)\.(jpg|jpeg|png|gif)("|\'){1}/g;
    html = html.replace(srcPathRegx, 'src="/xe/+request_uri+"$3/$4.$5"');

    // href 경로 재지정 (rewrite mod)
    var hrefPathRegx = /href=https://www.xpressengine.com/("|\'){1}(\.\/)?\?([^"\']+)("|\'){1}/g;
    html = html.replace(hrefPathRegx, 'href="/xe/+request_uri+"?$3"');
  

    //# tinyMCE 일 경우 포커스

    if(editorRelKeys[editorSequence]["editor_skin"] != undefined) {

        var editor = editorRelKeys[editorSequence]["editor"];

        editor.execInstanceCommand("mceFocus", true, "tinyMCE_"+editorSequence);

    } else {

        // 에디터가 활성화 되어 있는지 확인 후 비활성화시 활성화
        var editor_sequence = iframe_obj.contentWindow.document.body.getAttribute("editor_sequence");
        // iframe 에디터에 포커스를 둠
        iframe_obj.contentWindow.focus();

    }

    if(xIE4Up) {

      //# tinyMCE일 경우 ReplaceContent 사용

    if(editorRelKeys[editorSequence]["editor_skin"] != undefined) {

        var editor = editorRelKeys[editorSequence]["editor"];

        editor.execCommand("mceReplaceContent", false,  html);

    } else {

          var range = iframe_obj.contentWindow.document.selection.createRange();
          if(range.pasteHTML) {
              range.pasteHTML(html);
          } else if(editorPrevNode) {
              editorPrevNode.outerHTML = html;
          }

      }

    } else { 

      //# tinyMCE일 경우 ReplaceContent 사용

    if(editorRelKeys[editorSequence]["editor_skin"] != undefined) {

        var editor = editorRelKeys[editorSequence]["editor"];

        editor.execCommand("mceReplaceContent", false,  html);

    } else {
        try {
            if(iframe_obj.contentWindow.getSelection().focusNode.tagName == "HTML") {
                var range = iframe_obj.contentDocument.createRange();
                range.setStart(iframe_obj.contentDocument.body,0);
                range.setEnd(iframe_obj.contentDocument.body,0);
                range.insertNode(range.createContextualFragment(html));
            } else {
                var range = iframe_obj.contentWindow.getSelection().getRangeAt(0);
                range.deleteContents();
                range.insertNode(range.createContextualFragment(html));
            }
        } catch(e) {
            xInnerHtml(iframe_obj.contentWindow.document.body, html+xInnerHtml(iframe_obj.contentWindow.document.body));
        }

      }
    }
}

 

여기까지 설치시 필요한 설정 입니다.

editorRelKeys['editorSequence]['editor_skin'] 을 undefined 로 체크한 이유는

꼭 tinyMCE가 아니더라도 추후 다른 에디터에서  editor_skin 을 사용해서 체크가 가능하도록 입니다.

=======================================================================================================================

여기는 tinyMCE스킨 폴더의 파일 설정 내용 설명입니다.

 

1. /tinyMCE/editor.html

  - 자동 저장 관련 소스를 모두 삭제 하였습니다. 자도 저장 기능을 사용하지 않습니다.

  -<textarea id="tinyMCE_{$editor_sequence}" style="width:100%; height:{$editor_height}px;"></textarea>

     - textarea의 id 를  tinyMCE_시퀀스 로 했습니다.

 

2. /tinyMCE/js/tinyMCE.js 테스트중 만든 파일인데 실수로 같이 압축되서 배포 됐어요 .. 삭제 하셔도 됩니다 -_-;;

3. /tinyMCE/js/xe_interface.js

  - fckEditor를 참고 하였습니다.

  - line 26  tinyMCE.init  부분이 에디터 설정 부분입니다. 이곳에 소스를 변경하시면 여러가지 스타일 및 설정이 가능합니다.

4. line 67 에  editorRelKeys[editor_sequence]['editor_skin'] = 'tinyMCE';  // # tinyMCE 검색을 위해 추가  라는 소스가 추가 되어있습니다.

  위 소스 중에  editor_skin  != undefined 로 검색할 때 사용했습니다.

 

 

======================================================================================================================

 

처음에 말씀 드린 것처럼 init 소스를 수정하시면 플러그인 / 스킨 /템플릿 등을 설정이 가능합니다.

홈페이지 참고하셔서 적용 해보세요

 

=====================================================================================================================

/*  # 추가팁 : 제가 작업하다 알아낸 추가팁을 여기다가 계속 적을게요 */

/*

1. 하단의 path bar가 너무 긴 경우 에디터가 윈도우 사이즈보다 길어집니다.

예를 들어

<p><p><p><p><p><P><P><p><div><p> 여기에 내용 </p></div></p>......

인 경우  하단의 path bar에

p > p > p > p > p > P > P > p > div > p >  이렇게 나타나는데 엑셀데이터 같은거 복사한 경우 너무 길어서 화면크기를 벗어납니다.

xe_inteface.js 파일의  tinyMCE.init() 함수에 

theme_advanced_path : false,  를 추가해주시면 하단 path bar에 내용이 출력되지 않습니다.

 

2. 위 소스에서 오타가 아무리 봐도 안보여서 (죄송합니다 ;ㅁ;) 결국 js파일을 복사신공을 발휘해서 가져왔습니다. js 파일 압축 풀어서 사용해 보세요~

 

3. 제목을 한글로 작성하고 내용에 바로 한글을 입력 시 글씨가 지워지는 문제가 있습니다. 이를 해결하시려면

 xe_interface.js 파일의 tinyMCE.init({  소스 바로 위에

 - if(element.value == '') element.value = '<p></p>';  혹은 <div></div> 같은걸 넣어주세요..