search

네이버 스마트 에디터 적용 안됨 - neibeo seumateu editeo jeog-yong andoem

1 년도s ~ 전에
코멘트: 0
견해: 22

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Pick a username Email AddressPassword

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

이클립스에서 새프로젝트생성후 index.jsp파일 하나만 생성해서 테스트하는중인데도 답이안보이네요...

<%@ page language='java' contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- Smart Editor -->
<script type="text/javascript" src="/SE2/js/service/HuskyEZCreator.js" charset="utf-8"></script>
 
 
<!-- Smart Editor -->

<body>
	<textarea style="width:100%;"rows="10" name="textAreaContent" id="textAreaContent" cols="80"></textarea>
<div></div>

</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
 
var oEditors = [];
nhn.husky.EZCreator.createInIFrame({
    oAppRef: oEditors,
    elPlaceHolder: "textAreaContent",
    sSkinURI: "/SE2/SmartEditor2Skin.html",
    fCreator: "createSEditor2"
});
 
</script>
</html>

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

네이버 스마트 에디터는 자바스크립트로 구현된 웹 기반의 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 안에 있는 것들을 본인이 만들고 있는 웹 프로젝트에 추가합니다.

네이버 스마트 에디터 적용 안됨 - neibeo seumateu editeo jeog-yong andoem
workspace
네이버 스마트 에디터 적용 안됨 - neibeo seumateu editeo jeog-yong andoem
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는 본인의 프로젝트 경로에 맞춰서 진행하시기 바랍니다.

네이버 스마트 에디터 적용 안됨 - neibeo seumateu editeo jeog-yong andoem
네이버 스마트 에디터 적용 후

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

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

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

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

본문

네이버 스마트 에디터 다운로드

네이버 스마트 에디터2는 깃허브에서 버전별로 배포를 하고있다.

필요한 버전을 다운받으면 된다.

필자는 2.8.2.3 버전을 다운받았다.

https://github.com/naver/smarteditor2/releases

Releases · naver/smarteditor2

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

github.com

네이버 스마트 에디터 적용 안됨 - neibeo seumateu editeo jeog-yong andoem
네이버 스마트 에디터 적용 안됨 - neibeo seumateu editeo jeog-yong andoem
Smart Editor v2.8.2.3

프로젝트폴더안에 붙여넣기

네이버 스마트 에디터 적용 안됨 - neibeo seumateu editeo jeog-yong andoem
[프로젝트 패키지 경로]

뒤에 버전은 제거하였다. 나중에 소스에 파일명을 적용할때 지저분해지는 것을 방지하기 위함이다.

textarea 및 js추가

<html>
    <!-- 내용 -->
    <textarea rows="20" name="form-control" id="form-control"></textarea>
</html>
<!-- SmartEditor2 텍스트편집기 -->
<script src="../smarteditor2/js/HuskyEZCreator.js" charset="utf-8"></script>
	<script>
	$(document).ready(function () {
			
		<!-- SmartEditor2 텍스트편집기 -->
		var oEditors = [];
		function smartEditorIFrame() {
			
			nhn.husky.EZCreator.createInIFrame({
				oAppRef : oEditors,
				elPlaceHolder : "form-control",
				sSkinURI : "../smarteditor2/SmartEditor2Skin.html",
				fCreator : "createSEditor2"
			});
	      }
		smartEditorIFrame();
	});
</script>

Smart Editor2를 적용할 textarea를 html에 추가해주고 위와같이 스크립트를 추가해준다.

sSkinURI는 각자 붙여넣기한 경로에 맞게 수정한다.

Version 텍스트 주석 : SmartEditor2Skin.html

before

네이버 스마트 에디터 적용 안됨 - neibeo seumateu editeo jeog-yong andoem
Smart Editor2 버전 주석 전

after

네이버 스마트 에디터 적용 안됨 - neibeo seumateu editeo jeog-yong andoem
Smart Editor2 버전 주석 후

Smart Editor2 이미지 업로드

[Spring Boot/Smart Editor2] - Smart Editor2 이미지 업로드[JAVA]

Smart Editor2 이미지 업로드[JAVA]

Smart Editor2 적용은 아래 링크를 확인 바란다. [Spring Boot/Smart Editor2] - Smart Editor 적용 atthch_photh.js의 html5Upload() 함수 수정 /** * HTML5 DragAndDrop으로 사진을 추가하고, 확인버튼을 누른..

fvor001.tistory.com

네이버 스마트 에디터 적용 안됨 - neibeo seumateu editeo jeog-yong andoem

스마트에디터 readonly 네이버 스마트에디터 사용법 스마트에디터 disabled 스마트에디터 3.0 오픈소스 네이버 스마트에디터 api 스마트에디터 one 오픈소스 Vue smart editor

관련 게시물

광고하는

최근 소식

디젤 엔진오일 감소 - dijel enjin-oil gamso
1 년도s ~ 전에 . ~에 의해 AssociateCanonization
마비노기 밀 인형 - mabinogi mil inhyeong
1 년도s ~ 전에 . ~에 의해 NeedyInterpretation
을 보니 grammar - eul boni grammar
1 년도s ~ 전에 . ~에 의해 DauntingFastball
젤다 드래곤 안나옴 - jelda deulaegon annaom
1 년도s ~ 전에 . ~에 의해 HillyBones
전자담배 간접흡연 디시 - jeonjadambae ganjeobheub-yeon disi
1 년도s ~ 전에 . ~에 의해 CoolingGenesis
파이썬 입력값이 정수가 아니면 에러 출력하고 다시 입력받기 - paisseon iblyeoggabs-i jeongsuga animyeon eleo chullyeoghago dasi iblyeogbadgi
1 년도s ~ 전에 . ~에 의해 IdioticQuorum
독수리 오형제 결말 - dogsuli ohyeongje gyeolmal
1 년도s ~ 전에 . ~에 의해 CorrectWardrobe
타이어 공기압 보는 법 - taieo gong-giab boneun beob
1 년도s ~ 전에 . ~에 의해 UnknownEndangerment
정화조 20 인용 - jeonghwajo 20 in-yong
1 년도s ~ 전에 . ~에 의해 AmazingLaurels
교육청 태블릿 초기화 - gyoyugcheong taebeullis chogihwa
1 년도s ~ 전에 . ~에 의해 MockCombustion

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의

homeendejahikoptzhth
저작권 © 2024 ko.ketajaman Inc.