어렵다 어려워... 자바스크립트를 이용한 방법(IE, 크롬 테스트 완료)


<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="net.fckeditor.*" %>   
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Maven onjTel Test</title>
<script type="text/javascript" src="/SpringWeb/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
            function FCKeditor_OnComplete(editorInstance) {
                window.status = editorInstance.Description;
            }

function check_form(){
    //id체크
    var myTitle = document.forms[0].elements["title"].value;
   
    var mycontents = document.forms[0].elements["contents"].value;
   
    if ($.trim(myTitle).length == 0) {
        alert("제목입력!");
        return false;
    }
    /*
    if ($.trim(mycontents).length == 0) {
        alert("내용입력!");
        return false;
    }
    */
   
   
    /*
    if (document.getElementById('contents').innerHTML == '') {
        alert('required field');
        return false;
    }*/
   
    var EditorInstance = FCKeditorAPI.GetInstance('contents') ;
    //if(EditorInstance.EditorDocument.body.innerText.length<=0)
    if (EditorInstance.GetXHTML()=="")   
    {
        alert("This firld is mandatory");
        EditorInstance.EditorDocument.body.focus();
        return false;
    }
   
    return true;
}
</script>
</head>
<body>
<h1> 글쓰기</h1>
<%
        FCKeditor fckEditor = new FCKeditor(request, "contents");
%>

<form action="/SpringWeb/board.html?onj=write" method="post"
    onsubmit="return check_form()">
    <input type="text" name="title" id="title" size="50" /> <br/>
        <%
            //fckEditor.setValue("초기값");
            out.println(fckEditor);
        %>
        <br />
        <input type="submit" value="전송" />
</form>   
</body>
</html>

'ajax' 카테고리의 다른 글

fckeditor 설정  (0) 2013.01.21
ckeditor설정  (0) 2013.01.17
jquery plugin 작성 #1  (0) 2013.01.14
jquery tablesorter  (0) 2013.01.13
jquery ui resize  (0) 2013.01.13

ckeditor가 유료화 된이후로 실제로 서버설정이 되는 부분이 빠져있다.

그래서 fckeditor (무료버전)으로 작업한다. 그리고 이버전의 특징은 사용자가 쉽게 커스터마이즈가 가능하다. 소스도 100% 공개되어 있어서 입맛에 맛도록 조정이 가능하다.


먼저

http://java.fckeditor.net/ 에서

Fckeditor-java-demo-2.6.war를 다운받는다.

일단 war를 웹컨테이너에서 실행해본다.


기존 spring, struts같은 프로젝트에 설치하는 방법


1. demo web contents에 있는 fckeditor폴더를 해당 web contents에 복사한다.

2. demo web.xml에 있는

<servlet>
        <servlet-name>ConnectorServlet</servlet-name>
        <servlet-class>
            net.fckeditor.connector.ConnectorServlet
        </servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>ConnectorServlet</servlet-name>
        <!-- Do not wrap this line otherwise Glassfish will fail to load this file -->
        <url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern>
    </servlet-mapping>


를 복사해서 web.xml에 붙여넣는다.

3. demo에 있는 jar파일 모두를 붙여넣는다.

4. demo source에 있는 fckeditor.properties 파일을 copy & paste한다.

5. 임의의 test.jsp파일을 만든다


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="net.fckeditor.*" %>   

   
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
        FCKeditor fckEditor = new FCKeditor(request, "contents");
%>

<form action="testAction.jsp" method="post">
        <%
            //fckEditor.setValue("초기값");
            out.println(fckEditor);
        %>

        <br />
        <input type="submit" value="전송" /></form>   
   
</body>
</html>





'ajax' 카테고리의 다른 글

fckeditor validation  (0) 2013.02.18
ckeditor설정  (0) 2013.01.17
jquery plugin 작성 #1  (0) 2013.01.14
jquery tablesorter  (0) 2013.01.13
jquery ui resize  (0) 2013.01.13

http://ckeditor.com/ 에서 최신판 ckeditor를 다운받는다.

압축을 푼후 ckeditor폴더안의 모든 내용을 webcontent에 복사한다.


작동확인: samples폴더안에 index.html을 실행하고 ck에디터의 전반적인 기능들을 볼수있다.


실제 적용

jsp파일하나 만들고(예: index.html)


ckeditor.js파일을 스크립트로 읽어들이고

<textarea class="ckeditor" id="editor1" name="editor1"></textarea>

와 같이 기존의 textarea에 ckeditor라는 클래스를 붙인다.

