SIR

그누보드4의 cheditor5 플래시를 ajax로 > 그누보드5 팁자료실

그누보드5 팁자료실

그누보드4의 cheditor5 플래시를 ajax로 정보

그누보드4의 cheditor5 플래시를 ajax로

본문

여러 버전이 있고, 또 뭔가 좀 안맞는 구석도 있고 해서 다시 정리해서 올립니다.
복붙하지 마시고 본인의 에디터를 살펴보고 적당히 수정해서 넣으세요.

 

1) 플래시 버튼을 막는다.

 

이 에디터는 플래시 버튼을 자동으로 생성합니다.(html에 박혀있는게 아님)
그래서 자바스크립트를 수정해서 플래시 버튼 생성과 제거 부분을 모두 차단해야합니다.

 

이것부터 해결하자면
/cheditor5/popup/image.html 위쪽에 플래시용 자바스크립트 주석처리


<!--
둘중 하나가 있을테니 주석처리해주세요.
<script src="js/swfobject.js" type="text/javascript"></script>
<script src="js/image_upload_flash.js" type="text/javascript"></script>
-->

 

/cheditor5/popup/js/image.js에서 플래시 버튼 생성부분 주석처리
function initEvent <--를 검색하시면 나오는데 거기 내용을 모두 주석처리
swfobject.removeSWF(AppID); <-- 검색해서 나오면 모두 주석처리 없으면 패스

 

그리고 jquery를 쓸 것이므로 jquery로 하나 넣어주겠습니다.

뭐 이런식(버전마다 다름)


<script src="//code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="js/dialog.js" type="text/javascript"></script>
<script src="js/image.js" type="text/javascript"></script>
<!--
<script src="js/swfobject.js" type="text/javascript"></script>
<script src="js/image_upload_flash.js" type="text/javascript"></script>
-->


2) 이제 플래시 버튼 대용으로 이미지 버튼을 활용한다.

/cheditor5/popup/image.html 에서
<div id="oFlashButton"></div> 나 <td id="oFlash"></td> 를 찾는다.(위에 있음)


<td id="oFlash">
    <input type="file" id="nfile" name="nfile" multiple="multiple" accept=".gif,.jpg,.jpeg,.png" style="display:none" onchange="noFlashUpload()"/>
    <img src="../icons/imageUpload/add_image_button.gif" style="margin-left:3px;vertical-align:middle;cursor:pointer" onclick="noFlashUploadOpen()" alt="" />
</td>
<!--
혹은
div로 시작할때는 style="display:inline-block" 이걸 추가해줘야함
버전마다 사진추가 이미지가 다르므로 맞춰서 적용 add_image_button.gif 혹은 add.gif
-->
<div id="oFlashButton" style="display:inline-block">
    <input type="file" id="nfile" name="nfile" multiple="multiple" accept=".gif,.jpg,.jpeg,.png" style="display:none" onchange="noFlashUpload()"/>
    <img src="../icons/imageUpload/add.gif" style="margin-left:3px;vertical-align:middle;cursor:pointer" onclick="noFlashUploadOpen()" alt="" />
</div>

 

3) 이제 새 업로드 버튼이 동작할 자바스크립트를 추가해줌


/cheditor5/popup/js/image.js 맨 밑에다 붙여줌

 

주의사항! image.js에서 function uploadComplete 검색해서 찾아보면
function uploadComplete(image) 이면 결과값이 json이라는 의미(오브젝트)
function uploadComplete(fileData) 이면 결과값이 문자열이라는 의미(텍스트)

따라서 아래 코드에서 $.ajax 부분에 dataType: "text", 을 
dataType: "json",
dataType: "text",
본인의 상황에 맞게 수정해줌.

 


function noFlashUploadOpen() {
    $("#nfile").click(); // 숨김 input file를 클릭하는 효과
}
function noFlashUpload() {
    var uplist = $("#nfile").get(0).files; // 숨김 input file에서 파일 배열을 가져옴
    if(uplist.length < 1) return; // 첨부없으면 끝 
    for(var i = 0; i < uplist.length; i++) {
        // 각 파일의 형식 제한
        if(uplist[i].type != "image/png" && uplist[i].type != "image/gif" && uplist[i].type != "image/jpg" && uplist[i].type != "image/jpeg") {
            fileFilterError(uplist[i].name);
            return;
        }
    }
    // 업로드 시작 알림(로더)
    startUpload(uplist.length); // image.js
    // 업로드 작업
    // cheditor5/imageUpload/upload.php 에서 1개씩만 업로드를 처리하므로 개별처리
    // 순차 처리를 위해서 ajax의 비동기를 끔 async: false
    // 업로드 진행율이 필요없으므로 xhr 은 제외
    for(var i = 0; i < uplist.length; i++) {
        var formData = new FormData();
        formData.append("file", uplist[i]);
        $.ajax( {
            url: UploadScript,
            type: "POST",
            contentType: false,
            processData: false,
            crossDomain: true,
            cache: false,
            async: false,
            dataType: "text", // 여기 본인 상황에 맞게
            data: formData,
            success: function(response, textStatus, xhr) {
                uploadComplete(response);
            },
            error: function(xhr, textStatus, error) {
                console.log(xhr.responseText);
            }
        });
    }
}

 

