'javascript' 태그의 글 목록

datepicker는 급하게 기능을 구현해야 하거나 예쁜 디자인이 필요 없이 간단하게 달력창을 만들어서 사용할 때 적용하기 편합니다.

datepicker에 대해 가장 기본적인 설정부터 조금씩 살을 붙여 나가면서 사용 방법에 대해 알아봅니다.

1. 기본 기능 설정

우선 datepicker를 사용하기 위해서는 아래와 같은 jquery가 필요합니다.

그리고 HTML 태그를 이용하여 날짜를 입력 받기 위한 text input을 하나 만들어 줍니다.

<body>

</body>

그리고 javascript에서 input 입력과 datepicker을 기본적 값으로 설정하고 서로 연결 시켜주면 바로 달력창을 사용할 수 있습니다.

$(document).ready(function () {

$.datepicker.setDefaults();

$("#start_dt").datepicker();

});

</script>

웹 브라우저에서 실행하고 input 박스를 클릭하면 아래와 같은 가장 기본적인 달력창을 확인할 수 있고 날짜를 선택해서 input 창에 값을 입력 받습니다.

가장 기본적인 설정으로는 [월/일/년]의 형식으로 날짜가 입력됩니다.

03/21/2024

우리는 이렇게 사용하지 않으니 수정하려면 날짜 형식을 설정하는 값을 하나 추가합니다.

$.datepicker.setDefaults({

dateFormat: 'yy-mm-dd',

});

다시 실행해서 확인해 봅니다.

날짜가 설정한 형식으로 잘 입력이 되었습니다.

$.datepicker.setDefaults() 로 정의된 함수에 추가하는 설정 값은 공통으로 적용되는 설정입니다.

하나의 페이지에 여러 개의 달력 창을 만들어 사용하는 경우 모든 달력창에 동일한 설정 값이 적용됩니다.

만약 하나의 페이지에 여러 개의 달력창을 사용하는데 각각 또는 일부 달력창에는 다른 형태의 설정 값을 적용해서 사용하고 싶은 경우에는 배열 변수를 필요한 만큼 생성해서 서로 다른 설정을 정의한 후 필요한 달력 창에 적용해주면 됩니다.

예를 들어 var datepicker_set1 변수를 하나 생성하고 새로운 달력창(end_dt)을 추가한 후 설정을 반영해보도록 하겠습니다. 날짜 구분을 사선으로 구분하는 설정입니다.

var datepicker_set1 = {

dateFormat: 'yy/mm/dd',

}

$("#end_dt").datepicker(datepicker_set1);

input 박스를 클릭해서 날짜를 입력 받으면 바로 확인 가능합니다.

이런 식으로 처음 작업해본 start_dt와는 다른 결과 값을 얻기 위해 별도의 설정 값 적용하는 것이 가능 합니다.

물론 변수를 생성해서 사용하는 것이 혼란스럽다면 아래처럼 값을 직접 입력해도 됩니다.

$("#end_dt").datepicker({dateFormat : ‘yy/mm/dd’});

2. 한글 사용

이번에는 datepicker 달력창에 한글을 사용하는 방법입니다.

한글 추가라고 해서 특별한 건 없고 지금까지 작업한 소스에 아래 설정을 추가해서 월과 요일을 한글로 변경할 수 있습니다.

monthNames: ['1월(JAN)','2월(FEB)','3월(MAR)','4월(APR)','5월(MAY)','6월(JUN)',

'7월(JUL)','8월(AUG)','9월(SEP)','10월(OCT)','11월(NOV)','12월(DEC)'],

dayNamesMin: ['일','월','화','수','목','금','토'],

브라우저에서 어떻게 나오나 확인해 보겠습니다.

입력한 값이 그대로 노출되기 때문에 수정이 필요하면 바로 고치면 됩니다.

이번에는 년과 월을 선택하는 방법을 변경하는 설정을 추가해 보겠습니다.

