네이버 스마트 에디터 적용하기

이번 포스팅에서는 네이버 스마트 에디터를 적용해보도록 하겠습니다.

네이버 스마트 에디터는 자바스크립트로 구현된 웹 기반의 WYSIWYG 에디터입니다. 현재 스마트 에디터는 3.0 버전까지 나와있지만 3.0은 대외 공개하고 있지 않다고 합니다.

그래서 저는 스마트 에디터 2를 적용해보도록 하겠습니다.

---

스마트 에디터 다운로드

https://github.com/naver/smarteditor2

naver/smarteditor2

공개된 스마트 에디터 깃허브 주소입니다.

가셔서 다운로드 받으신 후 workspace 안에 있는 것들을 본인이 만들고 있는 웹 프로젝트에 추가합니다.

workspace

 

web project 추가

 

여기까지 하셨다면 네이버 스마트 에디터를 붙일 페이지의 상단에 아래와 같은 코드를 추가합니다.

<!-- 페이지 상단 또는 하단에 라이브러르 추가 -->
<script type="text/javascript" src="/plugin/smarteditor2/js/service/HuskyEZCreator.js" charset="utf-8"></script>

...

<!-- 표시할 textarea 영역 -->
<textarea id="txtContent" rows="10" cols="100" style="width: 100%;"></textarea>

...

<!-- 페이지 로딩시 초기화 -->
<script>
$(() => {
	nhn.husky.EZCreator.createInIFrame({
		oAppRef: editor,
		elPlaceHolder: 'txtContent',
		sSkinURI: '/plugin/smarteditor2/SmartEditor2Skin.html',
		fCreator: 'createSEditor2'
	});
});
</script>

이 때 src는 본인의 프로젝트 경로에 맞춰서 진행하시기 바랍니다.

네이버 스마트 에디터 적용 후

위의 그림처럼 나오셨다면 성공입니다. 그런데 네이버 스마트 에디터 상단에 Version: 2.9.1.5caeebb 가 보이십니까?

저 부분도 안보이게 처리해보도록 하겠습니다. 네이버 스마트 에디터 소스가 있는 root 폴더에 보시면 SmartEditor2Skin.html 이라는 파일이 있습니다. 해당 파일을 open하신 다음 화면에 보이는 Version: 2.9.1.5caeebb로 검색을 하시면 아래와 같은 부분이 나옵니다.

<span id="rev">Version: 2.9.1.5caeebb </span>

이 부분을 삭제하고 네이버 스마트 에디터가 적용된 페이지를 새로고침 하시면 해당 부분이 사라진 것을 확인하실 수 있습니다.