에디터에서 콘텐츠를 작성하는 것과는 별도로 폼(from)을 통해 전송할 hidden 객체가 필요합니다.
hidden 객체로는 주로 "input" 또는 "textarea"를 사용할 수 있으나, 크로스에디터는 작성된 콘텐츠의 내용을 소실 없이 전송할 수 있는 "textarea" 사용을 권장합니다.
또한 브라우저의 자바스크립트 기능이 비활성화 되어 있는 경우 또는 자바스크립트가 정상적으로 동작 하지 않는 환경에서 크로스에디터가 실행되지 않아 글을 작성할 수 없는 상황에서 정상적으로 글을 작성할 수 있도록 "textarea"를 함께 사용하는 것이 웹 접근성을 높여 주는 방법이며 W3C의 권고 사항입니다.
<textarea id="editorValue" name="editorValue" style="display: none"></textarea>
폼(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;
}
크로스에디터에서 작성된 콘텐츠의 내용을 가져오려면 "GetValue" 또는 "GetBodyValue" API를 사용합니다.
HTML, XHTML 형식으로 값을 가져올 수 있습니다.
document.getElementById("contents").value = CrossEditor.GetValue();
document.getElementById("contents").value = CrossEditor.GetValue("XHTML");
document.getElementById("contents").value = CrossEditor.GetBodyValue();
document.getElementById("contents").value = CrossEditor.GetBodyValue("XHTML");
콘텐츠 내용을 크로스에디터에 삽입할 경우에는 "SetValue"나 "SetBodyValue" API를 사용합니다.
단 크로스에디터에서 내용을 가져오는 Method와 삽입 Method는 서로 동일해야 합니다.
"GetValue"를 사용한 경우에는 "SetValue"를 사용하고, "GetBodyValue"를 사용한 경우에는 "SetBodyValue"를 사용해야 합니다.
또한 에디터를 초기화 후 바로 Method를 호출 시 환경에 따라 정상적으로 호출되지 않는 경우가 있습니다. 이러한 경우를 방지하기 위해 에디터 초기화 후 발생되는 "OnInitCompleted" 이벤트를 사용하여 Method를 실행하는 것을 권장합니다.
var contentValue = document.getElementById("contents").value; // Hidden 값 참조
var CrossEditor = new NamoSE('namoeditor1');
CrossEditor.EditorStart();
function OnInitCompleted(e){
e.editorTarget.SetValue(contentValue); // 컨텐츠 내용 에디터에 삽입
}
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”로 값을 가져오는 경우에도 체크하여 설정한 값을 제외시켜 줍니다.
크로스에디터가 최초 실행 시 비즈니스 로직으로 인해 일시적으로 화면에서 감추고 싶은 경우가 있습니다.
이러한 경우 크로스에디터의 높이가 계산되지 않아 크로스에디터를 화면에 출력했을 때 정상적으로 출력이 되지 않습니다.
페이지 호출 시 크로스에디터가 화면에 출력되지 않는 경우 크로스에디터에 포커스 설정이 필요없으므로 "SetFocus" API를 사용하여 포커스를 해제시켜 줍니다.
SetFocus : true -> 크로스에디터 포커스 설정
false -> 크로스에디터 포커스 해제
var CrossEditor = new NamoSE('namoeditor1');
CrossEditor.params.SetFocus = false; // 에디터 포커스 해제
CrossEditor.EditorStart();
크로스에디터를 최초 실행 시 화면에 출력되지 않는 경우 에디터의 출력 높이를 계산하기 위해 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>