지금까지는 좌우측 끝부분에 있는 버튼을 이용해서 월을 이동하는 방식이었는데 셀렉트 박스로 년과 월을 변경하는 방법입니다.

아래에 있는 설정을 추가합니다. 물론 전체 또는 필요한 달력창만 설정이 반영하도록 할 수 있습니다.

changeXX라는 설정은 년월을 변경하겠다는 것이고 추가로 월의 값을 한글로 수정할 수 있도록 한글 월을 적어주도록 합니다.

changeMonth: true,

changeYear: true,

monthNamesShort: ['1월','2월','3월','4월','5월','6월',

'7월','8월','9월','10월','11월','12월'],

monthNamesShort은 셀렉트 박스에서 보여주는 월 명칭입니다. 생략하면 기본값으로 영문이 나오게 됩니다. 값은 입력한 한글이 그대로 노출되니 필요에 따라 수정하면 됩니다.

년 또는 월을 선택하기위해 방형버튼을 여러 번 누르지 않고도 바로 선택을 할 수 있습니다.

3. 버튼 추가

달력창을 보다 유용하게 사용하고 커스터마이징을 하는 방법으로 하단에 버튼을 추가해서 작업을 할 수 있습니다.

showButtonPanel: true,

currentText: "이번달",

closeText: '닫기',

이 설정은 달력창 아래에 버튼을 추가하도록 하며 버튼의 기본 값은 영문으로 current와 close로 나오는데 이를 한글로 변경해서 볼 수 있습니다.

[이번달] 버튼은 다른 년 월을 선택했다가 다시 현재의 날짜로 돌아오려는 경우 사용하는 버튼입니다.

[닫기] 버튼은 그냥 달력창을 닫기만 하는 용도인데 내부적으로 함수를 가지고 있습니다. 만약 다른 기능을 추가하려면 아래와 같이 함수에 기능을 추가 해서 사용이 가능 합니다.

여기서는 선택한 값을 alert으로 나오도록 하는 단순 작업인데 필요에 따라 복잡하게 하면 되겠죠.

onClose: function(dateText, inst ) {

alert(dateText);

}

[닫기] 버튼을 클릭해 볼까요?

좀더 많은 내장된 함수와 기능들은 홈페이지를 방문하면 찾아볼 수 있습니다.

https://jqueryui.com/datepicker/

소스도 공개되어 있고 API documentation에 가면 다양한 기능 목록을 확인할 수 있습니다.

지금까지 작업한 전체 소스

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

var startDate = "";

var endDate ="";

$(document).ready(function () {

$.datepicker.setDefaults({

dateFormat: 'yy-mm-dd',

monthNames: ['1월(JAN)','2월(FEB)','3월(MAR)','4월(APR)','5월(MAY)','6월(JUN)',

'7월(JUL)','8월(AUG)','9월(SEP)','10월(OCT)','11월(NOV)','12월(DEC)'],

dayNamesMin: ['일','월','화','수','목','금','토'],

});

$("#start_dt").datepicker();

var datepicker_set1 = {

changeMonth: true,

changeYear: true,

monthNamesShort: ['1월','2월','3월','4월','5월','6월',

'7월','8월','9월','10월','11월','12월'],

showButtonPanel: true,

currentText: "이번달",

closeText: '닫기',

}

$("#end_dt").datepicker(datepicker_set1);

});

</script>

</head>

<body>

</body>

</html>

- copy coding -

저작자표시 비영리 변경금지 (새창열림)

'Java' 카테고리의 다른 글

java.util.zip.ZipEntry 이용하여 압축 파일 생성하기 (0)	2024.05.30
Java JDBC Batch 프로그램 sample (0)	2024.03.04
HTML form tag 값 설정하기 정리 (0)	2024.01.28
HTML form tag에서 value text 가져오기 정리 (0)	2024.01.17
[Java] stream과 filter 이용 List, Map 에서 필요 데이터 추출 (0)	2022.10.01