4) 이제 /cheditor5/imageUpload/upload.php 에서 오는 반환 값을 정리해줌


// 이렇게 되어있으면 옛날 버전이니까 그대로 넘어가구요.
$rdata = sprintf( "{ fileUrl: '%s/%s', filePath: '%s/%s', origName: '%s', fileName: '%s', fileSize: '%d' }",
    SAVE_URL,
    $random_name,
    SAVE_DIR,
    $random_name,
    $filename,
    $random_name,
    $filesize );
// 이렇게 되어있으면 좀 고쳐야합니다.
$rdata = sprintf('{"fileUrl": "%s/%s", "filePath": "%s", "fileName": "%s", "fileSize": "%d" }',
    SAVE_URL,
    $filename,
    $savefile,
    $filename,
    $filesize );
// -----> 이렇게
$rdata = sprintf('{"fileUrl": "%s/%s", "filePath": "%s", "fileName": "%s", "fileSize": "%d", "origName": "%s", "width": "%d", "height": "%d" }',
    SAVE_URL,
    $filename,
    $savefile,
    $filename,
    $filesize,
    $filename, // 이부분에 $_FILES['file']['name'] 같은 걸 쓰거나, 뭔가 잘 다듬어서 넣어도 되지만 전 그냥 저장되는 이름을 써줬습니다. 대세에 큰 지장없어서리
    $imgsize[0],
    $imgsize[1]);

 

 

5) 이미지 삭제하기

/cheditor5/popup/js/image.js 에서

function imageDelete --> 이걸 검색해서

이런 내용이 나오거든 아래와 같이 고쳐줍니다.
var chximage = document.getElementById(AppID);
chximage.ImageDelete(encodeURI(filePath));

 


function imageDelete(filePath) {
    //var chximage = document.getElementById(AppID); 주석처리하고
    //chximage.ImageDelete(encodeURI(filePath)); 주석처리하고
    $.ajax( {
        url: DeleteScript,
        type: "POST",
        contentType: false,
        processData: false,
        crossDomain: true,
        cache: false,
        async: false,
        dataType: "text",
        data: "filepath=" + encodeURI(filePath),
        success: function(response, textStatus, xhr) {
        },
        error: function(xhr, textStatus, error) {
            console.log(xhr.responseText);
        }
    });
}

 

일단 여기까지. 

 

6) 마지막으로 iframe 내에 불러오는 것이라 캐시 갱신을 좀 해주셔야합니다.

 

/cheditor5/popup/image.html 을 열어서 
dialog.js 를 dialog.js?v=아무글자
image.js 를 image.js?v=아무글자

 

/cheditor5/cheditor.js 를 열어서
popupWinLoad : function 을 검색해서

이런식으로 수정 popupAttr 인지 popupInfo 인지 구분해서


// iframe.setAttribute('src', self.config.popupPath + popupAttr['tmpl']);
iframe.setAttribute('src', self.config.popupPath + popupAttr['tmpl'] + "?v=아무글자");
또는
iframe.setAttribute('src', self.config.popupPath + popupInfo['tmpl'] + "?v=아무글자");


7) 진행중

 

이렇게 하고 나면 버그가 하나 있는데 이미지 업로드 선택 한번 했다가
취소하고 다시 선택하면 안되는 버그가 있어요. 
이건 좀 고민해보고 추가로 업데이트 하겠습니다.

(그래도 그럭저럭 쓸수는 있는 상태. 팝업창을 다시 닫았다가 하면 되긴 함)

추천11

댓글 전체

헛 잘보고 잘따라서해서 해결했습니다 !!!
그런데 질문이 익스플로러에서는 잘해결됬는데 크롬에선 기능이 작동이안되네요 ㅠ
버전이 5.09버전 입니다 !
크롬에서는 캐시가 남아있을 경우가 많아요. 컨트롤+f5 도 한번 눌러주시구욥.
QnA에 올리신 글 보고 해당 사이트 들어가서 해보니까 크롬도 나름 완벽하진 않아도 잘 되는 듯한데. 해결안되시면 쪽지 주셔도되요.
캐시를 지우고해도 버튼까진나오는데 먹통이네요...ㅠ

혹시 염치없지만.. 시간여유되시면 한번 체크부탁드려도 될까요

http://kndesign.rubi.co.kr/bbs/board.php?bo_table=01_04

형네 홈페이지가 문제생겨서 조금보고있는데  이쪽은아에 정보가없다보니 ㅎㅎ
부탁한번 드리겠습니다 !!!!
보내주신 게시판에 제가 크롬으로 글하나 작성해서 올렸습니다.
실제로 이미지를 에디터로 첨부해서 올렸구요.
크롬에서 캐시는 모두 한번 지운 상태였구요.

