나모 크로스에디터 설치 도움말

폼 전송 구현하기

1. hidden 객체 생성하기

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

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

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

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를 사용하여 지정해야 합니다.

var CrossEditor = new NamoSE('namoeditor1');

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

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

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

CrossEditor.editorStart();

</script>

</div>

에디터 생성과 소멸 방법

크로스에디터를 동적으로 생성하고 소멸시키는 간단한 샘플입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
	<title>Namo CrossEditor</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="./js/namo_scripteditor.js"></script>
	<script type="text/javascript" language="javascript">
		var CrossEditor = null;
		function loadEvn(){
			CrossEditor = new NamoSE('namoeditor');
		}

		function OnInitCompleted(e){	
			e.editorTarget.SetBodyValue("<p>text</p>");						
		}
		
		function startEditor(){
			CrossEditor.params.Width = "100%";
			CrossEditor.params.ParentEditor = document.getElementById("editor1");
			CrossEditor.EditorStart();
		}
		
		function endEditor(){
			CrossEditor.destroyEditor();
			document.getElementById("editor1").innerHTML = "";
		}
	</script>
</head>
<body onload="loadEvn()">
	<div style="width:800px; height:500px;" id="editor1"></div>
	<input type="button" value="startEditor" onclick="startEditor()" />
	<input type="button" value="endEditor" onclick="endEditor()" />
</body>
</html>

전자문서 유통필터

전자문서 유통에 의한 문서관리 체계의 정착을 위해 각 기관에서 사용하고 있는 서로 다른 전자문서시스템 간의

안정적인 문서유통이 가능하도록 필요한 기능 및 관련 표준들을 정의하였습니다.

이에 따라, 크로스에디터에서는 정의된 규격으로 HTML을 필터링해주는 기능을 추가하였습니다.

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

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

3-1. GetFilterValue(): 작성한 내용을 전자문서 유통필터에서 허용하는 태그와 속성으로 정리하여 <html>부터 </html>까지 반환

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

3-3. GetFilterBodyValue(): 작성한 내용을 전자문서 유통필터에서 허용하는 태그와 속성으로 정리하여 <body> 태그 안의 내용만 반환

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

플러그인 모드

플러그인 모드는 exe설치 방식으로 자바스크립트에서 보안 또는 기능 제약상의 이유로 접근하지 못하는 클립보드 데이터에 직접 접근이 가능합니다.

사용자가 플러그인을 설치(사용)할 수 있는 브라우저 설정 및 자동설치 여부를 사이트 정책에 따라 관리자가 설정할 수 있습니다.

SupportBrowser : 사용자가 플러그인을 설치(사용)할 수 있는 브라우저를 설정합니다.

▶ 1 (기본값) : 모든 브라우저에서 실행

▶ 7~11 : 설정된 숫자의 브라우저 버전 이하, IE7이상의 브라우저에서 실행

AutoInstall : 플러그인 자동 설치 여부를 설정합니다.

▶ true : 크로스에디터가 플러그인 자동 설치

▶ false : 크로스에디터가 플러그인 자동 설치하지 않음, 관리자가 에디터 로딩 이전에 설치를 진행하는 경우 사용

var CrossEditor = new NamoSE(test);

CrossEditor.params.SupportBrowser = 1;

CrossEditor.params.AutoInstall = true;

CrossEditor.EditorStart();

플러그인 버전으로 설치/패치 시 아래의 라이브러리를 설치해야 합니다.

▶ ASP/ASP.NET : 웹루트에 bin폴더를 생성 후 System.Net.Json.dll 파일을 설치합니다.

▶ JSP : WAS서버의 라이브러리 폴더에 java-json.jar 파일을 설치합니다.

플러그인 설치 조건은 아래와 같습니다.

▶ 플러그인 설치는 Windows OS에서만 가능합니다.

▶ 플러그인 설치 과정에서 Microsoft Visual C++ 2015 Redistributable (x86)을 설치하여야 플러그인 버전을 사용할 수 있습니다.

▶ C:\Program Files (x86)\NamoEditor 에 설치됩니다. (uninstall.exe를 이용하여 삭제 가능합니다.)

▶ 작업관리자 - 프로세스 탭에 Namo HTTP Server, Namo Service 프로세스가 실행됩니다.