네이버 스마트 에디터 간단 사용법!ㅇㅇㅇ

1. 스마트 에디터 소스 다운로드

위 주소에서 먼저 소스 부터 다운 받는다.

2. 프로젝트에 소스 적용

다운로드를 받고 압축을 풀면 dist라는 폴더가 있을것이다.

그안의 모든 파일들을 본인의 프로젝트의 적당한 곳에 붙여넣자.

저는 SmartEditor라는 폴더를 만들고 그안에 붙여 넣었습니다.

3. 본인의 프로젝트에서 적용하고자하는 writeForm.jsp에 아래 스크립트를 추가한다.

1
2
3
4
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
 
<script type="text/javascript" src="/dokky/resources/SmartEditor/js/service/HuskyEZCreator.js" charset="utf-8" ></script>
cs

여기서 HuskyEZCreator.js 가 있는 경로를 잘 잡아줘야 한다.

4. form태그 안에 textarea를 추가 해준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
<form role="form" action="/dokky/board/register" method="post">
      
    <input id="title" name='title'>        
 
    <textarea name="content" id="ir1" rows="20" cols="100"></textarea>
           
    <button type="submit"> 등록</button>
        
</form>

cs

5. editor 생성 자바스크립트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(document).ready(function(e){
/* 스마트 에디터 */
    var oEditors = [];
    
    nhn.husky.EZCreator.createInIFrame({  
     oAppRef: oEditors, // 전역변수 명과 동일해야 함
     elPlaceHolder: "ir1",// 에디터가 그려질 textarea ID 값과 동일 해야 함
     sSkinURI: "/dokky/resources/SmartEditor/SmartEditor2Skin.html",
     fCreator: "createSEditor2", // SE2BasicCreator.js 메소드명이니 변경 금지
     htParams : {
         bUseToolbar : true,        // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
         bUseVerticalResizer : true,// 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
         bUseModeChanger : true // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
       }
    });
    /* 스마트 에디터 */
  
  var formObj = $("form[role='form']");
  
  $("button[type='submit']").on("click", function(e){
    
    e.preventDefault();
    
    oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);// 스마트 에디터 - textarea에 값 옮겨주기
    
    formObj.submit();
    
  });
});

cs

24행을 보면 id가 ir1인 textarea에 값을 옮겨주고 있다.

즉 아래의 6번 그림 에디터 에서 글을 입력후 등록버튼을 누르면 에디터에 있던 데이터가

textarea쪽으로 옮겨지는것이다. 옮겨진후 서버로 데이터는 전송된다.

6. 적용 결과

7. 네이버 스마트 에디터2 사용자 가이드

http://naver.github.io/smarteditor2/user_guide/4_photouploader/structure.html

네이버에서 알려준 사용자 가이드이니 이것도 참고해보자

8. 적용된 예시 get.jsp( 아래는 그냥 참고만하세요)

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

pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<%@ taglib uri="http://www.springframework.org/security/tags" prefix="sec" %>

<%@ include file="../includes/left.jsp"%>

<!DOCTYPE html>

<html>

<head>

<title>Dokky 새 글쓰기</title>

<style>

