xe에디터기반으로 제작한 포토 업로더 컴포넌트가 있습니다.

 

컴포넌트를 통해 이미지를 업로드할 수 있고, 배치를 변경하여 편리하게 본문에 삽입할 수 있는

 

녀석입니다. (그냥 쉽게 생각하면 네이버 사진 업로드하는 녀석과 비슷하다고 보면 됩니다..)

 

 

아무튼.. ck에디터에서 업로드 방식이 변경되어 사용이 불가능했던 문제가 있었습니다..

 

ck에디터에서도 사용 가능하도록 연구해봤는데...

 

결론은.. 코어를 수정해야합니다...ㅠㅠ 정확히는 자바스크립트 플러그인을 수정해야죠..

 

(이 부분은 제가 모르는 것일지도 모르겠습니다...)

 

 

 

일단 가장 먼저 수정한 건 에디터 스킨인 ckeditor 였습니다.

 

파일업로드 변수?를 사용해야 하기 때문에..

 

file_upload.html을 열어

 

이렇게 수정하였습니다.

 

var photouploder;

jQuery(function($){
// uploader
<!--@if($allow_fileupload)-->
var setting = {
maxFileSize: {$file_config->allowed_filesize},
limitMultiFileUploadSize: {$file_config->allowed_filesize}
};
var uploader = $('#xefu-container-{$editor_sequence}').xeUploader(setting);
photouploder = uploader;
window.xe.msg_exceeds_limit_size = '{$lang->msg_exceeds_limit_size}';
window.xe.msg_checked_file_is_deleted = '{$lang->msg_checked_file_is_deleted}';
window.xe.msg_file_cart_is_null = '{$lang->msg_file_cart_is_null}';
window.xe.msg_checked_file_is_deleted = '{$lang->msg_checked_file_is_deleted}';
window.xe.msg_not_allowed_filetype = '{$lang->msg_not_allowed_filetype}';
window.xe.msg_file_upload_error = '{$lang->msg_file_upload_error}';
<!--@endif-->
});

 

 

photouploder 라는 전역변수를 설정하고,

 

uploader 값을 photouploder에 할당했습니다.

 

 

그리고.. 포토업로더에서 

 

파일 갱신하는 부분에..

 

opener.photouploder.loadFilelist(); 이렇게 추가했습니다.

 

원래는 loadFilelist함수 안에 $container를 넣어줘야 하지만, 팝업창이라 그런지 내부함수 돌다가 에러가 막 뿜뿜뿜!!!

 

그래서..

 

// Shortcut function in jQuery
$.fn.xeUploader = function(opts) {
var u = new XeUploader();

if(u) {
xe.registerApp(u);
u.createInstance(this.eq(0), opts);
default_settings.container = this.eq(0);
}

return u;
};

 

 

이런식으로 container 객체를 저장해두고..

 

/**
 * 파일 목록 갱신
 */
loadFilelist: function($container) {

if(!$container) $container = default_settings.container;

var self = this;
var data = $container.data();

 

$container 값이 없으면 아까 저장해둔 녀석을 호출하도록 하여 해결하였습니다.

 

그렇게 하면

 

ck에디터에서도 포토업로더가 정상적으로 작동합니다.

 

0.jpg

 

 

 

 

아... 생각해보니.. 굳이 jquery.fileupload 함수를 사용하지 않고,

 

그냥 리스트 스타일만 그대로 삽입하거나 삭제해도 되겠네요.. -_-....생각해보니.. 아주 간단한 건데,,

 

그러면 코어개조할 필요도 없고...!

 

헛고생한 기분..ㅠㅠ 뭐 그래도 조금은 공부가 되었으니 상관 없겠죠...

 

 

코어 개조없이 수정하는 방법으로... 나중에 도전해봐야겠네요.. 지금은 현자타임...

 

 

.,....하얗게 불태웠네요...

하늘희

profile
てててててて
  • profile
    수고했어료 ㅠㅠ 검은 화면에서 놀랐습니다.. 렉인줄..
  • profile profile
    검은 화면요?!
  • profile profile
    엇.. 사라졌다..!! (소름)..
  • profile
    굳굳! 수고하셨습니다.

    저도 가끔 며칠에 걸쳐 만들어놓고는 나중에야 깨달음을 얻고 심플하게 만든적이 한두번이 아니라 노고에 공감합니다. ^^

    전에 axupload 만들때는 이런것도 호환되게 했었는데 ckeditor를 가지고 코어 팀에서 좀 더 외부에서 컨트롤 가능한 api를 만들어주면 좋겠지만... ㅠㅠ
  • profile profile
    맞아요..ㅠㅠ 좀 외부에서 사용 가능하도록 소스 좀 제공해주면 좋은데..

    그런 게 없어서 참 아쉽더라구요..-_ㅠ

    그러니 저같은 초보자는 엄청 헤맬 수 밖에 없죠..
  • profile
    와.. 이미지 삽입하는 것에 신세계...☆
  • profile profile
    드래그 업로드도 됩니다..ㅋㅋ
  • ?
    초보 사용자가... 아닌거 같아요... ㅋㅋㅋㅋㅋㅋ
  • ? profile
    초보 사용자 맞습니다..ㅋㅋ

    그냥 일단 복붙해보고 하나씩 지워보기도 하고 바꿔보기도 하고 안되면 징징거리고...ㅠㅠㅠㅠㅠㅠㅠㅠ

    그리고 열심히 구글링... 그것도 안되면 어거지로 맞춰보기.......흐어엉.. 그래서 무지에서는 아무것도 하지 못해용...
  • profile ?
    저도 요즘 HTML/CSS 만지작거리면서 기능 추가하는 맛 들렸습니다 ㄲㄲ

    그래도... 자바나 php쪽은 건드리지도 못하겠더라구요 ㅠㅠ, 멋지십니다 :)
  • ? profile

    그냥.. 단순한 변수 선언 정도만 할 줄 압니다...ㅋㅋ

    var test = 1; 정도요..

  • profile

    myAvatar_17004639_1.gif

    음.. 역시 어렵구나. 뭔가 다양하게 적용할수 있는 에디터가 없어서 그런걸까요.

  • ?
    어렵네요