## 폼 전송 구현하기

### 1. hidden 객체 생성하기

에디터에서 콘텐츠를 작성하는 것과는 별도로 폼(from)을 통해 전송할 hidden 객체가 필요합니다.

hidden 객체로는 주로 "input" 또는 "textarea"를 사용할 수 있으나, 크로스에디터는 작성된 콘텐츠의 내용을 소실 없이 전송할 수 있는 "textarea" 사용을 권장합니다.

또한 브라우저의 자바스크립트 기능이 비활성화 되어 있는 경우 또는 자바스크립트가 정상적으로 동작 하지 않는 환경에서 크로스에디터가 실행되지 않아 글을 작성할 수 없는 상황에서 정상적으로 글을 작성할 수 있도록 "textarea"를 함께 사용하는 것이 웹 접근성을 높여 주는 방법이며 W3C의 권고 사항입니다.

<textarea id="editorValue" name="editorValue" style="display: none"></textarea>

### 2. 크로스에디터 콘텐츠 작성 유무 확인하기

폼(form) 전송을 할 경우 콘텐츠의 내용 유무에 대한 구분이 필요한 경우가 있습니다.

이러한 경우 크로스에디터에서 제공하는 "IsDirty" 또는 "GetTextValue" API를 사용하여 구분할 수 있습니다.

"IsDirty" Method는 문서 내용이 변경된 경우 true값을, 문서 내용이 변경되지 않은 경우 false값을 반환합니다. 에디터 로딩 시 "SetDirty" Method를 설정 후 사용해야 합니다.

크로스에디터로 focus 이동은 "SetFocusEditor" Method를 사용합니다.

var CrossEditor = new NamoSE('namoeditor1');

CrossEditor.EditorStart();

CrossEditor.SetDirty(); //현재 문서 편집 상태 초기화

if(!CrossEditor.IsDirty()){ // 크로스에디터 안의 컨텐츠 입력 확인

alert("에디터에 내용을 입력해 주세요!!");

CrossEditor.SetFocusEditor(); // 크로스에디터 Focus 이동

return false;

}

"GetTextValue" Method는 문서 안의 text 값을 반환하기 때문에 "IsDirty"와 같은 기능을 할 수 있습니다.

if(CrossEditor.GetTextValue () == ""){ // 크로스에디터 안의 콘텐츠 입력 확인

alert("에디터에 내용을 입력해 주세요 !!");

CrossEditor.SetFocusEditor(); // 크로스에디터 Focus 이동

return false;

}

### 3. 크로스에디터에서 작성한 콘텐츠의 내용 가져오기

크로스에디터에서 작성된 콘텐츠의 내용을 가져오려면 "GetValue" 또는 "GetBodyValue" API를 사용합니다.

HTML, XHTML 형식으로 값을 가져올 수 있습니다.

###### 3-1. GetValue(): 작성한 내용 전체를 HTML형식으로 <html>부터 </html>까지 반환

document.getElementById("contents").value = CrossEditor.GetValue();

###### 3-2. GetValue("XHTML"): XHTML 형식으로 <html>부터 </html>까지 반환

document.getElementById("contents").value = CrossEditor.GetValue("XHTML");

###### 3-3. GetBodyValue(): 작성한 내용 중 HTML 형식으로 <body> 태그 안의 내용만 반환

document.getElementById("contents").value = CrossEditor.GetBodyValue();

###### 3-4. GetBodyValue("XHTML"): XHTML 형식으로 <body> 태그 안의 내용만 반환

document.getElementById("contents").value = CrossEditor.GetBodyValue("XHTML");

### 4. 작성된 콘텐츠 내용 크로스에디터에 삽입하기 (수정하기 페이지 등)

콘텐츠 내용을 크로스에디터에 삽입할 경우에는 "SetValue"나 "SetBodyValue" API를 사용합니다.

단 크로스에디터에서 내용을 가져오는 Method와 삽입 Method는 서로 동일해야 합니다.

"GetValue"를 사용한 경우에는 "SetValue"를 사용하고, "GetBodyValue"를 사용한 경우에는 "SetBodyValue"를 사용해야 합니다.

