비어 있는 새 문서를 만듭니다.
마지막 업데이트 날짜
2022년 11월 28일
이 예제에서는 Script Editor Extension을 만듭니다. 이 Script Editor Extension은 디자인 뷰의 선택된 스크립트 마커에 밑줄을 긋는 JavaScript 코드를 표시할 플로팅 패널을 만듭니다. Script Editor는 scriptlayer라는 플로팅 패널에 정의되어 있는 HTML 양식의 textarea 요소에 JavaScript 코드를 표시합니다. 플로팅 패널에서 선택된 코드를 변경하면 해당 Extension은 updateScript() 함수를 호출하여 변경 내용을 저장합니다. Script Editor를 호출할 때 스크립트 마커를 선택하지 않았으면 해당 Extension은 blanklayer라는 플로팅 패널에 (no script selected)라고 표시합니다.
이 Extension을 만들려면 플로팅 패널을 만들고 JavaScript 코드를 작성한 다음 메뉴 항목을 만듭니다.
플로팅 패널 만들기
이 확장에 대한 HTML 파일의 시작 부분에는 표준 문서 머리글 정보가 포함되어 있으며 플로팅 패널의 제목 막대에 Script Editor라는 단어를 표시하는 title 태그가 포함되어 있습니다.
HTML 파일 헤더 만들기
-
-
다음을 입력합니다.
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Script Editor</title> <script language="JavaScript">
이 Extension은 두 개의 플로팅 패널을 정의합니다. 하나는 사용자가 스크립트 마커를 선택하지 않은 경우 (no script selected)라고 표시하는 패널이고 다른 하나는 선택된 스크립트 마커에 밑줄을 긋는 JavaScript 코드를 표시하는 패널입니다. 다음 코드에서는 이러한 두 가지 플로팅 패널 또는 blanklayer 및 scriptlayer라는 AP(절대 위치) 요소를 정의합니다.
두 개의 플로팅 패널 만들기
-
다음 코드를 HTML 파일의 헤더 뒤에 추가합니다.
<body> <div id="blanklayer" style="position:absolute; width:422px; ¬ height:181px; z-index:1; left: 8px; top: 11px; ¬ visibility: hidden"> <center> <br> <br> <br> <br> <br> (no script selected) </center> </div> <div id="scriptlayer" style="position:absolute; width:422px; ¬ height:181px; z-index:1; left: 8px; top: 11px; ¬ visibility: visible"> <form name="theForm"> <textarea name="scriptCode" cols="80" rows="20" wrap="VIRTUAL" ¬ onBlur="updateScript()"></textarea> </form> </div> </body> </html>
-
이 파일을 Configuration/Floaters 폴더에 scriptEditor.htm이라는 이름으로 저장합니다.
두 div 태그는 모두 style 속성을 사용하여 플로팅 패널의 위치(absolute), 크기(width:422px 및 height:181px), 기본 가시성 설정(visible)을 지정합니다. blanklayer 패널은 center 속성과 일련의 분리(br) 태그를 사용하여 패널의 가운데에 텍스트를 배치합니다. scriptlayer 패널은 단일 textarea가 포함된 양식을 만들어 선택된 JavaScript 코드를 표시합니다. textarea 태그는 선택된 코드가 변경되었음을 나타내는 onBlur 이벤트가 발생할 때 updateScript() 함수가 호출되어 변경된 텍스트를 해당 문서에 다시 작성하도록 지정합니다.
JavaScript 코드 작성
Script Editor에 대한 JavaScript 코드는 Dreamweaver에서 호출하는 플로팅 패널 함수인 selectionchanged()와 사용자가 정의하는 함수인 updateScript()로 구성되어 있습니다.
selectionChanged(): 스크립트 마커의 선택 여부 결정
selectionChanged() 함수는 스크립트 마커가 디자인 뷰에서 선택되었는지 여부를 확인합니다. 문서의 body 섹션에 JavaScript 루틴이 있고 [환경 설정] 대화 상자의 [보이지 않는 요소] 섹션에 [스크립트]가 선택되어 있으면 디자인 뷰에 스크립트 마커가 나타납니다. 다음 그림에서는 스크립트 마커 아이콘을 보여 줍니다.
selectionChanged() 함수는 먼저 dw.getDocumentDOM() 함수를 호출하여 사용자의 문서에 대한 DOM(문서 오브젝트 모델)을 가져옵니다. 그런 다음 getSelectedNode() 함수를 호출하여 해당 문서에 대해 선택된 노드가 요소인지 여부와 SCRIPT 태그인지 여부를 차례로 확인합니다. 두 조건이 모두 true이면 selectionChanged() 함수는 scripteditor 플로팅 패널을 표시하고 기본 JavaScript 코드와 함께 로드합니다. 또한 blanklayer 플로팅 패널의 visibility 속성 값을 hidden으로 설정합니다. 다음 그림에서는 선택된 JavaScript 코드와 함께 scriptlayer 플로팅 패널을 보여 줍니다.
선택된 노드가 요소가 아니거나 script 태그가 아니면 selectionChanged() 함수는 blanklayer 플로팅 패널이 표시되도록 하고 scriptlayer 패널을 숨깁니다. blanklayer 플로팅 패널은 다음 그림과 같이 (no script selected)라는 텍스트를 표시합니다.
selectionChanged() 함수 추가
-
Configuration/Floaters 폴더에 있는 scriptEditor.htm 파일을 엽니다.
-
파일의 헤더 섹션에 다음 코드를 입력합니다.
function selectionChanged(){ /* get the selected node */ var theDOM = dw.getDocumentDOM(); var theNode = theDOM.getSelectedNode(); /* check to see if the node is a script marker */ if (theNode.nodeType == Node.ELEMENT_NODE && ¬ theNode.tagName == "SCRIPT"){ document.layers['scriptlayer'].visibility = 'visible'; document.layers['scriptlayer'].document.theForm.¬ scriptCode.value = theNode.innerHTML; document.layers['blanklayer'].visibility = 'hidden'; }else{ document.layers['scriptlayer'].visibility = 'hidden'; document.layers['blanklayer'].visibility = 'visible'; } } -
파일을 저장합니다.
updateScript():변경 내용 다시 작성
updateScript() 함수는 scriptlayer 패널의 textarea에서 onBlur 이벤트가 발생할 때 선택된 스크립트를 다시 작성합니다. textarea 양식 요소에는 JavaScript 코드가 포함되어 있으며, textarea가 입력 포커스를 잃으면 onBlur 이벤트가 발생합니다.
-
Configuration/Floaters 폴더에 있는 scriptEditor.htm 파일을 엽니다.
-
파일의 헤더 섹션에 다음 코드를 입력합니다.
/* update the document with any changes made by the user in the textarea */ function updateScript(){ var theDOM = dw.getDocumentDOM(); var theNode = theDOM.getSelectedNode(); theNode.innerHTML = document.layers['scriptlayer'].document.¬ theForm.scriptCode.value; } </script> </head> -
파일을 저장합니다.
메뉴 항목 만들기
Configuration/Floaters 폴더에 Script Editor 코드를 저장하는 것만으로는 충분하지 않습니다. dw.setFloaterVisibility('scriptEditor',true) 함수 또는 dw.toggleFloater('scriptEditor') 함수를 호출하여 플로팅 패널을 로드하고 화면에 표시되도록 해야 합니다. Script Editor를 가장 확실하게 호출할 수 있는 위치는 menus.xml 파일에 정의되어 있는 [윈도우] 메뉴입니다. 다음 그림과 같이 Script Editor Extension에 대한 항목을 [윈도우] 메뉴에 만드는 menuitem 태그를 만들어야 합니다.
현재 문서의 디자인 뷰에서 스크립트 마커를 선택하고 [Script Editor] 메뉴 항목을 선택하면 [Script Editor] 플로팅 패널이 호출되고 스크립트 마커에 밑줄을 긋는 JavaScript 코드가 표시됩니다. 스크립트 마커가 선택되지 않은 경우 메뉴 항목을 선택하면 (no script selected)라는 텍스트가 포함된 blanklayer 패널이 표시됩니다.
-
Configuration/Menus 폴더에 있는 menus.xml 파일을 엽니다.
-
<menuitem name="Tile _Vertically로 시작하는 태그를 찾은 다음 이 태그의 닫는 /> 뒤에 삽입 포인터를 놓습니다.
-
행을 바꿔 다음을 입력합니다.
<menuitem name="Script Editor" enabled="true" ¬ command="dw.toggleFloater('scriptEditor')"¬ checked="dw.getFloaterVisibility('scriptEditor')" /> -
파일을 저장합니다.
