소개
CKEditor에 링크를 "붙여넣기"하면 미리보기 카드 또는 임베드 코드로 "바로 변환"해줍니다.
아래의 설명은 링크 프리뷰 모듈 0.3.3 버전을 기준으로 작성 및 수정되었습니다. 기존에 비해 변경사항이 꽤 있습니다. 구 버전 사용자의 경우 보안 설정(외부 도메인, HTML class)에 주의하시기 바랍니다.
설치경로
./modules/preview
지원환경
- Rhymix 2.1.20
- PHP 7.4
- 크롬 버전 131.0.6778.205(공식 빌드) (64비트)
- CK에디터4(라이믹스 내장)
- 따라서 사용환경에 따라, 브라우저에 따라 이슈가 있을 수 있습니다.
라이선스
GPL v2
- 1. 보안 설정
- 2. CK에디터 플러그인 설치
- 3. 지원 사항 (미디어 임베딩 관련)
- 원활한 링크 변환을 위해 관리자 페이지에서 다음과 같은 설정이 필요합니다.
1) 에디터 > 공통 설정 > '플러그인 제거' 입력란에 iframe 을 기입
2) 설정 > 시스템 설정 > 보안 설정 > 외부 멀티미디어 허용 / HTML class 허용에 다음을 추가
외부 멀티미디어 허용 |
---|
www.4shared.com www.airbnb.co.kr music.amazon.com embed.music.apple.com embed.podcasts.apple.com archive.org player.audiop.naver.com bandcamp.com player.bilibili.com www.bilibili.com chzzk.naver.com codepen.io codesandbox.io geo.dailymotion.com discordapp.com www.facebook.com live.fc2.com video.fc2.com embed.figma.com embedr.flickr.com embed.gettyimages.com giphy.com books.google.com docs.google.com drive.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.ktv.go.kr www.mixcloud.com m.sports.naver.com tv.naver.com vibe.naver.com embed.nicovideo.jp live.nicovideo.jp assets.pinterest.com share.podbbang.com prezi.com v.qq.com www.redditmedia.com www.relive.cc news.sbs.co.kr static.cloud.sbs.co.kr slideshare.net www.slideshare.net vod.sooplive.co.kr w.soundcloud.com open.spotify.com streamable.com embed.ted.com t.me tenor.com threads.net www.tiktok.com embed.tumblr.com form.typeform.com tv.sohu.com play.tvcf.co.kr platform.twitter.com syndication.twitter.com www.udio.com player.vimeo.com player.youku.com www.youtube.com |
HTML class 허용 |
---|
media_embed_wrapper media_embed 4shared-embed-music 4shared-embed-video airbnb-embed amazon-music-album amazon-music-embed amazon-music-track apple-music-embed audio-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 giphy-embed giphy-embed-photo giphy-embed-video github-embed google-books-embed google-drive-embed google-forms-embed google-maps-embed imgur-embed imgur-embed-iframe-pub instagram-embed instagram-media instagram-media-rendered jjalbot-embed jsfiddle-embed kakao-map-embed mixcloud-embed ms-office-embed nate-embed nico-embed-live nico-embed-video pdf-embed pinterest-board pinterest-embed podbbang-embed podcasts-embed popkontv-embed preview_card_wrapper preview_card_link preview_card_text_container preview_card_title preview_card_desc preview_card_host progress reddit-embed relive-embed remote short_form soundcloud-embed spoon-embed spotify-embed suno-embed telegram-embed tenor-video-embed threads-embed tiktok-embed timer tumblr-embed tumblr-embed-loaded tumblr-post twitter-list twitter-profile twitter-status typeform-embed video-embed 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 |
1) https://ckeditor.com/cke4/addon/notification 에서 플러그인 다운로드
2) 압축 해제 후, 루트/common/js/plugins/ckeditor/ckeditor/plugins/notification 으로 업로드
3) '관리자 페이지 > 콘텐츠 > 에디터 > 공통 설정 > 추가 플러그인 로드'에 'notification'을 추가
본 모듈은 미디어 임베딩과 관련하여 다음과 서비스들을 지원합니다.
서비스 | 임베드 가능한 콘텐츠 형식 | 썸네일 | 안정성 |
---|---|---|---|
4shared | 비디오, 오디오 | 외부 | 높음 |
Airbnb | 숙소 정보 | 외부 | 높음 |
Amazon Music | 싱글, 앨범, 아티스트, 플레이리스트 | 외부 | 높음 |
Apple Music | 싱글, 앨범, 플레이리스트, 비디오, 라디오(로그인) | 외부 | 높음 |
Apple Podcasts | 팟캐스트 | 외부 | 높음 |
오디오 | mp3, flac, ogg 첨부 파일을 내장 플레이어로 재생 | 첨부 | 높음 |
오디오클립 | 오디오 | 외부 | 높음 |
AZQuotes | 이미지 | 첨부 | 높음 |
Bandcamp | 음악 | 외부 | 보통 |
Bilibili | vod, 방송 클립 | 첨부 | 보통 |
치지직 | 클립 영상 | 외부 | 높음 |
Codepen | 코드 | 외부 | 높음 |
Code Sandbox | 코드 | 외부 | 높음 |
Dailymotion | vod | 외부 | 높음 |
Discord | 초대 위젯 | 로고 | 높음 |
포스트, 비디오, 릴 | 첨부 | 보통 | |
FC2 | vod, 라이브 | 외부 | 높음 |
Figma | 디자인 | 외부 | 높음 |
Flickr | 포토, 갤러리, 비디오 | 외부 | 높음 |
Gettyimages | 포토 | 외부 | 높음 |
Giphy | gif, 비디오 | 외부 | 보통 |
Github | 일반 파일, Gist | 외부 | 중간 |
Google Books | 미리보기 | 외부 | 보통 |
Google Drive | 폴더, 파일, 드로잉, 슬라이드(프리젠테이션), 스프레드시트 | 첨부 | 보통 |
Google Forms | 설문지 | 외부 | 높음 |
Google Maps | 일반 지도, 위성 지도, 파노라마(=로드뷰) 지원 | 외부 | 보통 |
IMDb | vod | 외부 | 낮음 |
Imgru | 포토, 갤러리, 비디오 | 외부 | 낮음 |
포스트, TV, Reel | 첨부 | 높음 | |
Internet Archive | 비디오, 오디오, 책, 소프트웨어 소개, 이미지 | 외부 | 높음 |
IQiyi | vod + 자막 | 외부 | 높음 |
짤봇 | gif | 외부 | 높음 |
JSFiddle | 코드 | 로고 | 높음 |
카카오 TV | 비디오, 라이브, 숏폼, Daum 비디오 | 외부 | 높음 |
카카오 지도 | 일반 지도, 키워드 검색 결과, 로드뷰 | 외부 | 보통 |
KTV | 다시 보기 | 외부 | 보통 |
Mixcloud | 음악 | 외부 | 높음 |
MLB.com | 비디오 + 자막 | 외부 | 높음 |
MS Office | 첨부 파일 본문 삽입. doc(x), xls(x), ppt(x) | 첨부 | 높음 |
Nadio | 오디오 시리즈 | 외부 | 중간 |
네이트 | TV 클립, 뉴스 영상 | 첨부 | 중간 |
네이버 TV | 비디오, 라이브 | 외부 | 높음 |
네이버 VOD | 뉴스, 스포츠, e-스포츠, 라이브, 숏폼 | 외부 | 높음 |
네이버 Vibe | 음악 | 외부 | 높음 |
Niconico (ニコニコ) | 비디오, 라이브 | 외부 | 높음 |
핀, 보드, 프로필 | 외부 | 높음 | |
첨부 파일 본문 삽입. pdf | 첨부 | 높음 | |
팝콘TV | 클립 영상 | 외부 | 높음 |
Prezi | 프리젠테이션, 비디오 | 외부 | 높음 |
비디오 | 외부 | 보통 | |
포스트 | 외부 | 높음 | |
Relive | 비디오 | 외부 | 낮음 |
SBS | 라이브, 뉴스 삽입 영상, 다시보기, 클립 | 외부 | 보통 |
SlideShare | 프리젠테이션 | 외부 | 높음 |
Soop (숲) | 라이브(썸네일 첨부), VOD, 클립, 숏폼 | 외부 | 보통 |
SoundCloud | 음악 | 외부 | 높음 |
스푼 | 클립 오디오, 라이브 오디오 | 외부 | 높음 |
Spotify | 음악(미리듣기), 팟캐스트, 비디오 | 외부 | 높음 |
Suno | AI 음악 | 외부 | 높음 |
Streamable | 비디오 | 외부 | 높음 |
TED | 비디오 | 외부 | 높음 |
텔레그램 | 채널 메시지 | 첨부 | 높음 |
Tenor | gif | 외부 | 높음 |
Threads | 포스트 | 첨부 | 중간 |
Tiktok | 포스트 | 첨부 | 높음 |
Tudou | VOD | 외부 | 보통 |
Tumblr | 포스트 | 외부 | 높음 |
TV Sohu | VOD | 외부 | 높음 |
TVCF | 비디오 | 외부 | 높음 |
Typeform | 설문지 | 로고 | 높음 |
Udio | 음악 | 외부 | 높음 |
Video | mp4, webm 첨부 파일을 내장 플레이어로 재생 | 첨부 | 높음 |
Vimeo | 비디오 | 외부 | 높음 |
X.com / 트위터 | 포스트, 개인 타임라인 | 외부 | 보통 |
Youku | vod | 외부 | 보통 |
Youtube | 비디오, 쇼츠, 라이브 | 외부 | 높음 |