또한 에디터를 초기화 후 바로 Method를 호출 시 환경에 따라 정상적으로 호출되지 않는 경우가 있습니다. 이러한 경우를 방지하기 위해 에디터 초기화 후 발생되는 "OnInitCompleted" 이벤트를 사용하여 Method를 실행하는 것을 권장합니다.

###### 4-1. SetValue():
부터
까지 전체의 html 내용을 크로스에디터에 삽입

var contentValue = document.getElementById("contents").value; // Hidden 값 참조

var CrossEditor = new NamoSE('namoeditor1');

CrossEditor.EditorStart();

function OnInitCompleted(e){

e.editorTarget.SetValue(contentValue); // 컨텐츠 내용 에디터에 삽입

}

###### 4-2. SetBodyValue(): <body> 태그 안의 내용만 크로스에디터에 삽입

var contentValue = document.getElementById("contents").value; // Hidden 값 참조

var CrossEditor = new NamoSE('namoeditor1');

CrossEditor.EditorStart();

function OnInitCompleted(e){

e.editorTarget.SetBodyValue(contentValue); // Body안의 내용만 에디터 삽입

}

## 보안 취약점 관련 에디터에서 설정 방법

크로스에디터는 범용 위지윅 html 편집기이기 때문에 사용자가 작성하는 내용에 대하여 악의적인 내용인지 여부를 판단할 수는 없습니다.

그러나 크로스에디터에서 지원하는 API 기능을 통해 script, iframe 태그 및 onclick, onload 등의 attribute 제한을 할 수 있습니다.

CrossEditor.params.AllowContentIframe = false;

CrossEditor.params.AllowContentScript = false;

CrossEditor.params.TagBlockList = ["form", "option"]; //제한을 원하는 태그 나열

CrossEditor.params.AttributeBlockList = ["onclick", "onload", "onchange"]; //제한을 원하는 attribute 나열

CrossEditor.EditorStart();

해당 API가 설정되면 에디터에서 탭 전환 시에도 설정한 값을 체크하여 다음 단계로 넘어가지 않으며, HTML탭 상태에서 “GetValue” 또는 “GetBodyValue”로 값을 가져오는 경우에도 체크하여 설정한 값을 제외시켜 줍니다.

## 에디터 최초 실행 시 바로 출력하지 않는 경우 (Display None)

크로스에디터가 최초 실행 시 비즈니스 로직으로 인해 일시적으로 화면에서 감추고 싶은 경우가 있습니다.

이러한 경우 크로스에디터의 높이가 계산되지 않아 크로스에디터를 화면에 출력했을 때 정상적으로 출력이 되지 않습니다.

### 1. 크로스에디터 포커스 설정

페이지 호출 시 크로스에디터가 화면에 출력되지 않는 경우 크로스에디터에 포커스 설정이 필요없으므로 "SetFocus" API를 사용하여 포커스를 해제시켜 줍니다.

SetFocus : true -> 크로스에디터 포커스 설정

false -> 크로스에디터 포커스 해제

var CrossEditor = new NamoSE('namoeditor1');

CrossEditor.params.SetFocus = false; // 에디터 포커스 해제

CrossEditor.EditorStart();

### 2. 크로스에디터 DisplayNoneTarget 설정

크로스에디터를 최초 실행 시 화면에 출력되지 않는 경우 에디터의 출력 높이를 계산하기 위해 display None이 적용될 Element(예를 들어 크로스에디터를 감싸고 있는 DIV 레이어)를 "DisplayNoneTarget" params API를 사용하여 지정해야 합니다.

<div id="crossEditor" style="display: none">

<script language="javascript">

var CrossEditor = new NamoSE('namoeditor1');

CrossEditor.params.SetFocus = false; // 에디터 포커스 설정

CrossEditor.params.DisplayNoneTarget = document.getElementById("crossEditor");

// 크로스에디터를 감싸고 있는 레이어 설정

CrossEditor.editorStart();

</script>

</div>