asp.net 스마트 에디터 연동하기

웹에디터인 네이버API에 등록된 SmartEditor를 asp.net 에서 사용해봅시다.


1. SmartEditor 다운로드
http://dev.naver.com/projects/smarteditor

2. 홈디렉터리 하위에 원하는 위치에 압축풀어놓습니다. (저는 /se 폴더)

3. Jindo 자바스크립트 프레임워크가 아마 필요할겁니다.
http://dev.naver.com/projects/jindo/download 여기서

jindo.all.js
jindo.all.ns.js
jindo.min.js
jindo.min.ns.js

이 4개 파일을 받습니다. 그리고 /se/js 폴더에 넣습니다.

4. 폼 넣기

주로 게시판에 사용되기 때문에, 기존에 글쓰기 페이지에서

1) 에디터 폼 넣기

  <textarea
   id="ir1"
   name="ir1"
   style="width:680px; height:500px"
   runat="server"
    />

(HTML 서버폼)

(id는 ir1입니다.)

<script language="javascript">
var oEditors = [];
nhn.husky.EZCreator.createInIFrame({
 oAppRef: oEditors,
 elPlaceHolder: "<%# ir1.ClientID %>",
 sSkinURI: "se/SEditorSkin.html",
 fCreator: "createSEditorInIFrame"
});
</script>

위의 자바스크립트 코드를 하단에 적당하게 넣습니다.
<%# %> 구문이 있으므로 Page.DataBind() 를 적용합시다.


2) 적용하기

서버컨트롤로 Hidden 필드를 하나 추가합니다.

<form runat="server">
<input type="hidden" id="hdnContent" runat="server" />
..

입력체크 자바스크립트는 다음처럼 처리해줍니다. textarea 태그의 ir1 컨트롤 바로 사용하지 못하더군요.(내부적으로 iframe을 사용하기 때문에) 그래서 서버컨트롤로 등록된 hidden 필드로 값을 넣어줍니다. 후에 서버코드로 hidden 필드의 Value 로 내용을 읽어오면 됩니다.

 function writeProc()
 {

  var title = document.getElementById("txtTitle");
  var content = document.getElementById("hdnContent");
  content.value = oEditors.getById["ir1"].getIR();

  if (title.value.trim() == "")
  {
   alert("제목을 입력해주세요.");
   title.focus();
   return;
  }

  if (content.value.trim() == "")
  {
   alert("내용을 입력해주세요.");
   return;
  }

} // writeProc();

(주황색이 에디터폼 부분)

3) 코드파일(aspx.cs 또는 클릭이벤트 메서드 등)에서는 hidden 필드의 서버값을 씁니다.

hdnContent.Value

5. 태그문이 전송되므로, ValidateRequest="false" 확인하라는 오류는 발생하겠죠?



여기까지입니다.
( 예제는 http://pfanclub.com 사이트에 적용하여 쓰고 있습니다 )