tinymce작업하면서 함께 만든 imgur uploder 플러그인 입니다.

imgur api를 이용해서 이미지를 imgur에 익명 업로드해주는 기능을 갖추고 있습니다.

설치 위치는 modules/editor/skins/tinymce/js/tinymce/plugins/pr_imgur 입니다.

설치 후 imgur.php파일을 열서서 5번째 라인에 imgur에서 발급받은 Client ID를 입력 해 주셔야 정상 작동합니다.

//imgur Client ID
$client_id = 'imgur Client ID';

 

그 후 에디터 설정에서 플러그인과 툴바에 pr_imgur를 추가 해 주세요.

참고, 저는 어두운 테마를 사용해서 흰색 아이콘을 사용했는데 icon폴더 살펴보시면 imgur.png이외에 imgur_dark.png가 들어있으니 밝은 스킨 사용하시는 분들은 imgur_dark.png의 이름을 imgur.png로 바꿔서 사용하세요.

 

pr_imgur.zip

 

Client ID발급 방법은 구글링등을 통해서 알아보시거나 오래전 제가 xe공홈에 제가 올렸던 글을 참고 하세요.

https://xe1.xpressengine.com/forum/22680941

 

이 플러그인은 Dropzone 라이브러리를 사용 했습니다.

http://www.dropzonejs.com/

 

Client ID가 민감한 부분이 아닌지 자바스크립트를 사용한 업로드 방법이 많이 사용되는거같은데 이번에는 php를 사용해서 구현 했습니다.

 

실행 모습

pr_imgur1.jpg

 

파일 추가 했을때 대기 화면

pr_imgur2.jpg

 

업로드 오류 발생시

pr_imgur3.jpg

 

정상적으로 업로드 완료 후 본문에 이미지를 삽입 하거나 삭제 할 수있습니다.

삭제는 imgur서버에서 해당 이미지를 삭제하는 기능 입니다. 업로드와 마찬가지로 약간의 요청 시간이 있을 수 있습니다.

pr_imgur4.jpg

 

삭제 버튼 눌렀을때 대기모습

pr_imgur5.jpg

Atachment
첨부
  • ?
    감사합니다~
  • ?
    imgur에서 이미지 유효기간이 있거나 그런건없나요?
    익명 사용시에 대해 이미지의 제약이 있다거나..
  • ? profile
    오래전에 제가 작성했던 댓글 참고 해 보세요.
    https://xe1.xpressengine.com/index.php?mid=forum&document_srl=22680941&cpage=1#comment_22681559
  • profile

    발급받은 Client ID 를 정확하게 어느 부분에 입력해야 하나요? ㅠㅠ

  • profile

    그리고 에디터 설정에서 플러그인과 툴바에 pr_imgur를 넣으라고하셨는데 에디터 설정 클릭하면 이렇게만 보여요

    bnbn.JPG

  • profile profile

    글의 서두에 설명한대로 $client_id = '여기에 넣으시면 됩니다';

  • profile profile
    이 자료는 tinymce용 플러그인 이라서 컴포넌트 화면에는 보이지 않습니다.
    tinymce의 editor.html을 열어서 plugins: [ 에 pr_imgur를 추가 하시면 됩니다.
    예)
    plugins: [
    '기존 플러그인 pr_imgur ',
    '기존 플러그인'
    ],

    그리고 툴바에 표시되도록 하는 방법은 제가 배포한 tinymce마지막 버전이라면 editor.html 50라인 근처 살펴보시면 $__Context->toolbar = 로 시작하는 툴바 정의 부분이 있습니다. pr_imgur 버튼이 나타나길 원하는 적당한 위치에 끼워 넣으시면 됩니다.
  • profile profile

    감사합니다!! 그런데 자세하게 알려주셔서 저는 쉽게(?) 시킨대로만 했는데 에러가 뜨는 이유는 뭘까요 ㅠㅠ 제가 진짜 초보이긴 한데 겉보기로는 다 성공해서 임구르 업로드 버튼을 클릭하면

    이런 에러창이 떠요. 설명하기 복잡하시다면 안해주셔도 되요 죄송해서 흑

     

    bnbnn.JPG

     

    참고로 플러그인 이렇게 그대로 써넣었어요.... 이거 맞...ㄴㅏ...여 ?

     

    bnbnz.JPG

  • profile profile
    오류를 보니 include에 문제가 있는거 같네요... dropzone.php를 열어서
    두번째 줄 '/config/config.inc.php'부분을
    '/xe/config/config.inc.php'로 수정 해보세요.
  • profile profile

    감사합니다 오류는 사라졌는데요 이번엔 아예 백지로 뜹니다. 아무것도 클릭이 되지 않고 프레임 소스를 확인해봐도 백지로 떠있어요. 홈페이지 주소가 피씨 버전에서만 고정 되어 있는데 실제 주소는 /xe 이게 붙긴 붙거든요? 이것때문인걸까요? 어디를 건드려야할지 막막해서 자꾸 여쭤보게 되빈다. ㅠㅠ  제가 조금이라도 알면 혼자서 계속 해보겠는데 아예 모르겠으니까 ㅠㅠ 그래도 친절히 알려주셔서 감사합니다. 시간나실때 할일없으실때 천천히 답댓글 달아주셔도 됩니다. 일주일 후에 댓글 달아주셔도 되니까 저를 버리지만 말아주세여....

    bnbn.JPG

     

     

    브라우저에서 직접 소스 보기를 해도 이렇게 백지로 뜹니다

    bnbn2.JPG

     

     

  • profile profile
    아마도 HTTP_REFERER체크하는 부분에서 문제가 생긴것처럼 보이네요. 혹시 xe설정에서 기본url설정은 하셨지요?
  • profile profile
    네 기본 url은 http://홈주소/xe로 되어있습니다.
    피시에서는 xe는 안보이고 그냥 도메인만 보이도록 고정되어있어요.
    서버포트 지정은 안되어있ㅅ숩니다
  • profile profile
    dropzone.php의 6~9라인이 해당 부분입니다. 해당 if문을 코멘트처리하고 실행 해 보세요.
  • profile profile
    문단마다 # 도 달아보고
    /*
    */
    도 붙여봤는데 그대로예요. 무상으로 자꾸 여쭤보기 죄송한데 ㅠㅠ 혹시 의뢰도 받으시나요?
  • profile profile
    제가 살펴볼 수 있는 url을 알려주세요. 공개 곤란하시다면 쪽지 주셔도 되구요.
  • profile
    열심히 따라해서 결국 성공했습니다! 덕분에 ㅠㅠ 염원하던걸 이루네요 ㅠ_ㅠ 좋은 팁 & 자료 공유 감사합니다!
  • ?
    좋은 자료 감사합니다. 이미지만 가능한가봐요? 기타 파일(토렌트,psd) 등은 업로드가 안되네요 ㅠ 이미지는 imgur 통해 다른 파일은 기존으로 업로드 할 수 있도록은 불가능한가요 ?
  • ?
    와! 진짜 감사합니다 ㅠㅠ