'다음에디터 이미지 삭제'에 해당되는 글 1건

  1. 2012.07.09 다음 에디터 이용시 글삭제 할때 첨부 이미지도 같이삭제하게 하는 처리
다음 에디터 이용시 글삭제 할때 첨부 이미지도 같이삭제하게 하는 처리

 

 

http://code.google.com/p/daumopeneditor/issues/detail?id=214

http://www.silverwolf.co.kr/9643

http://blog.daum.net/ilryu/7094513

 

 

이미지 첨부기능 구현에 있어 몇가지 질문이 있습니다.


테스트환경은 IE7, FF 3.6.10, JQuery Javascript 라이브러리, Daumeditor 5.4.9입니다.

1.
이미지 첨부후 에디터에서 전체삭제 혹은 리스트에서 삭제하면 에디터 캔버스에서 삭제가 되지 않습니다. 샘플팝업으로 테스트할경우는 정상작동합니다.
http://hanmin2.hosting2003.co.kr/daumeditor/daumeditor.html
위 주소로 테스트가능합니다.
사진첨부시 삭제안됨. 파일첨부시 삭제됨.


2.
사진첨부시 IE에서 업로드된 사이즈를 가져오지 못합니다.
196번 게시물에서 문의했던 부분인데 변수문제로 안되는경우가 있다고 말씀해주셨는데
다시 첨부해주신 파일도 역시 같은 현상입니다. IE에서는 안되고 FF에서는 정상작동합니다. 이부분은 다시 한번 확인 좀 해주시기 바랍니다.^^

3.
첨부파일의 전체용량이 정확하지 않은것 같습니다. (196게시물에 첨부해주신 파일로 테스트해본결과)
예들 들어 300바이트 이미지를 3개 업로드하면 900바이트....
에디터 첨부 리스트에는 3개가 등록되어있는 상태일때 그중 하나를 리스트에서 제거하면
총 용량이 600바이트가 되어야 될것 같은데. 첨부해주신 소스로 확인 결과 900바이트가
나오고 계속적으로 첨부할시 총 업로드용량이 증가하기만 합니다. 즉 리스트상에서 삭제를 해도 실제적인 삭제 처리는 되지 않는다고 보여집니다. 첨부파일의 용량을 제한하는 기능을 구현할경우 꼭 필요한 기능이 아닐까 싶습니다.

4.
3번과 동일선상인듯한데...
에디터의 첨부파일 리스트에서 삭제시 호출되는 함수들의 순서와 전반적인 처리과정을 알고 싶습니다. 의도는 첨부된이미지가 리스트에서 삭제될때 실제 서버에서도 삭제하는 기능을 삽입하고 싶은데 그작업을 하려면 처리되는 과정을 알아야 하지 않을까 싶습니다.^^


1.
URL 감사합니다. 알려주신 URL을 통해 문제를 확인을 해보았습니다. 해당 문제는 두가지 부분이 문제점으로 나타납니다.
첫번째는 이미지 주소에 한글이나 특수문자가 들어갈 경우 에디터 캔버스에서 해당 이미지를 인식하지 못하는 문제입니다.
저의 소견으로는 파일 경로를 서버측에서 파일명을 영문과 숫자로만 이루어지도록 정해주는 방식이 제일 좋을 것 같습니다.
두번째 문제는 IE 일 경우에는 경로 부분이 도메인까지 포함하는 풀 경로로 지정해주셔야 하는 부분입니다.
_mockdata 에서 이미지 경로를 full 경로로 주셔야 정상동작합니다. 즉, "/upfile/imagedata/1.png" 의 경우 "http://test.com/upfile/imagedata/1.png" 으로 설정해주셔야 합니다.

문제를 좀 더 자세하게 설명드리면 아래와 같습니다.
Editor.getSidebar().getAttachments("image")[0].regHtml 로 접근할 수 있는 첨부 파일의 정규표현식으로
Editor.getCanvas().getContent() 을 통해 가져온 캔버스의 HTML 에 해당하는 표현식이 있는지 확인하는 과정을 가집니다.
그런데 Editor.getCanvas().getContent() 가 캔바스 영역의 innerHTML 속성으로 브라우저 별로 동작이 상이합니다.
IE 인 경우 경로를 중간까지만 세팅해주어도 풀 경로로 반환이 되는 부분이 있고, FF 의 경우 한글이나 특수 문자의 경우 %EC%9C 와 같은 형태로 변경되어 반환합니다.
그런 부분 때문에 처음부터 파일 경로를 영문과 숫자로만 이루어진 풀 경로로 지정해 주는 방식이 구현이 수월할 것으로 보입니다.


2.
죄송합니다. 해당 문제를 저희가 재현하지 못하여 도움을 드리기 어려운 부분이 있습니다. 가능하다면 1번 질문처럼 해당하는 URL을 받아보고 싶습니다. 가능하신가요? ㅠㅠ


3.
네, 맞습니다. 죄송합니다. 제가 실수하여 그 부분을 누락하였습니다.
소스에서 업로드 된 파일의 용량 합계를 구하는 부분이 있습니다. 그 부분에서 아래 코드처럼 deletedMark 변수를 확인하여 삭제된 파일의 경우 용량 계산에서 제외시켜야 될 것 같습니다.
{code}
		for (i = 0; i < len; i += 1) {
			if (list[i].deletedMark != true) {
				sum += list[i].data.filesize;
			}
		}
{code}


4.
네, 해당 부분의 구현은 아래 이슈에 설명되어 있습니다. 이벤트를 감시하여 해당 기능을 수행하시면 되실 것으로 보입니다.
http://code.google.com/p/daumopeneditor/issues/detail?id=133
그리고, 자세한 부분은 아래와 같습니다.
파일 삭제는 삭제 버튼을 눌렀을 때 /daumeditor-5.4.0/_js_source/trex/attachbox/attachbox_ui.js 의 178라인의 entry.execRemove() 함수 호출에서 시작됩니다.
해당 함수는 /daumeditor-5.4.0/_js_source/trex/sidebar.js 의 153 라인의 위치하고 있습니다.
{code}
	execRemove: function() {
		this.remove();
		this.entryBox.remove(this);
	},
{code}
위에서 this.remove(); 의 경우 /daumeditor-5.4.0/_js_source/trex/attachment.js 의 59라인에 위치하고 있습니다. 여기에서는 canvas 에서 해당하는 내용을 제거하는 기능을 수행합니다.
this.entryBox.remove(this); 의 경우 /daumeditor-5.4.0/_js_source/trex/sidebar.js 의 90라인에 위치하고 있습니다. 엔트리의 deletedMark 변수를 true 로 바꿔주고, Trex.Ev.__ENTRYBOX_ENTRY_REMOVED 이벤트를 fire 시킵니다.
{code}
	remove: function(entry) {
		entry.deletedMark = true;
		this.fireJobs(Trex.Ev.__ENTRYBOX_ENTRY_REMOVED, entry);
	},
{code}


답변 감사합니다.^^
2번 문제는 인코딩상의 문제라서 해결하였습니다.
항상 상세한 답변 감사드립니다.^^


execAttach함수에 대해서 자사한 내용을 좀 알고 싶습니다.


이미지 첨부부분을 수정하면서 execAttach함수에 대해서 찾아봤는데...
도무지 어느부분에 있는 함수인지를 모르겟습니다.
용도는 전체 이미지 용량을 확인하고 제한하려는 기능을 만들때 사용하려고 하는데.
찾질 못해서 답답한 마음만 가지고 있습니다..ㅜㅜ

js파일의 몇번째 라인에 있는지...
덧붙여 함수의 대한 설명도 해주셧으면 더없이 감사할것 같습니다.^^;


안녕하세요, 운영자입니다.

네 말씀주신 부분을 소스 차원에서 확인을 원하시면 아래 코드들을 참고하시면 도움이 되실 것 같습니다.


1.
/daumeditor-5.4.0/_js_source/common.js
143라인
{code}
function registerAction(attacher) {
	if(!attacher) {
		return; 
	}
	window.execAttach = attacher.attachHandler;
}
{code}
registerAction 을 통해서 attacher 의 attachHandler 를 전역 변수 execAttach 로 연결시킵니다.

이 부분은 다시 아래 부분으로 연결됩니다.
2.
/daumeditor-5.4.0/_js_source/trex/attacher.js
142라인
{code}
	attachHandler: function(data, attachmentType) {
		if(this.checkInsertable()) {
			if(this.isCheckSize && !this.entryBox.checkInsertableSize(data.filesize)) {
				alert(TXMSG("@attacher.size.alert"));
				return;
			}
			this.execAttach(data,  attachmentType);
		} else {
			this.execReattach(data,  attachmentType);
		}
	},
{code}

여기서 execAttach 를 타게되어 아래 부분으로 연결되고요.
3.
/daumeditor-5.4.0/_js_source/trex/attacher/image.js
102라인
{code}
	execAttach: function(data, type) {
		var _entry = this.createEntry(this.getDataForEntry(data), type);
		_entry.execRegister();
	},
{code}

createEntry 는 createAttachment 를 호출하여 또 다시 Trex.Attacher 의 멤버로 연결됩니다(Trex.Attacher.Image 는 Trex.Attacher 를 상속받음).
4.
/daumeditor-5.4.0/_js_source/trex/attacher.js
157라인
{code}
	createAttachment: function(data, type) {
		var _attachmentType = this.constructor.__Identity;
		if(type){
			_attachmentType = type;
		}
		return new Trex.Attachment[_attachmentType.capitalize()](this, data);
	},
{code}

여기서 이미지일 경우에는 Trex.Attachment.Image 클래스의 인스턴스를 하나 생성하여 리턴하게 됩니다. 해당 클래스 코드는 아래 위치에 있습니다.
5.
/daumeditor-5.4.0/_js_source/trex/attacher/image.js
125라인부터..

