ckeditor에서 youtube url 입력시 iframe으로 출력하기

ckeditor에서 유튜브를 embeded 했는데, 

embeded 태그로 입력되서 출력이 되지않는다ㅠㅠ

 

유튜브는 iframe으로 출력해야되서 그런데,

간편하게 변경할 수 있는 방법이 있다!

 

editor config에 넣어주면 된다!

editorConfig = {
    toolbar: [....],
    mediaEmbed: {
        previewsInData: true
    }
}

---

[vue 전체 코드]

<template>
    <div>
        <ckeditor
            :editor="state.editor" @ready="onReady" @input="$emit('input', String(state.changeEditorData))" v-model="state.changeEditorData" :config="state.editorConfig"/>
    </div>

</template>

<script>
import UploadAdapter from '@/utils/CkEditorUploadAdapter';
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import CKEditor from '@ckeditor/ckeditor5-vue';
import {ref, watch} from "vue";


export default {
    components: {
        ckeditor: CKEditor.component
    },
    name: "CkEditor",
    props: ['editorData'],
    setup(props) {
        const state = ref({
            editor: ClassicEditor,
            changeEditorData: props.editorData,
            editorConfig: {
                // The configuration of the editor.
                mediaEmbed: {
                    previewsInData: true
                }
            }
        });

        const onReady = (editor) => {
            editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
                return new UploadAdapter(loader);
            }
        }
        watch(
            () => props.editorData, (value) => {
                state.value.changeEditorData = value;
            }
        )
        return {
            state,
            onReady,
        }
    },
}
</script>