이번 프로젝트는 화면을 JSP로 구현하는 사이트에서 일을 하게 되었습니다. form:form tag도 있지만 예전 방식을 사용하는 곳이라 값을 가져오는 방법에 대해서 정리를 해보았습니다. tag들이 여러 개지만 가장 많이 사용하는 것을 기존으로 정리해봅니다.

value 또는 text를 가져오는 방법과 id, class, name으로 가져오는 방법을 정리했습니다.

설명은 필요 없을 듯 하여 그냥 소스와 결과만 기록 합니다.

예제로 사용한 form 태그의 모습입니다.

1. input tag

- input 사용 방법

- input value 가져오기

//id 로 값 가져오기

var inputId = $('#input_id').val();

//class 로 값 가져오기

var inputClass = $('.input_class').val();

//name으로 값 가져오기

var inputName = $('input[name=input_name]').val();

- input 결과

input val : ss12/ss12/ss12

2. textarea

- textarea 사용 방법

- textarea value 가져오기

//id 로 값 가져오기

var textareaId = $('#textarea_id').val();

//class 로 값 가져오기

var textareaClass = $('.textarea_class').val();

//name으로 값 가져오기

var textareaName = $('textarea[name=textarea_name]').val();

- textarea 결과

textarea val : text0

area0/text0

area0

3. select

- select 사용 방법

<option value="s1">select1</option>

<option value="s2">select2</option>

<option value="s3">select3</option>

</select>

- select value 가져오기

//id 로 값 가져오기

var selectId = $('#sel_id').val();

//class 로 값 가져오기

var selectClass = $('.sel_class').val();

//name으로 값 가져오기

var selectName = $("select[name='sel_name']").val();

- select text 가져오기

//id 로 값 가져오기

var selIdTxt = $("#sel_id option:selected").text();

//class 로 값 가져오기

var selTxt = $(".sel_class option:selected").text();

//name으로 값 가져오기

var selNameTxt = $("select[name='sel_name'] option:selected").text();

Select value : s2/s2/s2

Select text : select2/select2/select2

4. radio

- radio 사용 방법

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio1"> radiooo

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio2"> radiiii

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio3"> raddddd

- radio value 가져오기

//id 로 값 가져오기

var radioId = $("#ra_id:checked").val();

//class 로 값 가져오기

var radioClass = $('.ra_class:checked').val();

//name으로 값 가져오기

var radioName = $("input[name='ra_name']:checked").val()

- radio 결과

Radio value : radio2/radio2/radio2

5. checkbox

- checkbox 사용 방법

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk01">Check01

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk02">Check02

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk03">Check03

- checkbox value 가져오기

두가지 방법

var value_Store = [];

$.each($("input[name='chk_name']:checked"), function() {

value_Store.push($(this).val());

});

console.log("Checkbox value : " + value_Store.join(", "));

value_list = []

$("input[name='chk_name']:checked").each(function(){

var checked_value = $(this).val();

value_list.push(checked_value)

});

- checkbox 결과

Checkbox value : chk01, chk03

Checkbox value : chk01,chk03

web 화면과 console 결과화면 입니다.

전체 소스

<head>

<title>form value</title>

</head>

<body>

<table>

<tr>

<td>Input </td>

</tr>

<tr>

<td>Textarea </td>

</tr>

<tr>

<td>Select</td>

<td>

<option value="s1">select1</option>

<option value="s2">select2</option>

<option value="s3">select3</option>

</select>

</td>

</tr>

<tr>

<td>Radio</td>

<td>

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio1"> radiooo

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio2"> radiiii

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio3"> raddddd

</td>

</tr>

<tr>

<td>Checkbox</td>

<td>

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk01">Check01

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk02">Check02

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk03">Check03

</td>

</tr>

<tr>

</tr>

<tr>

<td><button onclick="btnClick();"> button </button></td>

