<template>
    <textarea name="editor5" id="editor5" style="width:100%" ref="editorContainer"></textarea>
</template>
<script>
import { mdiBorderColor } from '@mdi/js';
import UploadAdapter from './UploadAdapter.js'
    export default{
        props: {
            bbsCn: {
                type: Object,
                required: true
            }

        },
        data(){
            return{
                //스마트 에디터
                editor: null,
                tableDefault: {
                    borderWidth: '1',
                    borderStyle: 'solid',
                    borderColor: '#000000'
                },
            }

        },
        methods:{
            // 에디터 생성
            createEditor: function () {
                // ck에디터 적용
                ClassicEditor
                    .create(this.$refs.editorContainer, {
                        extraPlugins: [this.MyCustomUploadAdapterPlugin],
                        removePlugins: ['MediaEmbed','MediaEmbedToolbar'],
                        image: {
                            toolbar: ['imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight','|','resizeImage:50','resizeImage:75', 'resizeImage:original','resizeImage:custom',],
                            resizeOptions: [
                                {
                                    name: 'resizeImage:original',
                                    value: null,
                                    icon: 'original'
                                },
                                {
                                    name: 'resizeImage:custom',
                                    value: 'custom',
                                    icon: 'custom'
                                },
                                {
                                    name: 'resizeImage:50',
                                    value: '50',
                                    icon: 'medium'
                                },
                                {
                                    name: 'resizeImage:75',
                                    value: '75',
                                    icon: 'large'
                                }
                            ],
                        },
                        fontFamily: {
                            options: [
                                'default',
                                '궁서체',
                                '바탕',
                                '돋움',
                                "Arial, Helvetica, sans-serif",
                                "Courier New, Courier, monospace",
                                "Georgia, serif",
                                "Lucida Sans Unicode, Lucida Grande, sans-serif",
                                "Tahoma, Geneva, sans-serif",
                                "Times New Roman, Times, serif",
                                "Trebuchet MS, Helvetica, sans-serif",
                                "Verdana, Geneva, sans-serif",
                            ],
                            // supportAllValues: true
                        },
                        table: {
                            contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableCellProperties'],
                            tableProperties: {
                                defaultProperties: {
                                    borderStyle: 'solid',
                                    borderColor: 'hsl(0, 0%, 0%)',
                                    borderWidth: '1px',
                                }
                            },
                            tableCellProperties: {
                                defaultProperties: {
                                    borderStyle: 'solid',
                                    borderColor: 'hsl(0, 0%, 0%)',
                                    borderWidth: '1px',
                                }
                            },
                            
                        }
                    })
                    .then(editor => {
                        this.editor = editor;
                        editor.setData(this.bbsCn.bbsCn);
                        editor.model.document.on('change', () => {
                            this.bbsCn.bbsCn = editor.getData();
                        });
                    })
                        .catch(error => {
                        console.error('There was a problem initializing the editor.', error);
                        });
                    },

            beforeDestroy: function() {
                if (this.editor) {
                    this.editor.destroy()
                        .then(() => {
                            this.editor = null;
                        });
                }
            },

            MyCustomUploadAdapterPlugin: function(editor) {
                editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
                    return new UploadAdapter(loader);
                }
            }
        },
        mounted(){
        }
    }
</script>