소개
CKEditor에 미디어 사이트의 링크를 '붙여넣기'하면 임베드 코드로 '바로 변환' 시켜주는 애드온
설치경로
/addons/media_embed
지원환경
- Rhymix 2.0.12
- PHP 7.4
- 크롬 버전 89.0.4389.114(공식 빌드) (64비트)
- CK에디터4(라이믹스 내장)
- 따라서 사용환경에 따라, 브라우저에 따라 이슈가 있을 수 있습니다.
라이선스
GPL v2
1. 보안 설정
- 원활한 임베딩을 위해 관리자 페이지에서 다음과 같은 설정이 필요합니다.
1) 설정 > 시스템 설정 > 보안 설정 > 외부 멀티미디어 허용에 다음을 추가
www.airbnb.co.krm.afreecatv.complay.afreecatv.comvod.afreecatv.comread.amazon.commusic.amazon.comembed.music.apple.complayer.audiop.naver.combandcamp.complayer.bilibili.comcodepen.iocodesandbox.iowww.dailymotion.comdiscordapp.comwww.ellentube.comshare.ellentube.comwww.facebook.comlive.fc2.comvideo.fc2.comembedr.flickr.comembed.gettyimages.commedia.gettyimages.comgfycat.comgiphy.combooks.google.comwww.imdb.comimgur.comwww.instagram.comem.iq.comjjalbot.comjsfiddle.nettv.kakao.complay-tv.kakao.comwww.mixcloud.comm.sports.naver.comview.shoppinglive.naver.comtv.naver.comvibe.naver.comembed.nicovideo.jplive.nicovideo.jpshare.podbbang.comprezi.comv.qq.comwww.redditmedia.comwww.relive.ccslideshare.netwww.slideshare.netw.soundcloud.comopen.spotify.comstreamable.comembed.ted.comtenor.comwww.tiktok.comembed.tumblr.comtv.sohu.complay.tvcf.co.krclips.twitch.tvplayer.twitch.tvplatform.twitter.complayer.vimeo.comvlive.tvplayer.youku.comwww.youtube.com |
2) 설정 > 시스템 설정 > 보안 설정 > HTML class에 다음을 추가
media_embed_wrappermedia_embedairbnb-embedamazon-book-embedamazon-music-albumamazon-music-embedamazon-music-trackapple-music-embedaudioclip-embedazquotes-embedbandcamp-embedbarcodepen-embedcodesandbox-embeddiscord-embedextrafb_iframe_widgetfb_iframe_widget_fluid_desktopfb-postfb-videofb-xfbml-parse-ignoreflickr-embedflickr-embed-videogettyimage-embedgfycat-embedgfycat-embed-groupgfycat-embed-singlegiphy-embedgiphy-embed-photogiphy-embed-videogoogle-books-embedimgur-embedimgur-embed-iframe-pubinstagram-embedinstagram-mediainstagram-media-renderedjjalbot-embedjsfiddle-embedmixcloud-embednico-embed-livenico-embed-videopinterest-boardpinterest-embedpinterest-pinpinterest-profilepodbbang-embedprogressreddit-embedrelive-embedremotesoundcloud-embedspotify-embedtenor-video-embedtiktok-embedtimertumblr-embedtumblr-embed-loadedtumblr-posttwitter-listtwitter-profiletwitter-statustwitter-timelinetwitter-tweetvolumewikipedia-embedxi-barsxi-expand-squarexi-pause-oxi-playxi-refresh-lxi-repeatxi-shufflexi-step-backward-oxi-step-forward-oxi-volume-maxxi-volume-midxi-volume-minxi-volume-offyoutube-musicyoutube-music-controlsyoutube-music-descyoutube-music-table-wrapperyoutube-shorts |
3) 에디터 > 공통 설정 > '플러그인 제거' 입력란에 iframe 을 기입
2. CK에디터 플러그인 설치
1) https://ckeditor.com/cke4/addon/notification 에서 플러그인 다운로드
2) 압축 해제 후, 루트/common/js/plugins/ckeditor/ckeditor/plugins/notification 으로 업로드
3) '관리자 페이지 > 콘텐츠 > 에디터 > 공통 설정 > 추가 플러그인 로드'에 'notification'을 추가
3. 지원 사항
본 애드온은 미디어 임베딩과 관련하여 다음과 같은 사항을 지원합니다.
| 서비스 | 비고 | 썸네일 | 안정성 |
|---|---|---|---|
| 아프리카TV | vod, 라이브 | 썸네일 | 높음 |
| Airbnb | 숙소, 체험 | 높음 | |
| Amazon BOOK | 킨들 프리뷰 | 썸네일 | 높음 |
| Amazon MUSIC | 싱글, 앨범, 아티스트, 플레이리스트 | 썸네일 | 높음 |
| Apple MUSIC | 싱글, 앨범, 플레이리스트, 비디오, 라디오(로그인) | 썸네일 | 높음 |
| 오디오클립 | 오디오 | 썸네일 | 높음 |
| AZQuotes | 이미지 | 썸네일 | 높음 |
| Bandcamp | 음악 | 썸네일 | 보통 |
| Bilibili | vod, 방송 클립 | 썸네일 | 보통 |
| Codepen | 코드 | 썸네일 | 높음 |
| Code Sandbox | 코드 | 썸네일 | 높음 |
| Dailymotion | vod | 썸네일 | 높음 |
| 다음 VOD | 뉴스, 스포츠, 연예, 영화 트레일러, 자동차 | 썸네일 | 높음 |
| Discord | 초대 위젯 | 높음 | |
| Ellentube | 방송 클립 | 썸네일 | 보통 |
| 포스트, 비디오 | 보통 | ||
| FC2 | vod, 라이브 | 썸네일 | 높음 |
| Flickr | 포토, 갤러리, 비디오 | 썸네일 | 보통 |
| Gettyimages | 포토, 비디오 | 썸네일 | 높음 |
| Gfycat | gif, 비디오 | 썸네일 | 보통 |
| Giphy | gif, 비디오 | 썸네일 | 보통 |
| Google BOOKS | 미리보기 | 썸네일 | 보통 |
| IMDb | vod | 썸네일 | 낮음 |
| Imgru | 포토, 갤러리, 비디오 | 썸네일 | 낮음 |
| 포스트, TV, Reel | 높음 | ||
| IQiyi | vod + 자막 | 썸네일 | 높음 |
| 짤봇 | gif | 썸네일 | 보통 |
| JSFiddle | 코드 | 보통 | |
| 카카오TV | 비디오, 라이브, 숏 | 썸네일 | 높음 |
| Mixcloud | 음악 | 썸네일 | 높음 |
| MLB.com | 비디오 + 자막 | 썸네일 | 보통 |
| 네이버TV | 비디오, 라이브 | 썸네일 | 보통 |
| 네이버VOD | 뉴스, 스포츠, e-스포츠, 영화트레일러, 라이브, 쇼핑라이 | 썸네일 | 보통 |
| 네이버Vibe | 음악 | 썸네일 | 보통 |
| Niconico (ニコニコ) | 비디오, 라이브 | 썸네일 | 보통 |
| 핀, 보드, 프로필 | 썸네일 | 높음 | |
| Podbbang | 팟캐스트 | 썸네일 | 보통 |
| Prezi | 프리젠테이션, 비디오 | 썸네일 | 보통 |
| 비디오 | 일부 | 낮음 | |
| 포스트 | 일부 | 높음 | |
| Relive | 비디오 | 썸네일 | 낮음 |
| SlideShare | 프리젠테이션 | 썸네일 | 높음 |
| SoundCloud | 음악 | 썸네일 | 높음 |
| Spotify | 음막(미리듣기) | 썸네일 | 높음 |
| Streamable | 비디오 | 썸네일 | 높음 |
| TED | 비디오 | 썸네일 | 높음 |
| Tenor | gif | 썸네일 | 낮음 |
| Tiktok | 포스트 | 썸네일 | 보통 |
| Tudou | vod | 썸네일 | 낮음 |
| Tumblr | 포스트 지원 | 썸네일 | 보통 |
| TV Sohu | vod | 썸네일 | 보통 |
| TVCF | 비디오 | 썸네일 | 높음 |
| Twitch | vod, 라이브 | 썸네일 | 낮음 |
| 포스트, 개인 타임라인, 리스트 | 보통 | ||
| Vimeo | 비디오 | 썸네일 | 높음 |
| Vlive | vod | 썸네일 | 낮음 |
| Wikipedia | 문서 | 썸네일 | 보통 |
| Youku | vod | 썸네일 | 낮음 |
| Youtube | 비디오, 쇼츠, 뮤직 | 썸네일 | 보통 |