업로드 전에 로더(동글동글 돌아가는 이미지)는 안나오는데 조금 기다리면 업로드는 됩니다. 제가 올린 글은 삭제하셔도 됩니다.

음...안되는 이유가 대체 뭘까요;;
아무래도 제 메인컴이 문제가있는듯합니다.........
다른컴 크롬도다되는데  제메인컴만안되네요 캐시삭제를다했는데도...

아무래도 이상없이 잘 된듯합니다 ㅎㅎㅎㅎㅎㅎ

골머리아프던게 해결됬네요  고맙습니다 !!!
우왕.... 고민도 많았는데.. 너무 잘됩니다. 다만 익스플로어 버젼 및 일부 피시가 안되는데 ,, 캐시 지우고 다시해도 안되네요..ㅠㅠ,, 제컴퓨터만 되는 이유가 있을까요? 참 희안하죠??  근데 제 피시도 익스플로러는 안되고 크롬만 되다가 캐시초기화 하고 난뒤 부터 안됩니다... ㅜㅜ
/cheditor5/cheditor.js 파일을 열어서  ,, popupWinLoad : function (popupAttr <- 펑션 네임이 조금씩 다른 버젼이 있는 듯 합니다.  저희 사이트는 CHEditor 5.04 버젼인데 ,, popupWinLoad : function (popupInfo)이렇게 되어 있더라구요..  수정자료 주신 글쓴이 님 것만 복붙 마시고
소스 찾아서 다른 부분만 수정 해주시면 됩니다.  저희 것은 아래처럼 수정해서 해결하였습니다.
너무 감사합니다.. 크롬,익스플로러 버젼 모두 됩니다... ^^

function (popupInfo)
iframe.setAttribute('src', self.config.popupPath + popupInfo['tmpl'] + "?v=noflash");


5.1버전인데
파일선택까지는 되는데 업로드 하면 로딩아이콘만 돌아가고
밑에 사진 업로드 취소나 확인 버튼도 작동하지 않습니다.
cheditor를 두 곳이나 쓰고 있는데 어찌해야 할지 막막하네요 ㅜ
확실히 파일업로드 후 반환값이 맞지 않아서,
자바스크립트 에러가 난 것 같은데요. (버튼이 안먹히는 것도 이런 이유)

이것도 테스트 해 볼 주소가 있어야 할 것 같아요.

파일선택이 된다면 팝업문제는 아닌듯하고,
파일 업로드를 처리해주는 upload.php와 그 반환값을 살펴봐야할 것 같은데

크롬에서 f12로 콘솔 에러 메시지를 한번 확인해보시고,
실제로 파일이 업로드가 되는지도 확인해보세요.
포인트가 모자라 쪽지발송이 안되네요..
아래 게시판 링크 드립니다
http://lanoviastyle.com/bbs/write.php?bo_table=test
정말 고맙습니다ㅜㅜ
답변을 계속 달았더니 입력창이 작아지네요;;

먼저 image.html 에서

<div id="oFlashButton"></div> 이부분을
<div id="oFlashButton" style="display:inline-block"></div> 이렇게 바꾸세요.

그다음에, image.js 파일에 function noFlashUpload() 이부분
안의 내용을 보시면 dataType: "text", <-- 이부분이 있을건데요.
dataType: "json", 으로 한번 고쳐보세요.

이건 제가 테스트를 못해서 확실하진 않은데 위처럼 수정하고 결과 알려주세요.
캐시도 한번 지우시구요.
*** 개인정보보호를 위한 이메일주소 노출방지 *** 으로 /cheditor5/imageUpload/upload.php 파일 좀 보내주세요. 그리고 image.js 파일에서 swfobject.removeSWF(AppID); 검색하셔서 이 줄을 주석처리하세요.
저도 가는세월님과 상황이 똑같은거 같네요.  확인 버튼을 클릭하면 이미지는 들어가 있는데 팝업창은 사라지지않고 취소도 안되고...

이미지는 올라가는데, 이미지가 팝업창에선 안보이지만, 내용엔 올라가네요
이미지는 이제 올라가는데.. 저는 아는게 하나도 없어서 응용도 못하고 고대로 붙이라는거 붙이고 지우라는거만 지우고... 이미지가 확인 누르면 바로 올라가는게 아니고 취소 했다가 확인했다 해야 하지만 잘 올라가요 고맙습니다 !!! 여러군데 쓴거라.. 여러번 복습해보겠습니다 !
전체 1,776 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

진행중 포인트경매

  1. 참여3 회 시작21.01.19 10:50 종료21.01.24 10:50
  2. 참여31 회 시작21.01.16 18:00 종료21.01.23 18:00
  3. 참여17 회 시작21.01.16 12:00 종료21.01.23 12:00
  4. 참여46 회 시작21.01.15 12:00 종료21.01.22 12:00

(주)에스아이알소프트 (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT