그누보드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 <--를 검색하시면 나오는데 거기 안의 내용을 모두 주석처리
(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) 다 잘되는데 DB에 인서트시 이미지 태그가 사라져 버리는 경우. 아래 부분을 수정해보세요.
에디터가 들어가는 스킨, 예를 들어 /skin/board/basic/... 이런 식이라면
write.skin.php 의 아래 부분에 fwrite_submit() 함수가 있을거에요.
아래 처럼 echo cheditor3('wr_content'); 가 내용 체크 보다 먼저 나오면
function fwrite_submit(f)
{
// 생략...
<?
if ($is_dhtml_editor) echo cheditor3('wr_content');
?>
if (document.getElementById('tx_wr_content')) {
if (!ed_wr_content.outputBodyText()) {
alert('내용을 입력하십시오.');
ed_wr_content.returnFalse();
return false;
}
}
// 생략...
}
아래 처럼 순서를 한번 바꿔보세요.
function fwrite_submit(f)
{
// 생략...
if (document.getElementById('tx_wr_content')) {
if (!ed_wr_content.outputBodyText()) {
alert('내용을 입력하십시오.');
ed_wr_content.returnFalse();
return false;
}
}
<?
if ($is_dhtml_editor) echo cheditor3('wr_content');
?>
// 생략...
}
!-->!-->!-->!-->!-->!-->!-->!-->!-->
21
댓글 77개
그런데 질문이 익스플로러에서는 잘해결됬는데 크롬에선 기능이 작동이안되네요 ㅠ
버전이 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");
5.1버전인데
파일선택까지는 되는데 업로드 하면 로딩아이콘만 돌아가고
밑에 사진 업로드 취소나 확인 버튼도 작동하지 않습니다.
cheditor를 두 곳이나 쓰고 있는데 어찌해야 할지 막막하네요 ㅜ
자바스크립트 에러가 난 것 같은데요. (버튼이 안먹히는 것도 이런 이유)
이것도 테스트 해 볼 주소가 있어야 할 것 같아요.
파일선택이 된다면 팝업문제는 아닌듯하고,
파일 업로드를 처리해주는 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", 으로 한번 고쳐보세요.
이건 제가 테스트를 못해서 확실하진 않은데 위처럼 수정하고 결과 알려주세요.
캐시도 한번 지우시구요.
사진 선택시
로딩아이콘은 없는데 엑박뜨고 버튼동작은 이전과 같습니다
근데 업로드창이 사라지지 않고 취소버튼이 안되네요
이미지는 올라가는데, 이미지가 팝업창에선 안보이지만, 내용엔 올라가네요
새해 벽두부터 플래시 때문에 난리네요..
다 되는데 한가지 안되는 부분이 있어서요
익스 크롬 둘다
사진추가해서 업로드까지 되는데 아래 확인버튼을 클릭하면
내용에 이미지가 삽입되는데 사진추가할때 뜨는 pop가 닫히질않아요
취소버튼도 클릭하면 "추가하신 사진이 있습니다 어쩌구" 확인을 하면
pop에 사진만 삭제되고 역시나 pop 창이 사라지지않는 현상이 있어요
그 외에는 잘 돌아갑니다
cheditor5.1 버전입니다
다시한번 살펴봐주시면 고맙겠습니다
AppID 줄 주석하니 동작하네요
function popupClose() {
// ----------------------------------------------------------------------------------
//swfobject.removeSWF(AppID);
oEditor.popupWinCancel();
}
다시 잘 살펴보라고 하셔서 ㅎㅎㅎ 고맙습니다
function initEvent() {} 이것도 놓치고 지나갓었네요
그런데 한가지 문제가 있습니다.
일반 게시판에서는 썸네일이 생성될 필요가 없어 글이 정상적으로 보여지지만
갤러리 게시판에서 에디터 이미지 첨부 사용시 썸네일 생성이 안됩니다.
게다가 파일첨부로 첨부한 이미지도 썸네일이 생성이 안되 엑박으로 보여지거나 noimg가 뜨네요..ㅠㅠ
1) 업로드시 /cheditor5/imageUpload/upload.php 에서 만들거나,
2) 목록을 불러올때 썸네일이 필요하면 만드는 방식이거나 두개중 하나인데,
이건 위에 올려드린 파일을 업로드하는 것과 좀 무관해서 저도 어떻게 도와드려야할지 모르겠네요. 워낙 다양한 방법이 있어서요.
아무래도 QnA 게시판을 통해서 해결하시는게 좋을 것 같습니다.
알려주신 방법으로 익스프로러는 잘됩니다.
근데 저도 크롬이 조금 문제가있습니다.ㅠ
크롬에서 에디터까지 이미지 첨부는 잘되요.(서버에도 이미지 업로드까진 잘됐습니다.)
근데 최종 저장 누르고 실제 내용에 들어가보면 조회가 되지않습니다.
에디터에 올라간 editor내용이 db처리하는 인서트 페이지까지 전달 되지가 않습니다.
어떤쪽을 봐야할까요?ㅠㅠ
감사합니다.
이게 일종의 임시조치로 사용하시라고 올린거라서요.(지금은 그 내용이 빠졌네요.)
여건이 되시는 분들은 사이트 개편이나 에디터 변경을 기대하는데 각자의 사정이 있어서 어찌될련지는 모르겠네요.
다음에 올릴 기회가 있으면 참고하도록 하겠습니다. 좋은 의견 감사드립니다.
Jquery 이슈도 문제가 되는듯 합니다. 예를 들어 저같은 경우 $ 를 인식을 못해 개발자 도구 에서 에러가 무수히 나오는 현상과 함께 홈페이지 관리자모드에서 일부기능이 안되는 현상이 있어서 3일간 에러를 하나하나 연구해본 결과,, 기존에 잘 사용되었던 기능들이 안되는 현상이 있어서 공유하고자 합니다..
F12 눌러서 에러가 무수히 많다고 하면 우선 확인하셔야 할 것이 제이쿼리 선언에
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 되어야 할 것이
<script src="//code.jquery.com/jquery-1.7.2.min.js"></script> 이렇게 되어 있거나
$(".li-link").on("click", function() 이렇게 $로 잘 되던 것이 갑자기 .on 을 읽을 수 없다던가 하는 오류를 표시하게 됩니다..
이때 일일히 $ 표시를 jquery 로 바꿔 주시면 노가다를 하지 마시고
<script type="text/javascript"> 여기 표시 아래 (function($) { 이거 넣으시고 </script>
위에다 })(jQuery); 이렇게 넣으시면 $ -> jQuery 치환이 되니 문제해결을 했습니다.
아울러 소스분석 결과 js 또는 js2 폴더 네에 common.js 파일을 열어보면 940 라인쯤에
flash_ex_content_set(); 이놈이 있을꺼에요.. 막으시고 거기 아래 보시면
function flash_ex_content_set() 요것이 있을 텐데 해당펑션을 모두 막으시기 바랍니다..
개발자 도구에서 계속 오류나 경고표시를 하게 됩니다.
암튼 초보자가 겪는 어려움에 조금이라도 도움이 되고자.. 제 경험을 올립니다.
수고하세요~
두번을 찬찬히 읽어보고 해보니 바로 작동합니다.
그런데, 혹시 Popup창에서 위에 분처럼... 작은 이미지가 안 보이는데...(다른 버튼은 정상작동, 등록도 되고)
작은 이미지를 보게 할 수 있는 방법이 있을까요?
쪽지 보내드렸는데 ftp정보를 안보냈어요.
포인트부족해서 쪽지도 더 못보내요..
봐 주실수 있으시면 *** 개인정보보호를 위한 이메일주소 노출방지 ***으로 메일 보내주세요.
ftp정보 보내드릴게요
다시 부탁드립니다.
image.html 파일을 열어
여기를 주석처리하고
<!--
<script src="js/swfobject.js" type="text/javascript"></script>
<script src="js/image_upload_flash.js" type="text/javascript"></script>
-->
이걸 추가하고
<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/dialog.js?v=아무글자" type="text/javascript"></script>
<script src="js/image.js?v=아무글자" type="text/javascript"></script>
최종적으로 image.html 내용을 아래와 같이 변경했더니 "사진추가" 버튼 클릭이 되더라구요^^
<script src="//code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="js/dialog.js?v=아무글자" type="text/javascript"></script>
<script src="js/image.js?v=아무글자" type="text/javascript"></script>
잘 해결하였습니다.
엣지,익스11,크롬 모두 잘 됩니다.
고맙습니다.!!
역시 방법이 있었네요 - 오랫동안 고민이었던것 해결했습니다
감사합니다~
감사히 잘 해결했습니다.