장상휘님께서 질문하신 한페이지에 에디터 2개를 띄울경우, 사진첨부를 에디터마다 할수 있는지에 대한
문의를 해주셔서 간단하게나마 샘플링을 올리게 되었습니다.
2014/07/17 - [에디터연동/NAVER-스마트에디터] - 네이버의 스마트에디터를 연동해보고 서버에 내용을 전달해보자
2014/07/25 - [에디터연동/NAVER-스마트에디터] - 스마트에디터(smarteditor)의 싱글/멀티 이미지업로드하기 - JAVA/JSP 버전
위 두 포스팅의 방법으로 연동이 되었다 가정한 다음에 진행 하도록 하겠음.
기존 wirte.jsp 스크립트 코드(추가부분 주석표시)
var oEditors = []; ////////////추가 var oEditors2 = []; $(function(){ nhn.husky.EZCreator.createInIFrame({ oAppRef: oEditors, elPlaceHolder: "ir1", sSkinURI: "/editor/SmartEditor2Skin.html", htParams : { // 툴바 사용 여부 (true:사용/ false:사용하지 않음) bUseToolbar : true, // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음) bUseVerticalResizer : true, // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음) bUseModeChanger : true, fOnBeforeUnload : function(){ } }, fOnAppLoad : function(){ //기존 저장된 내용의 text 내용을 에디터상에 뿌려주고자 할때 사용 oEditors.getById["ir1"].exec("PASTE_HTML", ["기존 DB에 저장된 내용을 에디터에 적용할 ㅁ"]); }, fCreator: "createSEditor2" }); ////////////추가 nhn.husky.EZCreator.createInIFrame({ oAppRef: oEditors2, elPlaceHolder: "ir2", sSkinURI: "/editor/SmartEditor2Skin.html", htParams : { // 툴바 사용 여부 (true:사용/ false:사용하지 않음) bUseToolbar : true, // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음) bUseVerticalResizer : true, // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음) bUseModeChanger : true, fOnBeforeUnload : function(){ } }, fOnAppLoad : function(){ //기존 저장된 내용의 text 내용을 에디터상에 뿌려주고자 할때 사용 oEditors2.getById["ir2"].exec("PASTE_HTML", ["에디터 두번째!!!"]); }, fCreator: "createSEditor2" }); $("#save").click(function(){ oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []); ////////////추가 oEditors2.getById["ir2"].exec("UPDATE_CONTENTS_FIELD", []); $("#frm").submit(); }) })
BODY태그내 HTML 코드
<form id="frm" action="/insert.jsp" method="post"> <table width="100%"> <tr> <td>제목</td> <td><input type="text" name="title" /></td> </tr> <tr> <td>내용</td> <td> <textarea rows="10" cols="30" id="ir1" name="content" style="width:766px; height:412px; "></textarea> </td> </tr> <!-- 추가 --> <tr> <td>내용2</td> <td> <textarea rows="10" cols="30" id="ir2" name="content2" style="width:766px; height:412px; "></textarea> </td> </tr> <tr> <td colspan="2"> <input type="button" id="save" value="저장"/> <input type="button" value="취소"/> </td> </tr> </table> </form>
insert.jsp 추가 코드
※ 화면에서 서버페이지로 정상적으로 에디터값이 넘어오는지 확인하기 위함
//제대로 utf-8환경이 아니라 한글 깨짐 그래서 임의로 추가 request.setCharacterEncoding("utf-8"); System.out.println("제목:"+request.getParameter("title")); System.out.println("내용:"+request.getParameter("content")); System.out.println("내2용:"+request.getParameter("content2"));
실 행 결 과
1) 첫번째 에디터 사진첨부
2) 첫번째 에디터 추가완료
3) 두번째 에디터 사진첨부
4) 두번째 에디터 추가완료
5) 저장버튼 클릭후 서버페이지에서 받은 데이터값
정상적으로 각에디터에 사진첨부 와 데이터 전송이 각각 잘되는것을 확인하였음
Spring3을 이용한 스마트에디터(smarteditor) 이미지업로드(+html5) 적용하기 (50) | 2014.09.21 |
---|---|
스마트에디터(smarteditor)의 싱글/멀티 이미지업로드하기 - JAVA/JSP 버전 (73) | 2014.07.25 |
네이버의 스마트에디터를 연동해보고 서버에 내용을 전달해보자 (12) | 2014.07.17 |
예전에 jqueryUI를 통한 레이어팝업(다이얼로그)를 소개했었다
2014/06/20 - [자바스크립트이야기/jQuery UI 소개] - [jQueryUI - dialog] 레이어 팝업을 띄워보자
이번에는 blockUI 플러그인을 이용하여 레이어팝업을 띄워보도록 하겠다.
사용 스크립트
● jQuery [다운로드]
또는
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
● jQuery blockUI [다운로드]
다운로드를 받았으면 다음과 같이 프로젝트 생성 후 blockUI.js와 index.jsp를 위치시켰다
INCLUDE 파일
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jquery.blockUI.js"></script>
body 내에 들어갈 샘플 HTML 코드
<input type="button" id="btn" value="모달창띄우기"/> <div id="question" style="display:none; cursor: pointer;"> <h1>모달창확인</h1> <input type="button" id="closebtn" value="닫기" /> </div>
이벤트 코드 스크립트
$(function(){ $("#btn").click(function(){ //잠깐 나타났다가 사라지는 함수 //$.growlUI('타이틀', '내용'); $.blockUI({ //html태그를 문자열로 적용해도 무관함 //message : "<table><tr><td>태그테스트</td></tr><table>" message: $('#question') //css 설정 ,css: { width: '300px' } //모달창 외부 클릭시 닫기 ,onOverlayClick: $.unblockUI }); }) $("#closebtn").click(function(){ //모달창 닫기 $.unblockUI(); }) })
실 행 화 면
1) 초기실행화면
2) 버튼 클릭후 모달창 출력화면
위 샘플링은 blockUI의 간단한 맛보기이고 자세한 상세옵션들을 하나둘씩 적용하면 훌륭한 모달창을 띄울 수 있을 것이다.
blockUI 옵션URL
http://malsup.com/jquery/block/#options
도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!
[jQuery cookie] jquery로 쿠키($.cookie, $.removeCookie) 를 저장/불러오기/삭제해보도록 하자 (0) | 2014.08.18 |
---|---|
[jQuery ajax fileupload] ajax 파일업로드 (9) | 2014.06.26 |
[jQuery prettyDate] 페이스북처럼 등록일 조금더 보기좋게 꾸미기 (0) | 2014.06.18 |
[jQuery jqGrid] 데이터 목록을 그리드로 좀더 깔끔하게 사용하기 (0) | 2014.06.13 |
[jQuery validation] alert으로 validation 체크하는거 지겨우신가요? (0) | 2014.06.13 |
문자열 합치는 포스팅은 간단해서 쿼리와 실행화면으로만 샘플을 들어보도록 하겠음
1. MS-SQL('문자열'+'문자열'+'문자열')
select 's'+'u'+'m' total
실행화면
2. ORACLE('문자열'||'문자열'||'문자열')
select 's'||'u'||'m' total from dual
실행화면
3. MySQL(CONCAT('문자열','문자열'))
SELECT CONCAT('s','u','m') total
실행화면
도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!
각 DBMS(oracle,mssql,mysql) 별 컬럼,필드 삭제 명령어 (0) | 2014.09.23 |
---|---|
오라클,MySQL,MSSQL 각 DBMS별 컬럼을 추가해보도록 하자 (0) | 2014.09.23 |
(MySQL,MS-SQL,ORACLE) DB에 존재하는 테이블이름 변경하기 (0) | 2014.09.22 |
(MySQL,MS-SQL,ORACLE) case when then else end 사용하여 조건문 다루기 (0) | 2014.08.24 |
쿠키는 보통 아이디 저장하기 체크박스 클릭시 아이디정보를 저장한 후 재접속시 아이디 값을 유지할때 필요하다
사용 스크립트
● jQuery [다운로드]
또는
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
● jQuery cookie [다운로드]
압축 해제 후 jquery-cookie-master\src\jquery.cookie.js 를 include하도록 하자
index.jsp페이지에 샘플코드를 작성하고자 한다.
include 파일
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script>
body 내에 들어갈 샘플 HTML 코드
저장값 : <input type="text" id="save" /> <input type="button" value="쿠키저장" id="saveButton" /><br/> 쿠키값호출 : <input type="text" id="load" /> <input type="button" value="쿠키불러오기" id="loadButton" /> <input type="button" value="쿠키삭제" id="deleteButton" />
이벤트 코드 스크립트
$(function(){ //저장버튼 클릭 $("#saveButton").click(function(){ //입력값 var cookie_value = $("#save").val(); //'cookie'라는 key값으로 입력값을 저장한다. //1번째 parameter = 쿠키명 // 2번째 parameter = 저장하고자 하는 쿠키값 $.cookie('cookie', cookie_value); }); //불러오기버튼 클릭 $("#loadButton").click(function(){ //저장버튼클릭시 'cookie' key값을 불러온다. var cookie_value = $.cookie('cookie'); // load라는 id text태그에 cookie_value변수에 들어있는 값을 담는다. $("#load").val(cookie_value); }) //삭제버튼 클릭 $("#deleteButton").click(function(){ //'cookie' 라는 key값의 쿠키를 삭제한다 $.removeCookie("cookie"); }) })
※ 이외에 상세적인 옵션을 주고자 한다면 3번째 parameter를 정해주면 될것이다.
$.cookie('key값','value',{
expires : 10
,domain : 'roqkffhwk.tistory.com'
,secure : false
});
expires : 쿠키를 저장하는 기간이다 (10이라고 주었다면 10일동안 쿠키정보를 저장한다)
path : 쿠키경로 설정부분
domain : 쿠키를 저장할 도메인 - 지정안할시 호출한 url의 domain이 된다.
secure : https url에 사용을 하고자 한다면 true
테스트를 해보도록 하자
본인은 default값으로 화면 출력을 해보았음
1) 쿠키저장
2) 쿠키불러오기
3) 쿠키삭제 -> 쿠키값 호출하기
위와같이 확인되었다. 잘 사용하시길...
도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!
jQuery blockUI를 이용한 모달창(일명 레이어팝업 또는 다이얼로그창) 출력하기 (0) | 2014.08.20 |
---|---|
[jQuery ajax fileupload] ajax 파일업로드 (9) | 2014.06.26 |
[jQuery prettyDate] 페이스북처럼 등록일 조금더 보기좋게 꾸미기 (0) | 2014.06.18 |
[jQuery jqGrid] 데이터 목록을 그리드로 좀더 깔끔하게 사용하기 (0) | 2014.06.13 |
[jQuery validation] alert으로 validation 체크하는거 지겨우신가요? (0) | 2014.06.13 |
2014/08/15 - [DB/MySQL] - MySQL LIMIT를 사용하여 페이징쿼리를 동작시켜보자
2014/08/15 - [DB/MSSQL] - MS-SQL 2005 이상 row_number() over(order by 정렬조건) 을 이용하여 페이징쿼리를 동작시켜보자
이번에는 ORACLE의 rownum 을 이용하여 페이징 처리를 다루도록 보도록 하자
1. create table 생성
CREATE TABLE PAGE_TABLE ( "IDX" NUMBER, "TITLE" VARCHAR2(100), "CONTENT" VARCHAR2(200) )
2. 가상의 데이터 IMPORT
그렇다면 이제 페이징 테스트를 해보도록 하겠음.
각 페이징 처리를 할때마다 20개씩 출력해보도록 하겠다.
쿼리는 다음과 같다.
-- 1페이지 select * from (SELECT * FROM ( SELECT rownum rnum,idx,title,content FROM page_table ) pagetable where rnum <= 20 ) where rnum >= 1; -- 2페이지 select * from (SELECT * FROM ( SELECT rownum rnum,idx,title,content FROM page_table ) pagetable where rnum <= 40 ) where rnum >= 21; . . . -- 5페이지 select * from (SELECT * FROM ( SELECT rownum rnum,idx,title,content FROM page_table ) pagetable where rnum <= 100 ) where rnum >= 81;
3, 실 행 하 기
1페이지
2페이지
5페이지
ROWNUM
쉽게 생각해서 테이블 데이터아 rownum이라는 컬럼을 추가해서 1부터 출력된 테이블의 갯수를
순차적으로 증가 시켜주는거라고 생각하면 될것이다.
도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!
Oracle - if ~ else 조건문 사용하기 : DECODE (0) | 2014.08.24 |
---|---|
오라클 - 널체크(NVL 사용하기) (0) | 2014.08.23 |
오라클(Oracle) 데이터를 일괄로 다른테이블에 INSERT 하기 (INSERT INTO ... SELECT ... FROM ...) (2) | 2014.08.13 |
오라클 계층형 트리구조 쿼리 (재귀호출) - START WITH .. CONNECT BY PRIOR (0) | 2014.08.12 |
오라클(Oracle) sequence 생성, 등록, 최종 시퀀스값 조회하기 (2) | 2014.08.11 |