네이버 스마트 에디터 react - neibeo seumateu editeo react

Question

앱 접근 권한 안내

온오프믹스 앱에서 서비스 이용에 다음 접근 권한들을 사용하고 있습니다.

목차 Show

앱 접근 권한 안내
SmartEditor2
Supported Browsers
Third-party libraries

필수적 접근 권한

주소록

기기에서 계정을 검색하기 위해 접근 권한이 필요합니다. (Android OS 4.4이하일 경우에만 해당)

선택적 접근 권한

카메라개설한 모임의 QR코드 스캔을 통한 출석 확인 및 프로필 사진 촬영을 위해 접근 권한이 필요합니다.사진프로필 사진 변경을 위한 사진 첨부 시 접근 권한이 필요합니다.저장소문의내역 내 첨부파일 다운로드를 위해 접근 권한이 필요합니다.

접근 권한 변경

휴대폰 설정 > 애플리케이션 > 온오프믹스에서 설정 변경이 가능합니다.

확인

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

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

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

스마트 에디터 다운로드

https://github.com/naver/smarteditor2

naver/smarteditor2

Javascript WYSIWYG HTML editor. Contribute to naver/smarteditor2 development by creating an account on GitHub.

github.com

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

가셔서 다운로드 받으신 후 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>

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

SmartEditor2

Overview

SmartEditor™ 는 JavaScript로 구현된 웹 기반의 WYSIWYG 편집기입니다.

WYSIWYG 모드 및 HTML 편집 모드와 TEXT 모드를 제공하고, 자유로운 폰트 크기 설정 기능, 줄 간격 설정 기능, 단어 찾기/바꾸기 기능 등 편집에 필요한 다양한 기능을 제공하므로 사용자들은 SmartEditor™를 사용하여 쉽고 편리하게 원하는 형태의 글을 작성할 수 있습니다.

또한, SmartEditor™의 구조는 기능을 쉽게 추가할 수 있는 플러그인 구조로 되어 있어 정해진 규칙에 따라 플러그인을 만들기만 하면 됩니다.

User Guide

사용자 가이드에서는 SmartEditor2 의 특징과 기능을 소개합니다.

또한, 설치 방법과 기능의 추가/삭제 방법도 알 수 있습니다.

사용자 가이드

Demo

아래 데모페이지 에서는 SmartEditor2.0 이 제공하는 다양한 기능을 바로 체험해 볼 수 있습니다.

SmartEditor2 Demo 바로가기

Supported Browsers

Internet Explorer 8.x 이상
Firefox 3.5 이상
Chrome 4.0 이상
Safari 4.0 이상

License

SmartEditor2 is released under the LGPL v2.1.
LGPL v2.1 (한국어)

Third-party libraries

The following third-party libraries are used :

Jindo - https://github.com/naver/jindojs-jindo
: for DOM/Event Handling, OOP style code
Jindo Component - https://github.com/naver/jindojs-jc
: for UI Control (DragArea, LayerManager, LazyLoading)