ckeditor mediaEmbed 카카오tv 처리

ckeditor5 media embed 에서 카카오tv 주소를 넣었을 경우 글에 삽입되도록 처리하는 방법이다.

​

주소형식 2가지를 받아 iframe 형식으로 만들어 리턴해주는 설정이다

​

ClassicEditor

.create( document.querySelector( '#ckeditor' ), {

toolbar: {

items : ['mediaEmbed'],

shouldNotGroupWhenFull: true,

},

mediaEmbed: {

previewsInData: true,

providers: [

{

name: 'kakaotv',

url: [/^tv\.kakao\.com\/v\/([\w-]+)/, /^tv\.kakao\.com\/channel\/[^/]+\/cliplink\/(\d+)/],

html: match => {

const id = match[ 1 ];

return (

'<div style="position: relative; padding-bottom: 100%; height: 0; ">' +

`<iframe src="https://tv.kakao.com/embed/player/cliplink/${ id }" ` +

'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" frameborder="0" allowfullscreen allow="autoplay">' +

'</iframe>' +

'</div>'

);

}

},

]

},

​

}).then(function(editor) {

$('style').append('.ck-content { height: 480px !important; }');

​

}).catch( error => { console.log( error ); } );