그누보드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) 진행중
이렇게 하고 나면 버그가 하나 있는데 이미지 업로드 선택 한번 했다가
취소하고 다시 선택하면 안되는 버그가 있어요.
이건 좀 고민해보고 추가로 업데이트 하겠습니다.
(그래도 그럭저럭 쓸수는 있는 상태. 팝업창을 다시 닫았다가 하면 되긴 함)
!-->!-->!-->!-->!-->!-->!-->댓글 전체


그런데 질문이 익스플로러에서는 잘해결됬는데 크롬에선 기능이 작동이안되네요 ㅠ
버전이 5.09버전 입니다 !
QnA에 올리신 글 보고 해당 사이트 들어가서 해보니까 크롬도 나름 완벽하진 않아도 잘 되는 듯한데. 해결안되시면 쪽지 주셔도되요.
혹시 염치없지만.. 시간여유되시면 한번 체크부탁드려도 될까요
http://kndesign.rubi.co.kr/bbs/board.php?bo_table=01_04
형네 홈페이지가 문제생겨서 조금보고있는데 이쪽은아에 정보가없다보니 ㅎㅎ
부탁한번 드리겠습니다 !!!!
제컴퓨터에선 익스에선잘되는데 크롬이 먹통이라 ..
실제로 이미지를 에디터로 첨부해서 올렸구요.
크롬에서 캐시는 모두 한번 지운 상태였구요.
업로드 전에 로더(동글동글 돌아가는 이미지)는 안나오는데 조금 기다리면 업로드는 됩니다. 제가 올린 글은 삭제하셔도 됩니다.
음...안되는 이유가 대체 뭘까요;;
다른컴 크롬도다되는데 제메인컴만안되네요 캐시삭제를다했는데도...
아무래도 이상없이 잘 된듯합니다 ㅎㅎㅎㅎㅎㅎ
골머리아프던게 해결됬네요 고맙습니다 !!!
소스 찾아서 다른 부분만 수정 해주시면 됩니다. 저희 것은 아래처럼 수정해서 해결하였습니다.
너무 감사합니다.. 크롬,익스플로러 버젼 모두 됩니다... ^^
function (popupInfo)
iframe.setAttribute('src', self.config.popupPath + popupInfo['tmpl'] + "?v=noflash");
자바스크립트 에러가 난 것 같은데요. (버튼이 안먹히는 것도 이런 이유)
이것도 테스트 해 볼 주소가 있어야 할 것 같아요.
파일선택이 된다면 팝업문제는 아닌듯하고,
파일 업로드를 처리해주는 upload.php와 그 반환값을 살펴봐야할 것 같은데
크롬에서 f12로 콘솔 에러 메시지를 한번 확인해보시고,
실제로 파일이 업로드가 되는지도 확인해보세요.
선택만 해도 실지로 파일은 서버에 올라가 있습니다
쪽지 드릴게요
한번 봐주실수 있을지요
먼저 image.html 에서
<div id="oFlashButton"></div> 이부분을
<div id="oFlashButton" style="display:inline-block"></div> 이렇게 바꾸세요.
그다음에, image.js 파일에 function noFlashUpload() 이부분
안의 내용을 보시면 dataType: "text", <-- 이부분이 있을건데요.
dataType: "json", 으로 한번 고쳐보세요.
이건 제가 테스트를 못해서 확실하진 않은데 위처럼 수정하고 결과 알려주세요.
캐시도 한번 지우시구요.
사진 선택시
로딩아이콘은 없는데 엑박뜨고 버튼동작은 이전과 같습니다
근데 업로드창이 사라지지 않고 취소버튼이 안되네요

새해 벽두부터 플래시 때문에 난리네요..