부제 : System Clipboard는 멋지지만 멋지지 않다.


부제가 섹시하다.


오늘은 OS의 System Clipboard를 자바스크립트로 다룰때의 몇가지 이슈에 대해 정리하고자 한다.


브라우저는 OS의 System Clipboard를 Access하기 위한 방법으로 clipboardData 개체를 지원한다.



clipboardData(DataTransfer) 개체

documentation

개요

clipboardData개체는 기본적으로 read-only 개체이며 DataTransfer interface의 구현체이다.


IE의 경우 window개체를 통해 window.clipboardData로 접근이 가능하며

다른 브라우저의 경우 copy, cut, paste 이벤트 리스너에 전달되는 event 개체의 clipboardData 속성으로 접근이 가능하다.


제공하는 메소드

setData(format, data)

clipboardData개체의 값을 설정하는 함수이다.

format은 mime-type이며 text 타입과 url타입을 지정할 수 있다.

data는 text의 경우 일반 text와 blob(@see HTML5의 File API 관련)데이터를 지정할 수 있다.

return value는 성공/실패값으로 boolean 값을 반환한다.


getData(format)

clipboardData개체의 값을 얻어오는 함수이다.

format은 setData와 같으며 정상적으로 동작시 클립보드에 저장되어 있는 데이터값이 반환된다.


clearData(format)

clipboardData개체의 값을 지우는 함수이다.

format은 test, url, file, html, image를 지정할 수 있다.




대충,,, 간단한 설명은 이쯤하고 자세한건 위의 documentation을 참고하는 걸로 한다.



테스트하려는 이슈는 다음과 같다.

  • 시스템 클립보드의 setData, getData를 이용하여 복사/붙여넣기 기능을 구현하고 싶다.
    1. 단축키(Ctrl+c,x,v)와 브라우저 contextmenu를 통한 방법
    2. 특정한 UI를 제공(복사/잘라내기/붙여넣기 버튼) 하는 방법



단축키(Ctrl+c,x,v)와 브라우저 contextmenu를 통한 방법

  1. document.body 또는 원하는 element에 copy, cut, paste 이벤트 리스너를 할당 한다.
  2. 이벤트 리스너 함수에서 event개체의 clipboardData 또는 window.clipboardData개체에 접근하여 제공되는 메소드를 통해 데이터를 설정하거나 얻어온다.
  3. 이렇게 설정하거나 값을 얻어와 복사/잘라내기/붙여넣기 기능을 구현할 수 있다.
  4. github source 참고 (테스트한 소스이며 간단히 clipboardData와 execCommand만 테스트)
테스트 해본 결과로는 별다른 문제가 없다.
단축키나 컨텍스트 메뉴를 통한 방식은 매우 깔끔하며 딱히 문제될 만한 부분이 없다.
(다만,,, 실제 크로스브라우징 처리를 하며 이 기능 개발을 하려면 당연히 고민해야 될 부분은 많다. 특히 IE 버전별 처리...)




특정한 UI를 제공(복사/잘라내기/붙여넣기 버튼) 하는 방법 (execCommand를 이용)

  1. 준비
    1. 임의의 iframe을 생성해 놓는다.(copy,cut,paste를 수행할 document)
    2. document.body의 contenteditable 속성을 true로 설정한다.
  2. copy, cut, paste 등의 button element를 만들어 mouse click 이벤트 리스너를 할당한다.
  3. copy or cut
    1. copy or cut 버튼의 mouse click 이벤트 리스너 함수에서 복사하거나 붙여넣기할 값을 iframe의 document.body에 innerHTML로 설정한다.
    2. 이벤트 리스너 함수에서 iframe의 document.execCommand('copy' or 'cut')를 사용하여 강제로 clipboard 액션을 트리거한다.
      1. 이때 복사하고자 설정한 iframe document.body의 값이 시스템 클립보드에 복사된다.
  4. paste
    1. paste 버튼의 mouse click 이벤트 리스너 함수에서 iframe의 document.execCommand('paste')를 사용하여 강제로 clipboard 액션 트리거한다.
      1. 이때 시스템 클립보드에 있는 값이 iframe의 document.body에 붙여넣어 진다.
    2. iframe의 document.body에 붙여넣어진 값을 가져온다.(innerHTML)
      1. 이 값을 붙여넣기 기능에 사용할 수 있다.
  5. 이렇게 설정하거나 값을 얻어와 복사/잘라내기/붙여넣기 기능을 구현할 수 있다.
  6. github source 참고 (테스트한 소스이며 간단히 clipboardData와 execCommand만 테스트)

바이너리 데이타인 이미지등을 복사/붙여넣기 하는 방법은 조금 다르다.
그 부분은 다음 기회에 따로 포스팅.


테스트 해본 결과로는 일단 브라우저별로 동작이 다르다.
이 부분이 문제이다.

Internet Explorer (가능)
  • execCommand를 호출하면 브라우저 자체에서 보안 프롬프트를 띄워 사용자에게 이 액션을 허용할 것인지를 묻는다.
  • 허용하게 되면 해당 웹페이지가 새로고침될때까지 다시 보안 프롬프트를 띄우지 않으며 execCommand가 제약 없이 실행된다.
    • copy, cut, paste 모두 동일
Chrome (불가능)
  • execCommand를 통한 copy, cut은 IE와 동일하게 잘 동작한다.
    • IE와 같이 보안 프롬프트 메시지는 뜨지 않는다.
    • Chrome 42+ version 부터 지원한다.
  • execCommand를 통한 paste는 동작하지 않는다.
    • 아예 동작하지 않으며 크롬 documentation에는 보안상 이유로 지원하지 않는다고 나와있다.
FireFox (불가능)
  • execCommand를 통해서는 copy, cut, paste 모두 보안상의 이유로 강제 트리거는 불가능하다.
Opera, Safari (모름)
  • 안해봄...



결론
위의 테스트가 완벽하다고 할 순 없으나 적당한 시간을 투자하여 나온 결론은
크롬이나 파이어폭스 브라우저에서 execCommand의 지원 한계로 인해 커스텀한 UI를 만들어 시스템 클립보드에 접근할 수 있는 방법은 찾지 못하였다.
popular한 웹에디터나 웹오피스들을 살펴보아도 위와 같이 IE에서는 시스템 클립보드를 이용한 복사/잘라내기/붙여넣기 기능을 제공한다.
물론, 단축키를 이용한 방식은 모든 브라우저에서 잘 동작한다.

etc...
그런데 Google Docs는 지원한다....OTL...
과연 API에도 지원안한다고 했는데 어떻게 했을까 싶어서 디버깅도 해보고 별짓을 다해봤지만 방법을 찾을 수 없었다...

오늘도 뭔가 멋진걸 되게하는 포스팅이 아닌 안되는걸 증명하는 포스팅이 되어버린 느낌적인 느낌에 기분이 좋지만은 않다 ..










이 내용은 지극히 경험적인 내용을 정리한 것입니다.

잘못된 내용이 있거나 문제가 될만한 부분이 있다면 댓글 또는 페이스북(https://www.facebook.com/vamalboro)으로 연락주시면 당장! 고치도록 하겠습니다.

저작자 표시 비영리 변경 금지
신고
블로그 이미지

웹오피스 개발자 피스티스

사이냅소프트에서 웹오피스를 개발하고 있습니다.

Euclidean Distance

사용자 삽입 이미지

위 공식은 유클리드라는 사람이 만든 N차원에서의 두 점간의 거리를 구하는 공식이다.

재미있는 문제를 풀어보다 이 공식으로 문제를 풀어야 해서 찾아보았고 역시나.

기초 수학이 부족해 루트부터 다시 개념잡고 공부!

일단 p와 q는 점을 나타낸다.

p1, q1은 각 점들의 좌표다. 예를 들어 2차원공간에서의 좌표를 나타낼때

우리는 보통 x, y로 좌표를 표현하는데 이 것을 위의 공식으로 나타내면

첫번째 점의 x, y좌표는 p1, p2로 나타낼수 있고, 두번째 점의 x, y좌표는 q1, q2로 나타낼 수 있다.

3차원이라면 x, y, z, p1, p2, p3이다.

2차원을 예로 들어 보자.

첫번째 점 p의 좌표는 (x=3, y=4)이고 두번째 점 q의 좌표가(x=2, y=11)이라고 할때 위의 공식으로 식을 만들어 풀어보면 아래와 같다.

1. 루트 ( (3 - 2)^2 + (4 - 11)^2 )
2. 루트 ( 1 + -7^2)
3. 루트 ( 1 + 49 )
4.  7.0710...


이 공식은 2차원 공간에서 1사분면뿐 아니라 4사분면으로 나누어진 2차원공간에서도 유효하다.

내 친구이자 나의 프로그래밍 스승인 쏭겐님께서 피타고라스의 정리를 이용해서 설명을 해주는데.

참 그넘 잘한다.ㅎㅎ

어쨌든 친구 덕분에 더욱 확고히 이해할 수 있었고 까먹기도 쉽지 않을정도가 되었다. (땡큐)


이대로 그냥 끝내면 재미없으니까 자바스크립트로 예제 코드를 한번 짜 보았다.

------------------------------------------------------------------------------------------------
function Point(x, y) {
	this.x = x || 0;
	this.y = y || 0;
}
Point.prototype.equals = function(point) {
	if (!point || point.constructor != Point) {
		return false;
	}
	
	return this.x === point.x && this.y === point.y;
}
Point.prototype.xPoint = function(x) {
	if (typeof x == "undefined") {
		return this.x;
	} else {
		this.x = x;
	}
}
Point.prototype.yPoint = function(y) {
	if (typeof y == "undefined") {
		return this.y;
	} else {
		this.y = y;
	}
}

먼저 위와 같은 2차원상에서의 좌표를 나타내는 객체를 하나 정의하고 이를 이용해 2차원상에서의

두 점간의 거리를 구하는 유클리디안 함수를 만들어 보면 아래와 같다.


function EuclideanDistance(point1, point2) {	
	return point1.equals(point2) ? 0 : 
		Math.sqrt(
			Math.abs(
				Math.pow(point1.xPoint() - point2.xPoint(), 2) +
				Math.pow(point1.yPoint() - point2.yPoint(), 2))
		);
}


신고
블로그 이미지

웹오피스 개발자 피스티스

사이냅소프트에서 웹오피스를 개발하고 있습니다.

Google Closure Tools라는게 오픈소스로 나왔다.

오~~~~ 멋지다.와와와~

우리팀 모선임님께서 친히 svn 레포지토리에서 다운로드 받아서 테스트 개발서버에 배포까지 해주셨다.

난 그냥 편하게 데모 구경.

뭐 소감으로 말하자면 괜찮다.

아직 코드는 자세히 보진 못했는데 개인적으로 블로그에 포스팅좀 하면서 공부좀 해야겠다.

이유는!

먼가 멋져보여서 Google에서 만든거라니 한번 보고 싶은 마음.

오픈소스공부를 제대로 해본적이 한번도 없는데 관심이 생기는 이참에 한번 분석해보자는 마음.

그리고 현재 자바스크립트를 80%이상 사용하며 프로젝트를 수행중이므로 ~ ㅋㅋ


일단, Google Closure Tools라는게 도대체 무엇인지 알기 위해 나름 번역페이지 띄워 놓고 봤지만..

역시 이해는 30%...

결국 검색을 하다보니 간단하지만 설명이 잘 되어 있는 포스트를 발견!*_*

Google Closure Tools란?  <- 요기요기~

난 Compiler와 Templates는 일단 제쳐놓고 Library에 대해 급 관심이 가기 시작.

일단 안되는 영어라도 현재는 번역으로 잘 알려주는 책이 있는 것도 아니고 어쩔 수 없이 직접 사이트를 뒤적이는 수 밖에 방법이 없다.


일단 Google Closure Library 링크를 따라가보면 화면 오른쪽에 "How do I start?" 라고 쓰여 있는 곳을 보자.

목록에 보면 아래와 같이 쓰여있다. 옆에는 친절한 나의 설명.

  • Download Closure. - 소스코드 다운로드가 120%맞습니다.
  • Read Finding Your Way around Closure. - Closure Library의 규칙과 코드베이스에 대해 설명한다.
  • Do the Closure Hello World exercise. - 다른거 볼 필요없이 Hello World나오면 무조건 연습 튜토리얼임.
  • Work through the Building an Application with the Closure Library tutorial. - 이것두 튜토리얼.
  • Explore the project's source code. - 뭐 API문서나 Issue, 등을 볼 수 있는 Closure Library 프로젝트 홈인듯 하다.(웹에서 소스도 직접 볼 수 있다.)



소스를 다운로드 받자(이클립스같은 IDE를 사용하면 편하다.SVN 플러그인 제공한다.)

소스를 모두 다운로드 받았으면 (이클립스의 경우[java] Dynamic Web Project를 구성해 소스를 위치시키고)

/closure/goog/demos/index.html을 실행시키면 데모를 볼 수 있다.



신고
블로그 이미지

웹오피스 개발자 피스티스

사이냅소프트에서 웹오피스를 개발하고 있습니다.

얼마전 nhn에서 스마트베이직에디터를 오픈소스로 발표해서 한번 써봤는데.

깔끔하고 심플하고 뭐 나쁘진 않았다.

다른분들처럼 API사용하여 플러그인만들어서 기능추가도 해보고 싶지만..

일단 자바스크립트에서 좀 딸리고.

혼자 공부삼아 하는게 아니라 프로젝트에 반영해야되서 다른걸 찾다가 보니. (시간이 없다능..변명변명변명;;)

FCKeditor라는걸 찾게되었다. (많은 분들이 쓰시는듯하다. 나만 몰랐던건가.-_-)

나중에 또 써먹기위해.. 그리고 검색하여 이블로그를 찾아주신 분들에게 조금이라도 보답하기위해

간단히 사용법을 적는다.

http://www.fckeditor.net/

사이트 접속 후 데모페이지도 볼 수 있다.

우상단에 보면 Download 메뉴가 있다.

Download 페이지 하단에 FCKeditor.Java에 "Click here to download the latest version" 를 클릭.

이동하는 화면에서 보면 버젼별로 다운로드 받을 수 있다.

현재 가장 최신버젼(2.4.1 - 2008-10-14)인  fckeditor-java-demo-2.4.1.war파일을 다운로드 받는다.

톰캣루트의 webapp폴더에 파일을 이동한 후 톰캣을 가동시키면 자동으로 파일이 압축해제되면서 데모사이트가 가동된다.

http://localhost/컨텍스트로 접속하면

샘플페이지를 볼 수 있다.

현재 테스트하는 나의 개발환경은 다음과 같다.

WAS : apache-tomcat-6.0.18
Charset : UTF-8

jsp폴더안에 샘플페이지들이 있으니 참고하여 자신의 상황에 맞게 커스터마이징하여 사용하면된다.

이 샘플페이지의 코드를 이용하여 간단히 에디터를 불러오는 소스를 만들어보면 아래와 같다.



<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="net.fckeditor.*" %>
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<title>FCKeditor Example</title>
<link rel="shortcut icon" href="fckeditor.gif" type="image/x-icon" />
<script type="text/javascript">
    function FCKeditor_OnComplete(editorInstance) {
        window.status = editorInstance.Description;
    }
    function sendForm(frm) {
        var oEditor = FCKeditorAPI.GetInstance('content');
        var div = document.createElement("DIV");

        div.innerHTML = oEditor.GetXHTML();
        if (isNull(div.innerHTML)) {
            alert("내용을 입력하세요.");
            oEditor.Focus();
            return false;
        }
        return true;
    }
    function isNull(text) {
        if (text == null)
            return true;
        var result = text.replace(/(^\s*)|(\s*$)/g, "");
        if (result)
            return false;
        else
            return true;
    }
</script>
</head>
<body>
<ul>
    <li><FCK:check command="CompatibleBrowser" /></li>
    <li><FCK:check command="FileBrowsing" /></li>
    <li><FCK:check command="FileUpload" /></li>
</ul>
<form name="frmFckEditor" action="sampleposteddata.jsp" method="post" onsubmit="return sendForm(this)">
<FCK:editor instanceName="content" toolbarSet="MyToolbar" width="750" height="350">
    <jsp:body>
        <FCK:config SkinPath="skins/silver/"/>
    </jsp:body>
</FCK:editor>
<br />
<input type="submit" value="Submit" /></form>
</body>
</html>


  1. <FCK:editor> 태그는 editor를 로딩하는 태그이다. instanceName은 HTML Element의 name속성으로 생각하고 원하는 이름을 설정하여 준다. 위는 content이다. toolbarSet속성은 MyToolbar라는 이름으로 커스터마이징한 툴바이름을 설정해 주었다. 넓이와 높이도 px단위로 설정해 주었다.
    1. 원하는 툴바설정은 fckeditor/fckconfig.js파일을 열어 FCKConfig.ToolbarSets["Default"]라고 되있는 부분을 먼저 찾는다. 기본설정이므로 삭제하지말고 복사한후 이름을 MyToolbar로 정한후 JSON형식으로 정의된 툴바들을 원하는 대로 정의한다.(자세한 내용은 사이트를 참조).
    2. 그외의 폰트, 사이즈, 업로드 등등 여러가지 설정을 할 수 있다.
  2. <FCK:config>태그안의 SkinPath속성은 총 3가지의 스킨중 실버스킨을 적용한 것이다.
  3. form의 action의 sampleposteddata.jsp파일은 jsp폴더안에 존재한다. 자신의 경로에 맞게 설정을 해주면 되며(아니면 샘플페이지를 jsp폴더로 이동) 폼으로 전송한 editor의 내용값을 확인할 수 있다.
    한글은 깨지니 sampleposteddata.jsp파일을 열어 상단에 request.setCharacterEncoding("UTF-8");를 추가하여 준다. EUC-KR환경이라면 EUC-KR로 변경.

이로서 기본적으로 editor의 설정은 해보았지만. 이미지 업로드 같은 경우 한글이미지는 깨지게 된다.

한글이미지를 업로드 하려면 WEB-INF/lib/에 있는 java-core-2.4.1.jar파일안에 있는 소스를 직접수정하여야 한다. (수정을 하지 않고도 하는 방법을 아시는 분은 댓글좀 남겨주세요.ㅠㅋ )

fckeditor download사이트로 가서 fckeditor-java-2.4.1-src.zip를 다운받으면 소스코드가 있다.

변경할 소스는 net.fckeditor.connector.ConnectorServlet파일에 243라인에
ServletFileUpload upload = new ServletFileUpload(factory); 이 부분이 있다.
이 밑에 upload.setHeaderEncoding("UTF-8");를 추가한다.(자신의 환경에 맞는 Charset으로)
그리고 이미지업로드를 해보면 한글파일이 깨지지 않고 업로드가 정상적으로 된다.

대략적인 사용방법 끝.

아. 블로그에 글쓰기 힘들다...


저작자 표시 비영리 변경 금지
신고
블로그 이미지

웹오피스 개발자 피스티스

사이냅소프트에서 웹오피스를 개발하고 있습니다.