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

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

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

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

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

[code]

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

[/code]

/cheditor5/popup/js/image.js에서 플래시 버튼 생성부분 주석처리
function initEvent <--를 검색하시면 나오는데 거기 안의 내용을 모두 주석처리

(function initEvent() { }는 남겨야함. 함수까지 이름까지 주석처리 하지 마세요.)
swfobject.removeSWF(AppID); <-- 검색해서 나오면 모두(두어개 있습니다.) 주석처리

없으면 그냥 패스

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

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

[code]

<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>
-->

[/code]

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

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

[code]

<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>

[/code]

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

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

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

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

[code]

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);
            }
        });
    }
}

[/code]

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

[code]

// 이렇게 되어있으면 옛날 버전이니까 그대로 넘어가구요.

$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]);

[/code]

5) 이미지 삭제하기

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

function imageDelete --> 이걸 검색해서

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

[code]

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);
        }
    });
}

[/code]

일단 여기까지. 

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

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

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

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

[code]
// 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=아무글자");

[/code]

7) 다 잘되는데 DB에 인서트시 이미지 태그가 사라져 버리는 경우. 아래 부분을 수정해보세요.

에디터가 들어가는 스킨, 예를 들어 /skin/board/basic/... 이런 식이라면
write.skin.php 의 아래 부분에 fwrite_submit() 함수가 있을거에요.

아래 처럼 echo cheditor3('wr_content'); 가 내용 체크 보다 먼저 나오면

[code]
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;
        }
    }
    // 생략...
}
[/code]

아래 처럼 순서를 한번 바꿔보세요.

[code]
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');
    ?>
    // 생략...
}
[/code]