</tr>

function btnClick() {

//id 로 값 가져오기

var inputId = $('#input_id').val();

//class 로 값 가져오기

var inputClass = $('.input_class').val();

//name으로 값 가져오기

var inputName = $('input[name=input_name]').val();

console.log("input val : " + inputId +"/"+ inputClass +"/"+ inputName);

//id 로 값 가져오기

var textareaId = $('#textarea_id').val();

//class 로 값 가져오기

var textareaClass = $('.textarea_class').val();

//name으로 값 가져오기

var textareaName = $('textarea[name=textarea_name]').val();

console.log("textarea val : " + textareaId +"/"+ textareaClass +"/"+ textareaName);

//id 로 값 가져오기

var selectId = $('#sel_id').val();

//class 로 값 가져오기

var selectClass = $('.sel_class').val();

//name으로 값 가져오기

var selectName = $("select[name='sel_name']").val();

console.log("Select value : " + selectId +"/"+ selectClass +"/"+ selectName);

//text값 가져오기

//id 로 값 가져오기

var selIdTxt = $("#sel_id option:selected").text();

//class 로 값 가져오기

var selTxt = $(".sel_class option:selected").text();

//name으로 값 가져오기

var selNameTxt = $("select[name='sel_name'] option:selected").text();

console.log("Select text : " + selTxt +"/"+ selIdTxt +"/"+ selNameTxt);

//id 로 값 가져오기

var radioId = $("#ra_id:checked").val();

//class 로 값 가져오기

var radioClass = $('.ra_class:checked').val();

//name으로 값 가져오기

var radioName = $("input[name='ra_name']:checked").val()

console.log("Radio value : " + radioId +"/"+ radioClass +"/"+ radioName);

// checkbox

var value_Store = [];

$.each($("input[name='chk_name']:checked"), function() {

value_Store.push($(this).val());

});

console.log("Checkbox value : " + value_Store.join(", "));

value_list = []

$("input[name='chk_name']:checked").each(function(){

var checked_value = $(this).val();

value_list.push(checked_value)

});

console.log("Checkbox value : " + value_list);

}

</script>

</body>

</html>

- copy coding -

저작자표시 비영리 변경금지 (새창열림)

'Java' 카테고리의 다른 글

Java JDBC Batch 프로그램 sample (0)	2024.03.04
HTML form tag 값 설정하기 정리 (0)	2024.01.28
[Java] stream과 filter 이용 List, Map 에서 필요 데이터 추출 (0)	2022.10.01
java 폴더와 파일 목록 출력 (2)	2022.08.29
삼항 연산자, 조건 연산자, 물음표(?) 조건문 정리 (0)	2022.04.27

jquery validation 라이브러리를 사용하여 form에 입력하는 값에 대한 유효성을 검사할 수 있습니다. 사용방법도 매우 간단하여 rules과 messages만 설정해 주면 쉽게 적용이 가능 합니다

maven을 이용하지 않거나 추가적인 정보는 제작 사이트에 방문해서 자료를 찾을 수 있습니다.

https://jqueryvalidation.org/

pom.xml에 다음을 추가 합니다.

<groupId>org.webjars</groupId>

<artifactId>jquery-validation</artifactId>

</dependency>

추가한 라이브러리는 Maven > Update Project를 해서 반영해 줍니다.

jQuery Validation

jQuery Validation의 구조는 매우 간단 합니다.

$("form selector").validate({

rules : { ... },

messages : { ... }

});

이렇게 rules, messages로 구성이 되어 있습니다.

rules를 이용하는 방법은 input 항목의 name 속성 값을 이용하여 설정을 진행하며

- 설정하려는 값이 하나이면

name속성 값 : "required"

- 설정하려는 값이 두개 이상 이면

name속성 값 : {

required : true,

digits : true

}

이렇게 {}로 묶어서 설정 합니다.