3번에서 호출되는 _entry.execRegister() 는 Trex.Attachment.Image 의 부모 클래스인 Trex.Attachment 의 부모 클래스인 Trex.Entry 에 위치하고 있습니다.
6.
/daumeditor-5.4.0/_js_source/trex/sidebar.js
141라인
{code}
	execRegister: function() {
		this.register();
		this.entryBox.append(this);
		this.setExistStage(true);
	},
{code}

여기서 attachment 의 register 를 호출해서 에디터 본문에 HTML 을 붙여넣고,
entryBox 에 entry (첨부된 파일에 대한 정보가 들어있음) 를 추가하여 첨부 파일들을 관리하게 하는 등의 작업을 합니다.

구조가 꽤 복잡하긴 합니다만, 클래스와 메소드를 위주로 찾아서 따라가시다 보면 소스가 어느 정도 파악이 되실듯합니다.


그리고 전체 이미지 용량을 확인하고 제한하는 기능을 만드는 기능은 여러가지로 구현이 가능하겠습니다만, 에디터 소스를 꼭 고치시지 않아도 되는 아래와 같은 방식을 추천드립니다.

1. popup 페이지 내에서 attacher 를 변수에 담아둡니다(getAttacher() 함수로 가능, 기존의 initUploader() 를 참고).
2. attacher.getDatalist() 를 호출하여 list 를 받아옵니다.
3. list 를 순환하여 .data.filesize 를 합산하여 전체 이미지 용량을 확인합니다.

예제 코드로 나타내면 다음과 같습니다.
{code}
...
		var list, i, len, sum;
		list = attacher.getDatalist();
		len = list.length;
		sum = 0;
		for (i = 0; i < len; i += 1) {
			sum += list[i].data.filesize;
		}
		alert("지금까지 업로드된 이미지들 사이즈 합: " + sum);
		sum += currentFileSize;
		alert("하나 더 하면: " + sum);
{code}
해당 image.html 파일의 전체 코드를 첨부하였습니다. 참고가 되셨으면 합니다.
더 궁금하신 부분이나 자세한 설명이 필요하신 부분은 댓글을 남겨주시길 바랍니다.


에디터 사용에 관심을 주셔서 감사합니다. 또 다른 질문이나 건의 사항이 있으시면 글을 남겨주시길 부탁드립니다.
즐거운 저녁 되십시요~^^


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Daum에디터 - 이미지 첨부</title>
<script src="../../js/popup.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../../css/popup.css" type="text/css"  charset="utf-8"/>
<script type="text/javascript">
// <![CDATA[
       
        function done() {
                if (typeof(execAttach) == 'undefined') { //Virtual Function
                return;
            }
                var currentFileSize = 640;
                var _mockdata = {
                        'imageurl': 'http://cfile284.uf.daum.net/image/116E89154AA4F4E2838948',
                        'filename': 'editor_bi.gif',
                        'filesize': currentFileSize,
                        'imagealign': 'C',
                        'originalurl': 'http://cfile284.uf.daum.net/original/116E89154AA4F4E2838948',
                        'thumburl': 'http://cfile284.uf.daum.net/P150x100/116E89154AA4F4E2838948'
                };
               
                var list, i, len, sum;
                list = attacher.getDatalist();
                len = list.length;
                sum = 0;
                for (i = 0; i < len; i += 1) {
                        sum += list[i].data.filesize;
                }
                alert("지금까지 업로드된 이미지들 사이즈 합: " + sum);
                sum += currentFileSize;
                alert("하나 더 하면: " + sum);
               
                execAttach(_mockdata);
                closeWindow();
        }

        function initUploader(){
            var _opener = PopupUtil.getOpener();
            if (!_opener) {
                alert('잘못된 경로로 접근하셨습니다.');
                return;
            }
           
            window.attacher = getAttacher('image', _opener);
            registerAction(attacher);
        }
// ]]>
</script>
</head>
<body onload="initUploader();">
<div class="wrapper">
        <div class="header">
                <h1>사진 첨부</h1>
        </div>  
        <div class="body">
                <dl class="alert">
                    <dt>사진 첨부 확인</dt>
                    <dd>
                        확인을 누르시면 임시 데이터가 사진첨부 됩니다.<br />
                                인터페이스는 소스를 확인해주세요.
                        </dd>
                </dl>
        </div>
        <div class="footer">
                <p><a href="#" onclick="closeWindow();" title="닫기" class="close">닫기</a></p>
                <ul>
                        <li class="submit"><a href="#" onclick="done();" title="등록" class="btnlink">등록</a> </li>
                        <li class="cancel"><a href="#" onclick="closeWindow();" title="취소" class="btnlink">취소</a></li>
                </ul>
        </div>
</div>
</body>
</html>

신고

댓글을 달아 주세요

 «이전 1  다음»