<template>
    <ckeditor :value="value"
        @input="($event)=>$emit('input', $event)"
        :readOnly="readonly"
        :style="{ width: width == null ? null : (width + 'px') }"
        :editorUrl="editorUrl"
        :config="config"></ckeditor>
</template>
<script>
    import mixinPage from '../../mixins/page';
    import util from '../../libs/util';
    import { mapState } from 'vuex';

    export default {
        mixins: [mixinPage],
        props: {
            value: {
                type: String
            },
            // 只读
            readonly: {
                type: Boolean,
                default: false
            },
            width: {
                type: Number
            },
            height: {
                type: Number
            },
            editorUrl: {
                type: String,
                default: 'https://cdn.ckeditor.com/4.13.0/full/ckeditor.js'
            }
        },
        computed: {
            ...mapState('admin/setting', ['apiBaseURL']),
            config() {
                const token = util.cookies.get('token');
                return {
                    height: this.height == null ? 500 : this.height,
                    fileTools_requestHeaders: {
                        Authorization: 'Bearer ' + token
                    },
                    toolbar: [
                        { name: 'document', items: ['Preview', 'Print'] },
                        { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
                        { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'Scayt'] },
                        { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat'] },
                        {
                            name: 'paragraph',
                            items: [
                                'NumberedList',
                                'BulletedList',
                                '-',
                                'Outdent',
                                'Indent',
                                '-',
                                'Blockquote',
                                'CreateDiv',
                                '-',
                                'JustifyLeft',
                                'JustifyCenter',
                                'JustifyRight',
                                'JustifyBlock',
                                '-',
                                'BidiLtr',
                                'BidiRtl'
                            ]
                        },
                        { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
                        { name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'] },
                        { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
                        { name: 'colors', items: ['TextColor', 'BGColor'] },
                        { name: 'tools', items: ['Maximize', 'ShowBlocks'] }
                    ],
                    filebrowserUploadUrl: this.apiBaseURL + 'api/CKEditor?r=1'
                };
            }
        },
        methods: {}
    };
</script>
