조회 수 958 추천 수 0 댓글 0

소개

CKEditor에 링크를 "붙여넣기"하면 미리보기 카드 또는 임베드 코드로 "바로 변환"해줍니다.

아래의 설명은 링크 프리뷰 모듈 0.1.0 버전을 기준으로 작성 및 수정되었습니다. 기존에 비해 변경사항이 꽤 있습니다. 구 버전 사용자의 경우 보안 설정(외부 도메인, HTML class)에 주의하시기 바랍니다.

 

설치경로

./modules/preview

 

지원환경

- Rhymix 2.1.20
- PHP 7.4
- 크롬 버전 131.0.6778.205(공식 빌드) (64비트)
- CK에디터4(라이믹스 내장)

따라서 사용환경에 따라, 브라우저에 따라 이슈가 있을 수 있습니다.

 

라이선스

GPL v2

 

 

1. 보안 설정

- 원활한 링크 변환을 위해 관리자 페이지에서 다음과 같은 설정이 필요합니다.

 

1) 설정 > 시스템 설정 > 보안 설정 > 외부 멀티미디어 허용에 다음을 추가

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

 

 

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

media_embed_wrapper
media_embed
airbnb-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
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
spooncast-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
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. 지원 사항 (미디어 임베딩 관련)

 

본 모듈은 미디어 임베딩과 관련하여 다음과 서비스들을 지원합니다. 더 보기

서비스 임베드 가능한 콘텐츠 형식 썸네일 안정성
Airbnb 숙소 정보 외부 높음
Amazon Music 싱글, 앨범, 아티스트, 플레이리스트 외부 높음
Apple Music 싱글, 앨범, 플레이리스트, 비디오, 라디오(로그인) 외부 높음

Apple Podcasts

팟캐스트 외부 높음
오디오클립 오디오 외부 높음
AZQuotes 이미지 첨부 높음
Bandcamp 음악 외부 보통
Bilibili vod, 방송 클립 첨부 보통
치지직 클립 영상 외부 높음
Codepen 코드 외부 높음
Code Sandbox 코드 외부 높음
Dailymotion vod 외부 높음
Discord 초대 위젯 로고 높음
Facebook 포스트, 비디오, 릴 첨부 보통
FC2 vod, 라이브 외부 높음
Figma 디자인 외부 높음
Flickr 포토, 갤러리, 비디오 외부 높음
Gettyimages 포토 외부 높음
Giphy gif, 비디오 외부 보통
Github 일반 파일, Gist 외부 중간
Google Books 미리보기 외부 보통
Google Drive 폴더, 파일, 드로잉, 슬라이드(프리젠테이션), 스프레드시트 첨부 보통
Google Forms 설문지 외부 높음
Google Maps 일반 지도, 위성 지도, 파노라마(=로드뷰) 지원 외부 보통
IMDb vod 외부 낮음
Imgru 포토, 갤러리, 비디오 외부 낮음
Instagram 포스트, TV, Reel 첨부 높음
Internet Archive 비디오, 오디오, 책, 소프트웨어 소개, 이미지 외부 높음
IQiyi vod + 자막 외부 높음
짤봇 gif 외부 높음
JSFiddle 코드 로고 높음
카카오 TV 비디오, 라이브, 숏폼, Daum 비디오 외부 높음
카카오 지도 일반 지도, 키워드 검색 결과, 로드뷰 외부 보통
KTV 다시 보기 외부 보통
Mixcloud 음악 외부 높음
MLB.com 비디오 + 자막 외부 높음
MS Office 첨부 파일 본문 삽입. doc(x), xls(x), ppt(x) 로고 높음
네이트 TV 클립, 뉴스 영상 첨부 중간
네이버 TV 비디오, 라이브 외부 높음
네이버 VOD 뉴스, 스포츠, e-스포츠, 라이브, 숏폼 외부 높음
네이버 Vibe 음악 외부 높음
Niconico (ニコニコ) 비디오, 라이브 외부 높음
Pinterest 핀, 보드, 프로필 외부 높음
Pdf 첨부 파일 본문 삽입. pdf 첨부 높음
팝콘TV 클립 영상 외부 높음
Prezi 프리젠테이션, 비디오 외부 높음
QQ 비디오 외부 보통
Reddit 포스트 외부 높음
Relive 비디오 외부 낮음
SBS 라이브, 뉴스 삽입 영상, 다시보기, 클립 외부 보통
SlideShare 프리젠테이션 외부 높음
Soop (숲) 라이브(썸네일 첨부), VOD, 클립, 숏폼 외부 보통
SoundCloud 음악 외부 높음
스푼캐스트 클립 오디오, 라이브 오디오 외부 높음
Spotify 음악(미리듣기), 팟캐스트, 비디오 외부 높음
Suno AI 음악 외부 높음
Streamable 비디오 외부 높음
TED 비디오 외부 높음
텔레그램 채널 메시지 첨부 높음
Tenor gif 외부 높음
Threads 포스트 첨부 중간
Tiktok 포스트 첨부 높음
Tudou VOD 외부 보통
Tumblr 포스트 외부 높음
TV Sohu VOD 외부 높음
TVCF 비디오 외부 높음
Typeform 설문지 로고 높음
Udio 음악 외부 높음
Vimeo 비디오 외부 높음
X.com / 트위터 포스트, 개인 타임라인 외부 보통
Youku vod 외부 보통
Youtube 비디오, 쇼츠, 라이브 외부 높음