id를 유니크하고 주면 한화면에 멀티로도 가능하다.

초기값은 기존의 textarea와는 다르게 태그로도 줄수있다.

이때 태그는 태그 그대로 가능하다. 즉 <를 < 등으로 바꿀 필요가 없다.


소스: index.html


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./ckeditor.js"></script>
</head>
<body>
하실 말씀:
<textarea class="ckeditor" id="editor1" name="editor1"></textarea>
</body>
</html>

'ajax' 카테고리의 다른 글

fckeditor validation  (0) 2013.02.18
fckeditor 설정  (0) 2013.01.21
jquery plugin 작성 #1  (0) 2013.01.14
jquery tablesorter  (0) 2013.01.13
jquery ui resize  (0) 2013.01.13

jquery는 쉽게 확장이 가능하다.

jquery로 플러그인을 쉽게 작성할 수 있다.

 

jquery에 노란바탕에 빨간 글씨로 경각심을 강조하기 위한 caution이라는 기능을 추가한다고 하자...

 

myplug.js

 

$.fn.caution = function() {
 this.css("color", "red");
 return this.css("backgroundColor", "yellow");
}

 

caution.html

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="./myplug.js"></script>
  <script type="text/javascript">
  $(function() {
 $("#logo").caution();
  });
  </script>
 </head>

 <body>
  <p id="logo">oracle java</p>

 </body>
</html>

'ajax' 카테고리의 다른 글

fckeditor 설정  (0) 2013.01.21
ckeditor설정  (0) 2013.01.17
jquery tablesorter  (0) 2013.01.13
jquery ui resize  (0) 2013.01.13
jquery ui #1 drag 기능  (0) 2013.01.11

http://tablesorter.com/docs/#Download 에서 다운받는다.

 

다음과 같이 단 한줄로 table sorter가 가능하다.

아마도 이것보다 간단한 table sorter는 존재하지 않는다.

그만큼 jquery plugin의 기능은 대단하다고 할 수 있다.

 

<html>
 <head>
  
  <style type="text/css">
   
  </style>
  <script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="./ui/jquery.tablesorter.js"></script>
  
  <script type="text/javascript">
  $(document).ready(function(){ 
   $("#myTable").tablesorter();
  });
  </script>
 </head>
 <body>
  <table border="1" id="myTable">
   <thead>
   <tr><th>번호</th><th>이름</th><th>나이</th></tr>
   </thead>
   <tbody>
   <tr><td>5</td><td>김인호</td><td>22</td></tr>
   <tr><td>1</td><td>박찬호</td><td>49</td></tr>
   <tr><td>2</td><td>이승엽</td><td>35</td></tr>
   <tr><td>3</td><td>최철권</td><td>29</td></tr>
   <tr><td>4</td><td>이민형</td><td>62</td></tr>
   </tbody>
  </table>
 </body>
</html>

'ajax' 카테고리의 다른 글

ckeditor설정  (0) 2013.01.17
jquery plugin 작성 #1  (0) 2013.01.14
jquery ui resize  (0) 2013.01.13
jquery ui #1 drag 기능  (0) 2013.01.11
jquery ajax2 json다루기  (0) 2013.01.10

draggrable에 추가사항

resizable.js, themes폴더 전체

 

<html>
 <head>
  <link rel="stylesheet" href="./themes/base/jquery.ui.all.css" type="text/css" media="all">
  <style type="text/css">
   #myArea {
    background-color: yellow;
    width: 240px;
    height: 160px;
   }
  </style>
  <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
   <script src="./ui/jquery.ui.core.js"></script>
   <script src="./ui/jquery.ui.widget.js"></script>
   <script src="./ui/jquery.ui.mouse.js"></script>
   <script src="./ui/jquery.ui.resizable.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){ 
   $("#myArea").resizable();
  });
  </script>
 </head>
 <body>
  <div id="myArea">이 박스는 리사이즈가 가능합니다...</div>
 </body>
</html>

'ajax' 카테고리의 다른 글

jquery plugin 작성 #1  (0) 2013.01.14
jquery tablesorter  (0) 2013.01.13
jquery ui #1 drag 기능  (0) 2013.01.11
jquery ajax2 json다루기  (0) 2013.01.10
jquery ajax2 xml 다루기  (0) 2013.01.10

먼저 다음의 사이트에서 jquery ui를 다운받는다.

http://jqueryui.com/

 

여기에서 custom download를 다운받는다.