@media screen and (max-width:500px){

.registerWrapper {

width: 80%;

display: inline-block;

margin-left: 15%;

margin-top: 1%;

min-height: 500px;

border-color: #e6e6e6;

border-style: solid;

background-color: #323639;

color: #e6e6e6;

display: inline-block;

}

@media screen and (min-width: 501px) and (max-width:1500px){

.registerWrapper {

width: 80%;

display: inline-block;

margin-left: 15%;

margin-top: 1%;

min-height: 500px;

border-color: #e6e6e6;

border-style: solid;

background-color: #323639;

color: #e6e6e6;

display: inline-block;

}

@media screen and (min-width: 1501px){

.registerWrapper {

width: 51%;

display: inline-block;

margin-left: 29%;

margin-top: 1%;

min-height: 500px;

border-color: #e6e6e6;

border-style: solid;

background-color: #323639;

color: #e6e6e6;

display: inline-block;

}

.uploadResult {

width: 100%;

background-color: gray;

}

.uploadResult ul {

display: flex;

flex-flow: row;

justify-content: center;

align-items: center;

}

.uploadResult ul li {

list-style: none;

padding: 10px;

}

.uploadResult ul li img {

width: 100px;

}

#title{

width: 70%;

height: 30px;

margin-bottom: 10px;

}

#selectId{

width: 70%;

height: 30px;

margin-bottom: 10px;

}

</style>

</head>

<style>

body{

background-color: #323639;

}

</style>

<body>

</div>

</div>

<ul>

</ul>

</div>

</div>

</div>

</div>

<div>

<option value=2>자유게시판</option>

<option value=3>묻고답하기</option>

</select>

</div>

</div>

</div>

</form>

</div>

function checkLength(obj, maxlength) {

var str = obj.value; // 이벤트가 일어난 컨트롤의 value 값

var str_length = str.length; // 전체길이 // 변수초기화

var max_length = maxlength; // 제한할 글자수 크기

var i = 0; // for문에 사용

var ko_byte = 0; // 한글일경우는 2 그밗에는 1을 더함

var li_len = 0; // substring하기 위해서 사용

var one_char = ""; // 한글자씩 검사한다

var reStr = ""; // 글자수를 초과하면 제한할수 글자전까지만 보여준다.

for (i = 0; i < str_length; i++) { // 한글자추출

one_char = str.charAt(i);

ko_byte++;

}

if (ko_byte <= max_length) {// 전체 크기가 max_length를 넘지않으면

li_len = i + 1;

}

if (ko_byte > max_length) {// 전체길이를 초과하면

alert(max_length + " 글자 이상 입력할 수 없습니다.");

reStr = str.substr(0, max_length);

obj.value = reStr;

}

obj.focus();

}

$(document).ready(function(e){

$("#selectId option[value='${category}']").attr('selected','selected');

/* 스마트 에디터 */

var oEditors = [];

nhn.husky.EZCreator.createInIFrame({

oAppRef: oEditors, // 전역변수 명과 동일해야 함

elPlaceHolder: "ir1",// 에디터가 그려질 textarea ID 값과 동일 해야 함

sSkinURI: "/dokky/resources/SmartEditor/SmartEditor2Skin.html",

fCreator: "createSEditor2", // SE2BasicCreator.js 메소드명이니 변경 금지

htParams : {

bUseToolbar : true, // 툴바 사용 여부 (true:사용/ false:사용하지 않음)

bUseVerticalResizer : true,// 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)

bUseModeChanger : true // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)

}

});

/* 스마트 에디터 */

var formObj = $("form[role='form']");

$("button[type='submit']").on("click", function(e){//글쓰기 등록

e.preventDefault();

var selectedValue = $("#selectId option:selected").val();

if(selectedValue == 0){

alert("게시판을 선택 해주세요.");

return false;

}

var title = $("#title").val();

title = $.trim(title);//공백제거

if(title == ""){

alert("제목을 입력하세요.");

return false;

}

oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);// 스마트 에디터 - textarea에 값 옮겨주기

var str = "";

$(".uploadResult ul li").each(function(i, obj){

var jobj = $(obj);

console.dir(jobj);

console.log("-------------------------");

console.log(jobj.data("filename"));

str += "<input type='hidden' name='attachList["+i+"].fileName' value='"+jobj.data("filename")+"'>";

str += "<input type='hidden' name='attachList["+i+"].uuid' value='"+jobj.data("uuid")+"'>";

str += "<input type='hidden' name='attachList["+i+"].uploadPath' value='"+jobj.data("path")+"'>";

str += "<input type='hidden' name='attachList["+i+"].fileType' value='"+ jobj.data("type")+"'>";

});

//console.log(str);

formObj.append(str).submit();

});

var regex = new RegExp("(.*?)\.(exe|sh|zip|alz)$");

var maxSize = 5242880; //5MB

function checkExtension(fileName, fileSize){

if(fileSize >= maxSize){

alert("파일 사이즈는 5MB를 초과할 수 없습니다.");

return false;

}

if(regex.test(fileName)){

alert("해당 종류의 파일은 업로드할 수 없습니다.");

return false;

}

return true;

}

var csrfHeaderName ="${_csrf.headerName}";

var csrfTokenValue="${_csrf.token}";

$("input[type='file']").change(function(e){

var formData = new FormData();

var inputFile = $("input[name='uploadFile']");

var files = inputFile[0].files;

//console.log(files);

for(var i = 0; i < files.length; i++){

if(!checkExtension(files[i].name, files[i].size) ){

return false;

}

formData.append("uploadFile", files[i]);

}

$.ajax({

url: '/dokky/uploadAjaxAction',

processData: false,

contentType: false,

beforeSend: function(xhr) {

xhr.setRequestHeader(csrfHeaderName, csrfTokenValue);

data: formData,

type: 'POST',

dataType:'json',

success: function(result){

//console.log(result);

showUploadResult(result); //업로드 결과 처리 함수

}

});//$.ajax

});

function showUploadResult(uploadResultArr){

if(!uploadResultArr || uploadResultArr.length == 0){

return;

}

var uploadUL = $(".uploadResult ul");

var str ="";

$(uploadResultArr).each(function(i, obj){

if(obj.image){//이미지라면

var fileCallPath = encodeURIComponent( obj.uploadPath+ "/s_"+obj.uuid +"_"+obj.fileName);

str += "<li data-path='"+obj.uploadPath+"'";

str +=" data-uuid='"+obj.uuid+"' data-filename='"+obj.fileName+"' data-type='"+obj.image+"'"

str +" ><div>";

str += "<span> "+ obj.fileName+"</span>";

str += "<button type='button' data-file=\'"+fileCallPath+"\' "

str += "data-type='image' class='btn btn-warning btn-circle'><i class='fa fa-times'></i></button><br>";

str += "<img src='/dokky/display?fileName="+fileCallPath+"'>";

str += "</div>";

str +"</li>";

}else{//일반파일이라면

var fileCallPath = encodeURIComponent( obj.uploadPath+"/"+ obj.uuid +"_"+obj.fileName);

//var fileLink = fileCallPath.replace(new RegExp(/\\/g),"/");

str += "<li "

str += "data-path='"+obj.uploadPath+"' data-uuid='"+obj.uuid+"' data-filename='"+obj.fileName+"' data-type='"+obj.image+"' ><div>";

str += "<span> "+ obj.fileName+"</span>";

str += "<button type='button' data-file=\'"+fileCallPath+"\' data-type='file' "

str += "class='btn btn-warning btn-circle'><i class='fa fa-times'></i></button><br>";

str += "<img src='/dokky/resources/img/attach.png'></a>";

str += "</div>";

str +"</li>";

}

});

uploadUL.append(str);

}

$(".uploadResult").on("click", "button", function(e){//업로드 삭제

//console.log("delete file");

var targetFile = $(this).data("file");

var type = $(this).data("type");

var targetLi = $(this).closest("li");

$.ajax({

url: '/dokky/deleteFile',

type: 'POST',

dataType:'text',

data: {

fileName: targetFile,

type: type

beforeSend: function(xhr) {

xhr.setRequestHeader(csrfHeaderName, csrfTokenValue);

success: function(result){

targetLi.remove();

}

}); //$.ajax

});

</script>

</body>

</html>

저작자표시 비영리

'기타 > 기타' 카테고리의 다른 글

ci cd 문제해결 (0)	2022.10.03
애자일 vs 폭포수 (0)	2020.05.24
이클립스에서 run history 삭제 방법 (0)	2019.09.30
동적 Dynamic SQL - <trim>,<where> (0)	2019.06.01

네이버 스마트 에디터 간단 사용법!

'기타 > 기타' 카테고리의 다른 글

'기타/기타' Related Articles

티스토리툴바