messages를 이용하는 방법도 input 항목의 name 속성 값을 이용하여 설정을 진행하며

- 설정하려는 값이 하나이면

name속성 값 : : "필수 입력 항목 입니다."

- 설정하려는 값이 두개 이상 이면

name속성 값 : {

required : "필수 입력 항목 입니다.",

digits : "숫자만 입력하세요."

}

이렇게 {}로 묶어서 설정 합니다.

이렇게 rules, messages가 쌍으로 구성되어 있습니다. 물론 messages를 작성하지 않아도 되는데 단점은 유효성 검사 결과를 영문으로 보여주기 때문에 영문으로 하지 않으려면 한글로 messages를 입력 해줘야 합니다.

적용 예)

$("form selector").validate({

rules : {

name속성 값 : "required",

name속성 값 : {

required : true,

digits : true

}

},

messages : {

name속성 값 : "필수 입력 항목 입니다.",

name속성 값 : {

required : "필수 입력 항목 입니다.",

digits : "숫자만 입력하세요."

}

});

이제 실제 적용을 하려는 화면 쪽 설정을 알아 봅니다.

먼저 maven에 추가한 라이브러리를 추가해 주고

form에 대한 유효성 설정을 진행 합니다.

//<![CDATA[

$(function() {

$("#memberadd").validate({

rules : {

username : "required",

name : "required",

password : "required",

repassword : "required",

mobile1 : {required : true, digits:true},

mobile2 : {required : true, digits:true},

mobile3 : {required : true, digits:true},

tel1 : {digits:true},

tel2 : {digits:true},

tel3 : {digits:true},

email : {email:true}

},

messages : {

username : "아이디는 필수 입력항목 입니다.",

name : "이름은 필수 입력항목 입니다.",

password : "비밀번호는 필수 입력항목 입니다.",

repassword : "비밀번호 확인은 필수 입력항목 입니다.",

mobile1 : "핸드폰은 필수 입력항목 입니다.",

mobile2 : "핸드폰은 필수 입력항목 입니다.",

mobile3 : "핸드폰은 필수 입력항목 입니다.",

email : "email 형식이 부정확 합니다."

}

});

//]]>

</script>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>

<input type="text" class="form-control col-md-2" id="mobile1" name="mobile1" size="3">-

<input type="text" class="form-control col-md-2" id="mobile2" name="mobile2" size="4">-

</td>

</tr>

<tr>

<td align="right">email </td>

</tr>

<tr>

</tr>

</table>

</form>

</body>

Controller는 화면을 불러오도록 메소드를 하나 만들어 주고

@RequestMapping("/membercreate")

public String getMember( Model model){

return "/user/MemberCreate";

}

프로젝트를 실행을 해서 페이지를 불러옵니다.

jQuery Validation

이제 등록 버튼을 클릭해서 무슨 일이 벌어지는지 확인해 봅니다.

jQuery Validation

이렇게 입력 항목에 대한 검사를 해줍니다.

개인적인 생각은 그냥 사용 하기에는 쓸만 하겠지만 요청사항이 까다로운 사이트에서는 사용이 힘들지 않을까 생각 됩니다.

- copy coding -

저작자표시 비영리 변경금지 (새창열림)

'Java' 카테고리의 다른 글

Spring Boot Scheduler @Scheduled 이용한 Batch 작업 (0)	2020.05.02
[OAuth2] Unsupported grant type: password (0)	2020.04.17
JAVA substring split 특수문자 문자열 자르기 (0)	2020.03.15
Spring Security Login 화면 만들기 (4)	2020.02.24
Spring Security @PreAuthorize @Secured 사용법 (5)	2020.02.12

간단하게 사용할 수 있는 web editor를 하나 추가할 일이 있어서 naver에서 만들었으니 믿을만 하겠지 하고 설치를 하기로 하였습니다. 그런데 그냥 설치 하는 방법은 매뉴얼만 보면서 하면 되는데 요즘에는 화면 그리는 툴들을 많이 사용하고 있어서 javascript function 안에서 구현을 해야 하는 상황이 발생하여 다음에 또 써야할 일이 발생하면 사용하려고 작성 합니다. 예전에 HTML Tag만 가지고 구현하느라 1주일 걸린적이 있는데 그 소스는 어디 갔는지 모르겠네요.

순서

1. Source 다운로드

2. 일반적인 설치 방법

3. javascript 내에서 설치 방법

1. Source 다운로드

기존에 사용하던 개발자 url에서는 다운로드가 되지 않고 github에서 다운로드를 해야 합니다.

https://github.com/naver/smarteditor2

그리고 smartEditor 3.x 버전은 공개를 하지 않는다고 하네요. 저는 2.x 버전 만으로도 충분.

naver_smarteditor2

Clone or download를 클릭해서 확장된 메뉴 중 Download ZIP을 선택하면 압축된 형태로 다운로드가 진행 됩니다. 다운로드가 완료 되면 파일이 있는 디렉토리로 이동하여 압축풀기를 해줍니다. 디렉토리 구조를 보면 dist와 workspace 두개가 있는데 이중에 dist를 이용하여 작업을 진행 합니다.

naver_smarteditor2

2. 일반적인 설치 방법

그냥 html, jsp, php등에 설치 하는 방법은 네이버 매뉴얼에 잘 설명이 되어 있습니다.

http://naver.github.io/smarteditor2/user_guide/

간단하게 요약해서 설명 하면

2.1 압축을 푼 파일을 적당한 곳에 복사

dist 아래에 있는 파일들을 웹 서버에 복사를 하는데 웹에서 path를 잡을 수 있는 곳이면 아무 곳이나 가능하지만 너무 깊이 숨겨 놓으면 안되겠죠.

2.2 js 추가

smartEditor의 기본이 되는 javascript 파일을 작업하려는 파일 상단에 추가 합니다.

2.3 Textarea 추가

웹 에디터를 사용할 textarea를 작업 파일에 추가 합니다. id는 나중에 사용해야 하므로 적당한 명칭을 부여 합니다.

2.4 editor 생성 javascript

2.3에서 생성한 textarea에 웹 에디터를 추가하기 위한 javascript를 작성 합니다. 매뉴얼에서 복사해서 사용하면 됩니다.

elPlaceHolder에 위에서 작성한 id를 입력 합니다.

sSkinURI에는 복사한 path를 잘 맞추어 기입합니다.

var oEditors = [];

nhn.husky.EZCreator.createInIFrame({

oAppRef: oEditors,

elPlaceHolder: "weditor",

sSkinURI: "경로/SmartEditor2Skin.html",

fCreator: "createSEditor2"

});

</script>

2.5 결과

naver_smarteditor2

2.6 전체 소스

좀 허접하지만 2.5에 있는 모양을 만들기 위해 제가 만든 test.html 전체 소스입니다.

webeditor

var oEditors = [];

nhn.husky.EZCreator.createInIFrame({

oAppRef: oEditors,

elPlaceHolder: "weditor",

sSkinURI: "./dist/SmartEditor2Skin.html",

fCreator: "createSEditor2"

});

</script>

좀 허접이 아니고 진짜 허접하네요. dist에 있는 파일을 바로 메인에 복사해서 사용했습니다.

3. javascript 내에서 설치 방법

일반적인 방법으로 설치를 해보았다면 이것도 별거 없습니다. 그냥 function 안에서 구현을 한것 이외에는 나머지 스크립트는 동일 합니다.

3.1 구현 방법

$.getScript() jQuery를 이용하여 javascript 내에서 javascript를 불러옵니다. 그리고 불러온 js를 이용한 코드를 내부에 기입하면 됩니다.

textarea와 button을 화면에 표시되고 HTML Tag를 적용시킬 수 있는 부분에 설정을 해줍니다. 툴에 따라 component, element, division등등이 될 수 있겠죠. 버튼도 이벤트를 직접 호출 할 수 없는 경우에는 가상으로 만들어서 사용하면 됩니다.

textarea를 먼저 정의하지 않으면 id를 찾을 수 없어 Cannot read property 'parentNode' of null / HuskyEZCreator.js 오류가 발생 할 수 있습니다.

naver_smarteditor2

3.2 전체 소스

화면 초기화가 완료되는 함수에 넣어서 구현한 내용입니다.

function onLoadedFunction()

{

this.eleTxt.setHtml(‘<textarea name="ir1" id="ir1" rows="10" cols="100"></textarea>’);

this.eleBtn.setHtml(‘<button class=”saveBtn”>저장</button>’);

$.getScript("./dist/js/service/HuskyEZCreator.js", function() {

var oEditors = [];

nhn.husky.EZCreator.createInIFrame({

oAppRef: oEditors,

elPlaceHolder: "ir1",

sSkinURI: "./dist/SmartEditor2Skin.html",

fCreator: "createSEditor2"

});

$(document).on('click', '.saveBtn', function () {

var val2 = oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);

this.contents = $('#ir1').val();

alert(this.contents);

this.onSubmitBtnClick();

});

};

3.3 결과 화면

위의 코드를 실행하면 나오는 결과 화면 입니다.

naver_smarteditor2

4. size 조절

화면에 따라 에디터의 사이즈를 조절해야 하는 경우가 발생 합니다. 그런데 html을 아무리 찾아보고 비슷한걸 수정해도 사이즈는 변경이 안되는데 사이트 변경은 js 파일에서 관리 합니다.

/dist/js/service에 가면 SE2BasicCreator.js 파일이 있습니다. 위치는 버전에 따라 하나 윗단계인 js에 들어 있기도 합니다. SE2BasicCreator.js 파일을 열고 아래와 같은 내용을 찾아서 수정 합니다.

var htDimension = {

nMinHeight:205,

nMinWidth:parseInt(elIRField.style.minWidth, 10)||570,

nHeight:elIRField.style.height||elIRField.offsetHeight,

nWidth:elIRField.style.width||elIRField.offsetWidth

};

높이 : nMinHeight:205

가로 : nMinWidth:parseInt(elIRField.style.minWidth, 10)||570,

화면에 따라 사이즈가 여러개 필요하다고요?

그럼 SmartEditor2xxx.html 파일과 SE2BasicCreator.js 파일을 여러개 복사해서 이름을 변경하고 각 html 파일에서 다른 js 파일을 불러오면 됩니다.

저작자표시 비영리 (새창열림)

'Etc' 카테고리의 다른 글

[윈도우즈] sch.exe의 작동이 중지되었습니다. 카카오인코더(CacaoEncoder) 삭제 (0)	2019.02.20
[꿈해몽 모음] 바위, 돌, 돌덩어리 관련 꿈 해몽 (0)	2019.02.16
[윈도우즈] 노트북 마우스 패드 잠금 또는 해제 하는 방법 (0)	2019.02.12
[꿈해몽 모음] 장례식 조의금 상주와 관련된 꿈 해몽 (0)	2019.02.12
[Pixlr] Adobe Photoshop 없이 무료 투명 배경 이미지 만들기 (2)	2019.01.31

Copy Coding

javascript

JQuery 이용 datepicker 사용방법 순차적 설명

'Java' 카테고리의 다른 글

HTML form tag에서 value text 가져오기 정리

1. input tag

2. textarea

3. select

4. radio

5. checkbox

'Java' 카테고리의 다른 글

Maven jQuery Validation 이용 form input 유효성 검사

'Java' 카테고리의 다른 글

[웹 에디터] 네이버 SmartEditor2 설치 ( javascript 내부 구현 방법 )

'Etc' 카테고리의 다른 글

+ Recent posts

티스토리툴바