포럼
Google Drive API를 이용하는 에디터 스킨
2014.05.04 16:47
http://www.xpressengine.com/webmasters/22704502
@foret님이 작성하신 위의글에 나와있는 google drive api예제를 에디터에 붙여봤습니다.
사용이 제한적이지만 더이상 진전이 없을꺼 같아서 여기서 포기하고 혹시 필요하신분이 계실까봐 공개합니다 ㅡ,.ㅡ
이 자료에는 아래의 문제가 있으니 확인하시고 사용하시기 바랍니다.
1. IE에서는 작동하지 않습니다. (크롬, 파폭에서 정상 동작 확인 했습니다)
2. 사용시 구글 로그인이 필요해서 계정 정보를 알고있는 google drive의 주인만 이용 가능합니다. (블로그(?) 형태의 운영???)
자료를 내려 받으신 후 ./modules/editor/skins/xpresseditor_gDrive에 설치하시고 에디터 스킨을 xpresseditor_gDrive로 선택하시면 됩니다.
우선 구글에 로그인 하신 후 Google Drive API를 활성화 시켜주시고 Client ID를 발급 받습니다.
Client ID를 발급받으실때는 Application type을 "Web application"을 선택하시면 됩니다.
Client ID형식은 xxxxxxxxxxx.apps.googleusercontent.com 입니다.
editor.html를 열어서 450 라인의 <CLIENT-ID>부분에 발급받은 Client ID를 입력합니다.
data-clientid="<CLIENT-ID>"
구글 드라이브에 접속 후 자료 저장용으로 사용할 폴더를 하나 생성합니다. 추후 에디터에서 파일을 업로드하면 이폴더 아래에 저장이 됩니다.
방금 만든 폴더를 오른클릭해서 공유버튼을 누릅니다.
액세스 권할 부분의 변경 버튼을 눌러서 "링크가 있는 모든 사용자가 볼 수 있습니다."로 변경 합니다.
위의 링크 부분에서 id=다음 부분이 필요하니 복사해 놓습니다.
js/upload.js를 열서서 84라인의 <FOLDER-ID>부분에 위에서 복사한 id값을 붙여넣습니다.
여기까지 하면 설정부분은 끝이 납니다.
'parents':[{'id':'<FOLDER-ID>'}] //공유폴더 id값
구글 로그인이 안된상태에서는 아래처럼 로그인 버튼이 보이며...
로그인이 이뤄지면 아래처럼 파일 첨부창이 보여지게 됩니다.
파일은 Drop영역에 끌어다 놓거나 버튼을 이용해서 업로드할 수 있습니다.
파일이 업로드된 후에는 아래쪽에 아이콘이 나타나며 이미지의 경우는 미리보기, 다른 파일일경우 대표아이콘이 표시됩니다.
이 아이콘을 클릭하면 본문에 삽입이 되며 이미지의 경우는 img태그, 그외 파일은 a태그 행태로 삽입이 됩니다.