CrossEditor
폼 전송 구현하기
크로스에디터에서 컨텐츠를 작성하는 것과는 별도로 폼(from)을 통해 전송할 hidden 객체가 필요합니다.
hidden 객체로는 주로 "input hidden" 또는 "textarea"를 사용할 수 있는데, 크로스에디터에서는 작성된 컨텐츠의 내용을 소실 없이 전송할 수 있는 "textarea"의 사용을 권장합니다.
<textarea id="editorValue" name="editorValue" style="display: none"></textarea>
2. 크로스에디터 컨텐츠 작성 유무 확인하기
폼(form)전송을 할 경우 컨텐츠의 내용의 유무에 대한 구분이 필요한 경우가 있습니다.
이러한 경우 크로스에디터에서 제공하는 "IsDirty" 또는 "GetTextValue" API를 사용하여 구분을 할 수 있습니다.
"IsDirty" Method 는 문서 내용이 변경 되었을 경우 "true" 값을, 문서 변경이 없을 경우 "false"의 값을 반환합니다.
크로스에디터로 focus이동은 "SetFocusEditor" Method를 사용하면 됩니다.
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를 사용하면 됩니다.
해당 API들은 크로스에디터에서 작성된 컨텐츠를 HTML 양식으로 반환합니다.
Method에 대한 자세한 내용은 관리자 도움말의 API 안내를 참고하십시오.
GetValue: 크로스에디터에서 작성된 컨텐츠의 내용을 모두 반환합니다.
document.getElementById("editorValue").value = CrossEditor.GetValue();
GetBodyValue: 크로스에디터에서 작성된 컨텐츠 내용 중 Body 안의 내용을 반환합니다.
document.getElementById("editorValue").value = CrossEditor.GetBodyValue();
4. 작성된 내용을 크로스에디터에 삽입하기 (수정하기 페이지 등)
컨텐츠 내용을 크로스에디터에 삽입할 경우에는 "SetValue"나 "SetBodyValue" API를 사용하면 됩니다.
단 크로스에디터에서 내용을 가져오는 Method와 삽입 시 사용하는 Method는 서로 짝을 이루고 있습니다.
"GetValue"를 사용하여 내용을 가져왔을 경우에는 "SetValue"를 사용해야 합니다.
"GetBodyValue"를 사용하여 내용을 가져왔을 경우에는 "SetBodyValue"를 사용해야 합니다.
작성된 컨텐츠의 내용을 JavaScript를 사용하여 에디터에 삽입 시 컨텐츠의 내용 중 줄 구분자나 더블 쿼테이션 (""), 싱글 쿼테이션 ('')으로 인해 JavaScript 구문이 오류가 나 정상 작동을 하지 않는 경우가 있습니다.
이러한 경우를 미연에 방지하기 위해 Hidden 객체를 생성하여 컨텐츠의 내용을 삽입 후 자바스크립트에서 그 값을 참조하면 됩니다.
생성한 Hidden 객체를 참조하여 크로스에디터에 "SetValue" 또는 "SetBodyValue"를 사용하여 컨텐츠를 삽입합니다.
에디터 초기화 후 바로 Method를 호출 시 환경에 따라 정상적으로 호출이 되지 않는 경우가 있습니다.
이러한 경우를 미연에 방지하기 위해 에디터 초기화 후 발생되는 "OnInitCompleted" 이벤트를 사용하여 Method를 실행시키기를 권장 합니다.
SetValue: HTML태그부터 포함이 되어있는 컨텐츠를 크로스에디터에 삽입합니다.
var contentValue = document.getElementById("contents").value; // Hidden 값 참조
var CrossEditor = new NamoSE('namoeditor1');
CrossEditor.EditorStart();
function OnInitCompleted(){
CrossEditor.SetValue(contentValue); // 컨텐츠 내용 에디터 삽입
}
SetBodyValue: BODY태그 안쪽의 내용만 크로스에디터에 삽입합니다.
var contentValue = document.getElementById("contents").value; // Hidden 값 참조
var CrossEditor = new NamoSE('namoeditor1');
CrossEditor.EditorStart();
function OnInitCompleted(){
CrossEditor.SetBodyValue(contentValue); // 컨텐츠 내용 에디터 삽입
}
에디터 최초 실행 시 바로 출력하지 않는 경우 (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>
