Muppy's 웹에디터 xquared jquery plugin jquery

★jQuery 1.3이상에서 사용가능합니다.

대신 사용법이 살짝 바뀌었습니다.
기존 : $('#xqEditor').xquared().editable({'baseUrl':'../'})
변경후 : $('#xqEditor').editable({'baseUrl':'../'})




★ xquared 에디터 및 jquery.xquared.0.1.1.js 다운로드 

 jquery.xquared.0.1.1.js 파일은 아래 파일 압축푸신 후  \javascripts/폴더 보시면 있어요~ ^^



★ 설치 및 사용
 : 
    1. 다운받은 파일 압축해제 후 아래와 같은 구조가 되는지 확인

    2. examples/jquery_sample.html 을 확인







★ 소스코드 살펴보기

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
        <link rel="stylesheet" type="text/css" href="../stylesheets/xq_ui.css" />
<link rel="stylesheet" type="text/css" href="../stylesheets/xq_custom.css" />
        <!-- jquery core -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
        <!-- xquared core -->
<script type="text/javascript" src="../javascripts/Full_merged.js"></script>
<!-- 이미지 업로드를 위한 script 들 -->
<script type="text/javascript" src="../javascripts/plugin/swfupload/AC_OETags.js"></script>
<script type="text/javascript" src="../javascripts/plugin/swfupload/swfupload.js"></script>
<script type="text/javascript" src="../javascripts/plugin/swfupload/swfupload.queue.js"></script>
<script type="text/javascript" src="../javascripts/plugin/FileUploadPlugin.js"></script>
        <!-- 이미지 업로드를 위한 script 들 -->
<!-- xquared jquery 플러그인 -->
<script type="text/javascript" src="../javascripts/jquery.xquared.0.1.2.js"></script>
<script>
   // textarea를 웹에디터로 변환
$(function(){
$('#xqEditor').editable({'baseUrl':'../'}); // baseUrl은 root폴더로 지정해야함
     });
</script>
</head>
<body>
<!-- textarea -->
<textarea id="xqEditor">&lt;p&gt;Hello World&lt;/p&gt;</textarea>
</body>
</html>



★ submit시 에디터내용을 textarea에 넣기

 : 자동으로 되지만.. $('#xqEditor').flush()를 통해 강제로 넣을 수 있음



★ 옵션

 resizeHeader: true, /- 에디터사이즈 미세조절 사용여부 *-
 heightHeaderWrapper: 5, /- 에디터사이즈 미세조절 값 *-
 baseUrl: '/adm/xquared/' /- img와 css를 불러오기 위한 baseUrl 위 그림에서는 xquared가 된다. *-
 fileUploadTarget1: '/adm/common/upload/put.do' /-파일업로드를 처리할 서버사이드 url*-
 isSingleFileUpload : false  /-true면 파일 업로드 기능 추가*-
의 옵션이 사용가능하며 다음과 같이 사용한다.

$(function(){
    $('#xqEditor').editable({
resizeHeader:true, 
        heightHeaderWrapper: 5, 
        baseUrl: '/equared/' ,
        isSingleFileUpload: 'false',
        fileUploadTarget1: '/adm/common/upload/put.load',
    });
});
 



★ 함수 

 .flush()
 : 웹에디터의 내용을 textarea에 강제로 밀어넣는 함수( 자동으로 되지만... 혹시나 해서 만들어 놓은...^^;;)
  이런경우 사용하세요
   - ajax를 사용하여 sumit할 때 form.submit() 의 기존 함수를 강제로 회피할 경우,
   - jQuery form plugin 류의 플러그인 사용으로 form.submit()의 기존 함수를 강제로 회피할 경우

.editable({option: value[,optionN: valueN]});
 : 웹에디터 생성함수



★ 이미지 업로드

xquared는 이미지를 처리 후 결과를 seudo json 형태로 받는다.
json 짝퉁이란 뜻이며... <body>{success: ...} </body> 뭐 이딴 식이다..
살짝 조잡스러워서 json 형태로 받도록 바꾸고 싶었지만... 일이 많아 질것 같아서 참았다. ㅋ
암튼 아래 세가지 작업을 해주면 된다.

 1. jquery.xquared.js 설정 

$(function(){
    $('#xqEditor').editable({
resizeHeader:true, 
        heightHeaderWrapper: 5, 
        baseUrl: '/equared/',
        isSingleFileUpload: true,
        fileUploadTarget1: '/upload/put.jsp',
    });
});

 2. 이미지 업로드용 controller 작성

controller 없이 바로 jsp에 파일 저장하고 결과 뿌려주도록 작성해도 무방하지만...
업로드 하는 controller 만드는게 좋지 않을까요? ^^;;
아무튼 파일업로드 부분은 각자 만드세요 ㅋ

 3. 이미지 처리용 결과 html 작성 

아래는 제가 만든 코드인데요
${result}  부분에 json 형태의 문자열이 들어가면 됩니다.
xquared에서 원하는 형식은
정확하게 
{
  success:true,
  message:''
  file_url: 'http://localhost:8080/2011012121.jpg'
  name: ''
}
와 같습니다.

짧게 설명드리면 

success: 이미지 업로드 성공여부
message: 입력후 간단하게 나오는 알림 메세지
file_url: 서버사이드에 업로드 된 실제 경로
name: 요거 없어도 됩니다만 일단 넣어두세요 ㅋㅋ

대략 아래와 같이  작성하시면 됩니다. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page contentType="text/html; charset=UTF-8" %><%@include file="../includes/taglib.jsp" %>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
<title>Xquared Upload Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">//<![CDATA[
window.-nload = function(){
 
if (window.parent.xed)
{
window.parent.xed.fileUploadListener.onSuccess("${result}");
}
};
//]]>
</script>
</head>
<body>
${result}
</body>
</html>



★ 에디터 완성 모습
 

덧글

  • 펄렁거스 2011/03/22 12:59 # 삭제 답글

    jquery 플러그인 공개해주셔서 감사합니다.

    그런데 속성지정해주는게 안먹는것 같네요.

    baseUrl 속성도 인식 못하는 것 같구요..

    jquery 버전이 달라서 그런건가요??
  • 왕새우 2011/03/22 15:17 #

    펄렁거스님 감사합니다.
    덕분에
    버전 관련없이 사용가능하도록 //
    속성인식관련 버그 수정 //
    완료하였습니다.

    좋은 하루 되세요
  • 펄렁거스 2011/03/23 16:30 # 삭제 답글

    아 잘되네요 감사합니다. ^^
  • Gavin 2011/07/06 13:59 # 삭제 답글

    한 페이지에 에디터 두개를 사용할려면 어떻게 하면 될까요?
  • 유진상 2011/07/08 15:02 # 삭제 답글

    궁금한게 있는데요 Gavin 님 말처럼

    저두 jquery로 루프 돌려서 화면에 동적으로 여러개의 에디터까지 생성은 했는데요

    테이블을 추가한다 던지 하면 제일 마지막에 생성된 에디터에만 추가 되고 선택하는 다이얼로그 박스도 엉뚱한데 나타나서요

    아무래도 전역변수 1개를 가지고 쓴게 문제인거 같은데

    여러 동적으로 복수의 에디터를 위한 방법이 있나요?
  • uvbus 2015/03/01 00:41 # 삭제 답글

    본문 내용에서 커서위치에 html 삽입하는 방법좀 알려주시면 감사하겠습니다.
댓글 입력 영역


통계 위젯 (블랙)

45
37
461590