개발자.. 너란놈..

Webpack을 사용하여 이미지를 경로에 넣으려면 webpack.config.js를 수정하지 않으면 넣기가 어렵습니다.

아래와 같이 2가지를 추가해주고 소스 상에서는 alias로 되어있는 부분으로 이미지를 가져와서 사용하면 됩니다.

아래는 사용 하는 방법 입니다.

전에 ckeditor에서 base64image를 plugin 추가 하는 방법에 대해서 알아 봤습니다.

https://1061025.tistory.com/200

다만 이대로 그냥 사용한다면, 큰 사이즈의 이미지를 추가했을 때 이미지의 가로 , 세로 크기에 따라서 들어가기 때문에

pc에서 및 모바일에서 완전 깨지게 됩니다.

그래서 아래와 같이 width:100% , height: auto 처리를 해주어야 하는데 이런 경우에는 아래와 같이 플러그인을 변경 해주어야지만 반응형 처리를 할 수 있습니다.

이렇게 했을 경우 반응형 처리를 가능하게끔 수정 할 수 있기 때문에 고정값으로 표기가 되지 않습니다.

반응형을 고려하여 ckeditor base64image를 사용하려는 모든이들에게 도움이 되었으면 좋겠습니다 :D

Ckeditor 4를 사용 시 이미지를 적용하는 방법이 2가지가 있습니다.

가본으로 백단에 이미지를 filebrowserUploadUrl를 통하여 서버 단에서서 업로들 하는 방법

base64image를 사용하여 이미지를 등록 하는 방법입니다.

Ckeditor 5에서는 기본적으로 base64image를 사용 할 수 있는 것으로 알고 있지만 저 같은 경우는 무료 에디터를 상용으로 사용해야 됐기 때문에 plugin을 적용 해야 됐습니다.

ckeditor의 plugin은 아래 링크에서 다운 받을 수 있습니다.

https://ckeditor.com/cke4/addons/plugins/all

base64image의 경우 아래 링크에서 받을 수 있습니다.

https://ckeditor.com/cke4/addon/base64image

plugin 같은 경우는 ckeditor에 plugin 폴더가 따로 있습니다.

방금 다운로드 한 base64image 폴더를 이름 변경하여 적용 하여주세요

적용 후 CkEditor에 확장 플러그인을 아래와 같이 호출하여 적용 할 수 있습니다.

아래와 같이 ckeditor에 그림이 저장 되는 것을 확인 할 수 있습니다.

다음은 base64image를 넣었을 때 PC와 모바일의 반응형 작업은 어떻게 해야되는 지 알아보겠습니다. 

파일 다운로드 로직을 만들었을때 Return File을 사용하여 브라우저에서 다운로드를 받을 수 있게 만들었었다.

이번 프로젝트에서도 파일 다운로드 로직이 있었고 기존대로 사용하였는데 문제가 발생 하였다.

이미지로 데이터 화 시켜서 올렸을 때 '아이폰' 에서는 Content Type에 따라서 확장자가 변경되어 저장이 되고 있었다.

실제로 사용하던 Return 형태

return File(파일명, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", 다운로드 받을 때 파일명);

Content Type을 보면 알겠지만 예전에 엑셀 파일을 다운로드 받을 때 사용했었던 Excel Content Type 이였는데

브라우저에서 받을 때 혹은 안드로이드에서 받을 때는 문제가 되지 않았다.

다만 아이폰에서 받았을 때 이미지 파일임에도 불구하고 뒤에 .xlsx가 붙어서 다운로드가 되었다.

이미지 형태로 여러가지 받아야 하는 상황이여서 파일이 유동적으로 변하기 때문에 골치 아팠다.

File 매개변수는 무조건 파일명과 Content Type을 입력해야했기 떄문에 자체적으로 판단하여 파일이 다운로드 됐으면 했는데 아래와 같은 방법으로 해결하였다.

return File(파일명, "application/octet-stream", 다운로드 시 파일명);

현재 파일 다운로드 로직 상 bmp , jpg , jpeg , jpe , jfif , tif , tiff , png 해당 확장자만 저장 되게끔 사용되고 있어서 

해당 확장자들은 정상적으로 다운로드 되는 것 까지 확인 하였다.

안녕하세요

오랜만에 글을 적으러 왔습니다.

프로젝트 로컬에 이미지가 있는지 여부를 확인 해야되는 상황이 있었는데 아래와 같은 코드로 

확인 후 Boolean 처리로 할 수 있는걸 알게 되어서 정리 합니다.

이미지뿐만 아니라 다른 파일들도 가능 할 것으로 보입니다.

//이미지 여부 체크
function fnImgChk(url) {

    var vResult;

    $.ajax({
        url: url,
        type: 'HEAD',
        async: false,
        success: function () {
            vResult = true;
        },
        error: function () {
            vResult = false;
        }
    });

    return vResult;
}