전역 변수는 말 그대로 현재 실행중인 창 전반에 걸쳐 영향력을 행사하게 됩니다

앞서 설명했듯 익스와 불여우는 브라우져 렌더링의 차이로 인해 픽셀의 오차가 있습니다
보더와 마진 패딩등을 없이 사용한다면 같은 크기와 넓이로 나오지만 여기에 값들이 들어가게 되면 차이가 생깁니다
그래서 실행중인 브라우져가 무엇인지 알아 그에 맞는 필요한 행위를 해 주기 위해 전역변수를 하나 만들어 사용하게 됩니다

위의 두함수는 일일이 써 줘야 하는
document.getElementById("id").속성값  등을 좀 더 줄여 가독성을 높이고 편리성을 취하기 위해 사용합니다

$("id").속성 과 같이 사용하게 됩니다

document.getElementById("id").contentWindow.document.속성 을 
$EDITOR("id")과 같이 사용합니다

아이프레임을 접근할때 표준 방법은 위와 같이 아이프레임의 아이디 값을 이용 contentWindow 적용해서 들어가게 됩니다
즉 위의 함수는 id 값이 들어오면 그 이름을 가진 아이프레임의 document까지 접근하게 됩니다
필요에 의해 뒤에 붙은 document는 떼고 사용하셔도 됩니다





맨 아래에 써준
//온로드시 실행함수 다음에 다음의 사항을 써줍니다

페이지가 로딩된 후 위의 온로드 함수를 자동실행하게 해서 포함된 Start(); 함수를 실행하게 됩니다
Start(); 함수는 TEXTAREA(글쓰기란)을 에디터화 하기 위한 함수입니다

여기서 잠깐 TIP
간혹 제로보드 4를 사용하시는 분들중 본문으로 들어가면 자바스크립중 일부가 실행되지 않고 오류가 나온다는 분들이
계십니다
 
"리스트는 괜챦은데 본문만 들어가면 먹통되요 알려주세요 ㅠㅜ  "

제로보드4는 이미지가 있을 경우 온로드가 된후 자동 리사이즈 하는 기능이 엔진에 내장되어 있습니다
즉 헤드에 위와 같은 온로드 함수와 바디에 온로드 함수 바디 본문중 온로드 함수가 있다면
개중 일부는 작동이 되지 않습니다 온로드 함수는 한페이지에 하나만 쓰는게 좋습니다

이럴 경우 위와 같이 함수를 만들어 윈도우 자동 온로드 함수를 만들어 그곳에서 필요한 함수들을 두어 사용하는게
좋습니다 

 window.onload= function(event) {
        온로드함수1();
        온로드함수2(); 
        온로드함수3();
 }

위와 같이 한곳에 모아두고 사용한다면 불필요한 충돌을 피할 수 있으며 필요 없을시 해당 함수만 삭제해 주면 되기에
편리성 또한 있습니다




윈도우(페이지)가 로딩 되면 Start(); 함수가 실행되게 해놨으니
Start(); 함수를 만들어 텍스트 에리어가 변화하는지 보면 되겠습니다

여기서 이해해야 할 과정은
텍스트에리어가 편집형 아이프레임으로 바로 모습이 변환된다기 보다는 텍스트 에리어 밑에 아이프레임이 생기고
텍스트 에리어가 숨김설정 또는 삭제 된다는 겁니다
위와 같은 과정이 순간 일어나기에 로딩 되면서 바로 편집형 아이프레임으로 변환되어 보입니다

    var tags        = document.getElementsByTagName("TEXTAREA"); // textarea  검색..
    var tag_length  = tags.length;

   start()함수 안에서 쓰일 지역 변수를 만들어 사용을 쉽게 합니다

  위에 document.getElementsByTagName("TEXTAREA");  는  지금 사용중인 페이지에서  textarea란 태그를 지닌 즉 textarea (글쓰기 위한  글쓰기 공간 )이 몇개인지를 알아내기 위함과 변환 과정을 위해서 필요합니다

     var tag_length  = tags.length;   
     tag_length  란 지역 변수에 textarea의 갯수를 담아둡니다

  위의 코드를 따로 저장해서 실행해 보고 "텍스트에리어의 갯수는" 를 눌러보면  5 라는 알러트가 표시됩니다



  자 이제 로딩된 현재의 페이지 내에 몇개의 글쓰기란 즉 textarea가 있는지 위의 간단한 코드로 알아낼 수 있었습니다
  그럼 다음으로 해야 할 일이 뭘까요?

  갯수를 알게 되었으니 변환 과정이 필요하겠죠
 
  만약 한페이지에 변환되어야 할 textarea가 하나 내지는 두개이면 해당 객체를 바로 변환해 써도 되겠지만
  서너개 이상이라면 반복적인 코드가 여러번 쓰이겠죠
  즉 반복적인 일을 줄이기 위해 여기서 우린 for문 또는 while문을 이용하게 됩니다
  이런 예는 구구단과 같은 반복적인 작업에도 쓰이니 네이버등에서 한번쯤 찾아봐서 실행해 보면 많은 도움이 됩니다

 그럼 자바 스크립트의 for문을 이용 반복 작업을 줄이겠습니다
 그러기 위해 위에 소스 코드에 있는

    for(var i=0; i<tag_length; i++) {// textarea갯수만큼 for문을 돌림

   }//end for 가 쓰였습니다
  
   for문은 (시작점;끝점;증가 또는 감소되는 갯수) 로 이뤄집니다

   시작점을 1이 아닌 0으로 잡은 것은 배열 때문입니다
   var tags        = document.getElementsByTagName("TEXTAREA"); // textarea  검색..
   에서 TEXTAREA란 이름을 가진 태그를 검색하게 될때 배열 형태로 담아두게 되고 배열은 0부터 시작하기 때문입니다

   끝점이 textarea의 갯수와 같을 때 까지 돌리지 않고 작을 때 까지 돌리는 이유도 0부터 시작하기에 하나 작은
   textarea의 갯수보다 작을 때 까지 돌리게 되는 겁니다


        var obj = tags[i]; 
        var objNAME     = obj.id+"AREA";  


       tags[i]; 는 for문을 돌면서 tags[0]; tags[1]; tags[2]; tags[3]; ........ 와 같이 쓰이게 됩니다 

         var objNAME     = obj.id+"AREA"; 
        위의 코드는  텍스트에리어의 아이디 값을 끝에 "AREA"를 덧붙여서   objNAME에 할당해 줍니다
       objNAME는 밑에서 아이프레임(편집가능한 아이프레임)의 아이디 값으로 사용하게 됩니다





        OBJECT             = document.createElement("IFRAME");
        OBJECT.id          = objNAME;
        document.body.insertBefore(OBJECT);     //메인레이어

        obj_value       = tags[i].value;                  //원본 텍스트 에리어의 내용


      
위에서 설명 했듯 textarea의 갯수만큼 아이프레임( 수정 가능한 편집용 아이프레임 )을 만든후
텍스트 에리어를 숨김 또는 삭제한다고 했습니다
텍스트 에리어의 갯수를 알아 냈으니 텍스트 에리어의 갯수만큼 포문을 활용해서 ( 돌리면서 ) 편집가능한 아이프레임을
만들면 되겠습니다

위에 쓰인것은 아이프레임을 만들기 위한 행동입니다
문서에 IFRAME을 만든후 만든 IFRAME을 document의 body(  html의 body )부분에 끼워 넣는 겁니다

  

  obj_value       = tags[i].value;                  //원본 텍스트 에리어의 내용
 
  말 그대로 텍스트 에리어의 내용을 담아 두게 됩니다
  tags[i] 는 현재 실행 ( for문 - 태그이름으로 불러들이면 배열로 저장됨을 유념 )중인 텍스트에리어를 의미하며
 뒤에 .value   .text 와 같이 써서 해당 객체의 값들을 불러들일 수 있습니다

  그러니 위의 코드는 현재 실행중인 텍스트에리어의 value값을   obj_value라는 지역변수에 할당한다는 얘기입니다







        //디자인 모드로 아이프레임 스타일 변경
        var Editor = $EDITOR(objNAME);
       

Editor 라는 지역변수에  $EDITOR(objNAME) 를 할당합니다 즉 objNAME(현재 실행중인 텍스트에리어의 아이디+"AREA")라는 아이디 값을 가진 아이프레임의 document까지를 이르게 됩니다


        Editor.designMode = 'On';
        제일 중요한 부분이며 아이프레임을 편집 가능하도록 하기 위한 지정입니다

  
 위의 예제만으로 아이프레임이 편집 가능한 형태로 바뀌었음을 알았습니다
 다만 스타일 지정이 되지 않아 글자등이 크게 나오기 때문에 필요한 만큼 스타일 시트를 이용 지정해 줘야겠습니다

        var contenthtml_style = ""
            + "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">n"
            + "<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">n"
            + "<head>n"
            + "<title>에디터</title>n"
            + "<style type="text/css">n"
            + "html,body {n"
            + "      padding:0px;n"
            + "      margin :0px;n"
            + "      font-family:굴림;n"
            + "      font-size:9pt;n"
            + "      background-color: "+editerBackColor+";n"
            + "}n"
            + "p{n"
            + "     padding :0px 0px 0px 0px;n"
            + "     margin  :1px 0px 1px 0px;n"
            + "}n";
            if(explorer){//익스일때
            contenthtml_style+=""
            + "body {n"
            + "      word-break:break-all;n"
            + "      background-color: "+editerBackColor+";n"
            + "      scrollbar-face-color: #DDDDDD;n"
            + "      scrollbar-highlight-color: #CCCCCC;n"
            + "      scrollbar-shadow-color: #CCCCCC;n"
            + "      scrollbar-3dlight-color: #F5F5F5;n"
            + "      scrollbar-darkshadow-color: #F5F5F5;n"
            + "      scrollbar-track-color: #F0F0F0;n"
            + "      scrollbar-arrow-color: #FFFFFF;n"
            + "}n"
            }else{//익스외에
            contenthtml_style+=""
            + "#"+objNAME+"memoCODE{n"//메모가 들어가는 곳
            + "     margin  : 0px;n"
            + "     padding : 0px;n"
            + "     background-color: "+editerBackColor+";n"
            + "     min-height:"+EditorHEIGHT+"px;n"
            + "     cursor:text;n"
            + "}n";
            }
            contenthtml_style+=""
            + "</style>n"
            + "</head>n"
            + "<body>n";
            if(explorer){//익스일때
            contenthtml_style+=""
            + obj_value;
            }else{//익스외에
            contenthtml_style+=""
            + "<div id=""+objNAME+"memoCODE">"+obj_value+"</div>n";
            }
            contenthtml_style+=""
            + "</body>n"
            + "</html>";

위의 부분은 아이프레임안에서 적용될 스타일 시트를 자바 스크립트로 변환한 과정입니다
빨간색 부분은 사용자에 의해서 변환 가능하기에 따로 위에서 전역 변수로 만들어 사용을 편리하게 합니다

obj_value  는 위에서 설명했듯 원본 텍스트 에리어의 VALUE값 즉 내용이 담기게 됩니다

그래서 아이프레임이 생성되고 다시 편집 가능하게 변환후 텍스트 에리어의 글이 아래의 과정을 통해 담길수 있게 됩니다


        Editor.open();
        Editor.write(contenthtml_style);
        Editor.close();

    Editor는 현재 실행되는 ( FOR문을 통해 현재 진행중인 텍스트 에리어의 짝이 되는 생성된 변환 아이프레임 )
   아이프레임의 DOCUMENT까지를 말한다고 했습니다

   위의 과정을 통해 아이프레임의 도큐멘트를 열고 그안에 위에서 만든 스타일 (contenthtml_style라는 지역변수에 스타일을
    할당 했음을 잊지 마시기 바랍니다 ) 을 write 기능을 이용 document에 써주고 다시 아이프레임을 닫아줍니다
    위에서 쓴 open과정과 close과정이 빠지면 불여우에서는 인식을 하지 못합니다 


   자 위의 일련의 과정을 통해 만들어진 소스는 다음과 같습니다
  

/*************************************************************************
*  전역변수 선언                                                         *
*************************************************************************/
var explorer          = (navigator.appName.indexOf("Microsoft")!=-1);
var fireFox           = (navigator.appName.indexOf("Netscape") != -1);

var editerBackColor   = "#fff";                                       //에디터 배경색
var frameHEIGHT="100%";

//버튼에 관한 배열

//에디터 기능함수들

//아이디값을 간단하게 호출
function $(id){
    var element="";
    element= document.getElementById(id);
    return element;
}
//아이프레임을 간단하게 호출
function $EDITOR(id){
    var element="";
    element= document.getElementById(id).contentWindow.document;
    return element;
}


/*************************************************************************
*  에디터 start                                                          *
*************************************************************************/
function Start(){ 
    var tags        = document.getElementsByTagName("TEXTAREA"); // W3C 표준의 모든 태그 검색..
    var tag_length  = tags.length;
    for(var i=0; i<tag_length; i++) {//
        var obj = tags[i];
        var objNAME     = obj.id+"AREA";                  //에디터의 고유 아이디

        OBJECT             = document.createElement("IFRAME");
        OBJECT.id          = objNAME;
        document.body.insertBefore(OBJECT);     //메인레이어

        obj_value       = tags[i].value;                  //원본 텍스트 에리어의 내용
        //디자인 모드로 아이프레임 스타일 변경
        var Editor = $EDITOR(objNAME);
        Editor.designMode = 'On';
        EditorHEIGHT=parseInt(frameHEIGHT)-17;
        var contenthtml_style = ""
            + "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">n"
            + "<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">n"
            + "<head>n"
            + "<title>에디터</title>n"
            + "<style type="text/css">n"
            + "html,body {n"
            + "      padding:0px;n"
            + "      margin :0px;n"
            + "      font-family:굴림;n"
            + "      font-size:9pt;n"
            + "      background-color: "+editerBackColor+";n"
            + "}n"
            + "p{n"
            + "     padding :0px 0px 0px 0px;n"
            + "     margin  :1px 0px 1px 0px;n"
            + "}n";
            if(explorer){//익스일때
            contenthtml_style+=""
            + "body {n"
            + "      word-break:break-all;n"
            + "      background-color: "+editerBackColor+";n"
            + "      scrollbar-face-color: #DDDDDD;n"
            + "      scrollbar-highlight-color: #CCCCCC;n"
            + "      scrollbar-shadow-color: #CCCCCC;n"
            + "      scrollbar-3dlight-color: #F5F5F5;n"
            + "      scrollbar-darkshadow-color: #F5F5F5;n"
            + "      scrollbar-track-color: #F0F0F0;n"
            + "      scrollbar-arrow-color: #FFFFFF;n"
            + "}n"
            }else{//익스외에 
            contenthtml_style+=""
            + "#"+objNAME+"memoCODE{n"//메모가 들어가는 곳
            + "     margin  : 0px;n"
            + "     padding : 0px;n"
            + "     background-color: "+editerBackColor+";n"
            + "     min-height:"+EditorHEIGHT+"px;n"
            + "     cursor:text;n"
            + "}n";
            }
            contenthtml_style+=""
            + "</style>n"
            + "</head>n"
            + "<body>n";
            if(explorer){//익스일때
            contenthtml_style+=""
            + obj_value;
            }else{//익스외에 
            contenthtml_style+=""
            + "<div id=""+objNAME+"memoCODE">"+obj_value+"</div>n";
            }
            contenthtml_style+=""
            + "</body>n"
            + "</html>";
        Editor.open();
        Editor.write(contenthtml_style);
        Editor.close();
    }//end for
}
//에디터 모드 체인지


/*************************************************************************
*  온로드시 호출                                                         *
*************************************************************************/
 window.onload= function(event) {
        Start();//마리홈 위지윅 에디터
 }