조회 수 624 추천 수 0 댓글 0

소개

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.kr
m.afreecatv.com
play.afreecatv.com
vod.afreecatv.com
read.amazon.com
music.amazon.com
embed.music.apple.com
player.audiop.naver.com
bandcamp.com
player.bilibili.com
codepen.io
codesandbox.io
www.dailymotion.com
discordapp.com
www.ellentube.com
share.ellentube.com
www.facebook.com
live.fc2.com
video.fc2.com
embedr.flickr.com
embed.gettyimages.com
media.gettyimages.com
gfycat.com
giphy.com
books.google.com
www.imdb.com
imgur.com
www.instagram.com
em.iq.com
jjalbot.com
jsfiddle.net
tv.kakao.com
play-tv.kakao.com
www.mixcloud.com
m.sports.naver.com
view.shoppinglive.naver.com
tv.naver.com
vibe.naver.com
embed.nicovideo.jp
live.nicovideo.jp
share.podbbang.com
prezi.com
v.qq.com
www.redditmedia.com
www.relive.cc
slideshare.net
www.slideshare.net
w.soundcloud.com
open.spotify.com
streamable.com
embed.ted.com
tenor.com
www.tiktok.com
embed.tumblr.com
tv.sohu.com
play.tvcf.co.kr
clips.twitch.tv
player.twitch.tv
platform.twitter.com
player.vimeo.com
vlive.tv
player.youku.com
www.youtube.com

 

 

2) 설정 > 시스템 설정 > 보안 설정 > HTML class에 다음을 추가

media_embed_wrapper
media_embed
airbnb-embed
amazon-book-embed
amazon-music-album
amazon-music-embed
amazon-music-track
apple-music-embed
audioclip-embed
azquotes-embed
bandcamp-embed
bar
codepen-embed
codesandbox-embed
discord-embed
extra
fb_iframe_widget
fb_iframe_widget_fluid_desktop
fb-post
fb-video
fb-xfbml-parse-ignore
flickr-embed
flickr-embed-video
gettyimage-embed
gfycat-embed
gfycat-embed-group
gfycat-embed-single
giphy-embed
giphy-embed-photo
giphy-embed-video
google-books-embed
imgur-embed
imgur-embed-iframe-pub
instagram-embed
instagram-media
instagram-media-rendered
jjalbot-embed
jsfiddle-embed
mixcloud-embed
nico-embed-live
nico-embed-video
pinterest-board
pinterest-embed
pinterest-pin
pinterest-profile
podbbang-embed
progress
reddit-embed
relive-embed
remote
soundcloud-embed
spotify-embed
tenor-video-embed
tiktok-embed
timer
tumblr-embed
tumblr-embed-loaded
tumblr-post
twitter-list
twitter-profile
twitter-status
twitter-timeline
twitter-tweet
volume
wikipedia-embed
xi-bars
xi-expand-square
xi-pause-o
xi-play
xi-refresh-l
xi-repeat
xi-shuffle
xi-step-backward-o
xi-step-forward-o
xi-volume-max
xi-volume-mid
xi-volume-min
xi-volume-off
youtube-music
youtube-music-controls
youtube-music-desc
youtube-music-table-wrapper
youtube-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 방송 클립 썸네일 보통
Facebook 포스트, 비디오   보통
FC2 vod, 라이브 썸네일 높음
Flickr 포토, 갤러리, 비디오 썸네일 보통
Gettyimages 포토, 비디오 썸네일 높음
Gfycat gif, 비디오 썸네일 보통
Giphy gif, 비디오 썸네일 보통
Google BOOKS 미리보기 썸네일 보통
IMDb vod 썸네일 낮음
Imgru 포토, 갤러리, 비디오 썸네일 낮음
Instagram 포스트, TV, Reel   높음
IQiyi vod + 자막 썸네일 높음
짤봇 gif 썸네일 보통
JSFiddle 코드   보통
카카오TV 비디오, 라이브, 숏 썸네일 높음
Mixcloud 음악 썸네일 높음
MLB.com 비디오 + 자막 썸네일 보통
네이버TV 비디오, 라이브 썸네일 보통
네이버VOD 뉴스, 스포츠, e-스포츠, 영화트레일러, 라이브, 쇼핑라이 썸네일 보통
네이버Vibe 음악 썸네일 보통
Niconico (ニコニコ) 비디오, 라이브 썸네일 보통
Pinterest 핀, 보드, 프로필 썸네일 높음
Podbbang 팟캐스트 썸네일 보통
Prezi 프리젠테이션, 비디오 썸네일 보통
QQ 비디오 일부 낮음
Reddit 포스트 일부 높음
Relive 비디오 썸네일 낮음
SlideShare 프리젠테이션 썸네일 높음
SoundCloud 음악 썸네일 높음
Spotify 음막(미리듣기) 썸네일 높음
Streamable 비디오 썸네일 높음
TED 비디오 썸네일 높음
Tenor gif 썸네일 낮음
Tiktok 포스트 썸네일 보통
Tudou vod 썸네일 낮음
Tumblr 포스트 지원 썸네일 보통
TV Sohu vod 썸네일 보통
TVCF 비디오 썸네일 높음
Twitch vod, 라이브 썸네일 낮음
Twitter 포스트, 개인 타임라인, 리스트   보통
Vimeo 비디오 썸네일 높음
Vlive vod 썸네일 낮음
Wikipedia 문서 썸네일 보통
Youku vod 썸네일 낮음
Youtube 비디오, 쇼츠, 뮤직 썸네일 보통