압축을 푼후에 jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.draggable.js 파일을

ui 폴더에 카피한다.

 

ui1.html

 

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <link rel="stylesheet" href="./ui1.css" type="text/css" media="all">
  <script src="./jquery-1.8.3.min.js"></script>
 <script src="./ui/jquery.ui.core.js"></script>
 <script src="./ui/jquery.ui.widget.js"></script>
 <script src="./ui/jquery.ui.mouse.js"></script>
 <script src="./ui/jquery.ui.draggable.js"></script>
<script src="./js/ui1.js"></script>

 </head>

 <body>
  <h1>jQuery Sample</h1>
<p>jQuery UI</p>
<div id="myArea">여기가 드래그 가능합니다.</div>

 </body>
</html>

 

ui1.js

 

$(function(){
$("#myArea").draggable();
});

 

ui1.css

 

h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}
#myArea {
background-color:yellow;
width:240px;
height:160px;
}

 

 

 

 

다중 드래그 처리

클래스를 이용하면 간단하게 멀티로 드래그 처리를 해 줄수 있다.

 

<body>
  <h1>jQuery Sample</h1>
<p>jQuery UI</p>
<div class="dArea">(1)여기가 드래그 가능합니다.</div>
<div class="dArea">(2)여기가 드래그 가능합니다.</div>
<div class="dArea">(3)여기가 드래그 가능합니다.</div>
<div class="dArea">(4)여기가 드래그 가능합니다.</div>

 </body>

 

ui1.js

 

$(function(){
$(".dArea").draggable();
});

 

ui1.css

 

.dArea {
background-color:yellow;
width:120px;
height:100px;
}

 

 

'ajax' 카테고리의 다른 글

jquery tablesorter  (0) 2013.01.13
jquery ui resize  (0) 2013.01.13
jquery ajax2 json다루기  (0) 2013.01.10
jquery ajax2 xml 다루기  (0) 2013.01.10
jquery ajax1  (0) 2013.01.08

json 파일의 구조

json은 일반 텍스트파일이다.

json은 {"키" : 값 }의 구조이다.

값에는 문자열, 숫자, 배열, 등 어떠한 자바스트립트 객체도 가능하다



ramen.txt


{ "menu" : [
{"itemCode": 1,
"itemName" : "삿뽀로 이치방 쇼유라면",
"itemPrice" : 2800},
{"itemCode": 2,
"itemName" : "신라면 미니컵",
"itemPrice" : 2500},
{"itemCode": 3,
"itemName" : "삼양라면 미니컵",
"itemPrice" : 2300}
]
}


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/ajax2-1.js"></script>
</head>
<body>
<h1>Jquery ajax XML Sample</h1>
<p>비동기통신의 처리</p>
<form name="jsonForm">
<input type="button" value="오늘의 menu" id="todayMenu" />
<br/>
</form>
<div id="news">읽고 있습니다.</div>
</body>
</html>


ajax2-1.js


$(function(){
$("#todayMenu").click(function() {
var httpObj = jQuery.get("./ramen.txt",null, function(){
//alert(httpObj.responseXML);
//$("#news").html(httpObj.responseText);
displayRamen(httpObj.responseText);
});
});
});



function displayRamen(jsonData) {
var data = eval("(" + jsonData + ")");
alert(data.menu.length);
alert(data.menu[0].itemCode);
alert(data.menu[0].itemName);
 
}





'ajax' 카테고리의 다른 글

jquery ui resize  (0) 2013.01.13
jquery ui #1 drag 기능  (0) 2013.01.11
jquery ajax2 xml 다루기  (0) 2013.01.10
jquery ajax1  (0) 2013.01.08
jquery mouse hover  (0) 2013.01.08

이번시간에는 xml과 json 파일을 다루는 방법을 소개해 드리겠습니다.


먼저  xml입니다.


news.xml


<?xml version="1.0" encoding="UTF-8"?>

<newslist>
<news>
    <category>it</category>
    <content>
    <![CDATA[
        세계 최대의 가전 전시회인 CES가 미국 라스베이거스에서 개막됐습니다. 한수 아래라고 생각했던 중국업체들이 우리 턱 밑까지 추격해오고 있습니다.

김명진 특파원이 직접 다녀왔습니다.



<기자>

우리 업체들은 첨단기술로 눈길을 잡았습니다.

기존 HD TV보다 4배나 더 선명한 화질의 울트라 HD TV, 크기도 세계 최대인 110인치를 내놓았습니다.

[이경식/삼성전자 영상디스플레이사업부 전무 : 2~3년 내에 UD 콘텐츠가 활성화될 것을 기대를 하고 출시하게 된 것입니다.]

삼성과 LG는 울트라 HD 화질을 갖춘 곡면형 55인치 올레드 TV를 세계 최초로 동시에 발표했습니다.

[이쌍수/LG전자 TV상품기획담당 상무 : 올레드TV는 올 1월달에 한국시장에 출시를 했습니다. 상반기에 글로벌로 확대할 계획입니다.]


    ]]>
    </content>
</news>
<news>
    <category>sports</category>
    <content>
    <![CDATA[
    “조성민은 대단한 투수였습니다. 한 시즌 10승 이상은 가능할 것으로 예상했어요. 1996년 부진했지만, 그건 가벼운 치통과도 같은 것으로 생각했죠. 1997년 드디어 구단의 기대가 틀리지 않았다는 걸 보여줬습니다.”


2010년 요미우리 자이언츠 2군 훈련장을 찾았을 때다. 그곳에서 만난 요미우리 관계자는 자기 팀에서 뛰었던 한국선수들을 일일이 추억했다. 그 가운데 그가 가장 아쉬워한 선수가 바로 고 조성민이었다. 뛰어난 신체조건과 탁월한 재능 그리고 야구에 대한 열정과 노력이 다른 일본인 선수를 능가했다는 게 이유였다.


    ]]>
    </content>
</news>
</newslist>


ajax2.html


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/ajax2.js"></script>
</head>
<body>
<h1>Jquery ajax XML Sample</h1>
<p>비동기통신의 처리</p>
<form name="ajaxForm">
<input type="button" value="오늘의 뉴스" id="todayNews" />
<br/>
</form>
<div id="news">읽고 있습니다.</div>
</body>
</html>



ajax2.js


$(function(){
$("#todayNews").click(function() {
var httpObj = jQuery.get("./news.xml",null, function(){
//alert(httpObj.responseXML);
//$("#news").html(httpObj.responseText);
displayNews(httpObj.responseXML);
});
});

});


function displayNews(xmlData) {
alert($("news", xmlData).size());
alert($($("category", xmlData)[0]).text());
alert($($("content", xmlData)[0]).text());
}


'ajax' 카테고리의 다른 글

jquery ui #1 drag 기능  (0) 2013.01.11
jquery ajax2 json다루기  (0) 2013.01.10
jquery ajax1  (0) 2013.01.08
jquery mouse hover  (0) 2013.01.08
jquery ui 작성  (0) 2013.01.07

Jquery를 이용하면 Ajax를 쉽게 할 수 있다. 기본 개념은 자바스크립트 Ajax (비동기통신)과 같다.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<title>jQuery Sample</title>

<link rel="stylesheet" href="css/main.css" type="text/css" media="all">

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="js/ajax1.js"></script>

</head>

<body>

<h1>Jquery Sample</h1>

<p>비동기통신의 처리</p>

<div id="news">읽고 있습니다.</div>

</body>

</html>


main.css


h1 {

font-size:14pt;

border-bottom:1px dotted gray;

width:320px;

}

div {

width:320px;

background-color:yellow;

border:1px solid red;

}


ajax1.js

$(function(){

$("#news").load("news.txt");

});






get으로 변경


$(function(){

//$("#news").load("news.txt");

var httpObj = jQuery.get("./news.txt",null, function(){

alert(httpObj.responseText);

});

});



ajax로 변경


$(function(){

//$("#news").load("news.txt");

jQuery.ajax({

url : "./news.txt",

type : "get",

success : function(data){

alert(data);

}

});

});



error 처리

$(function(){

//$("#news").load("news.txt");

jQuery.ajax({

url : "./news2.txt",

type : "get",

timeout : 2000,

success : function(data){

alert(data);

},

error : function() {

alert("읽을 수 없습니다");

}

});

});


timeout은 밀리세컨드 즉 2000은 2초이다. 2초간 기다려서 응답이 없으면 에러로 처리한다.

디폴트는 타임아웃이 없다. 즉 응답이 완료될 때까지 무한정 기다린다...


'ajax' 카테고리의 다른 글

jquery ajax2 json다루기  (0) 2013.01.10
jquery ajax2 xml 다루기  (0) 2013.01.10
jquery mouse hover  (0) 2013.01.08
jquery ui 작성  (0) 2013.01.07
jquery #3 애니메이션 처리  (0) 2013.01.03

+ Recent posts