<template>
    <editor :other_options="config.other_config"
            :plugins="config.plugins"
            :toolbar1="config.toolbar1"
            v-bind:value="value"
            :placeholder="placeholder"
            :id="id"
            :name="name"
    ></editor>
</template>

<script>
    import tinymce from 'vue-tinymce-editor';

    export default {
        components: {
            editor: tinymce
        },
        props: {
            value: {
                type: [String, Number, Array, Object],
                default: null
            },
            placeholder: {
                type: String,
                default: ''
            },
            name: {
                type: String,
                default: ''
            },
            id: {
                type: String,
            },
            type: {
                type: String,
                default: 'regular'
            },
        },
        computed: {
            config() {
                return this.configs[this.type];
            },
        },
        data() {
            return {
                configs: {
                    regular: {
                        plugins: [
                            "advlist autolink lists link image charmap print preview anchor",
                            "searchreplace visualblocks code fullscreen",
                            "insertdatetime media table contextmenu paste moxiemanager"
                        ],
                        toolbar1: "undo redo | styleselect bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link insertfile image",
                        other_config: {
                            external_plugins: {
                                "moxiemanager": "/core/js/moxiemanager/plugin.min.js"
                            },
                            content_css: "/core/css/tiny_mce.css",

                            // General options
                            theme: "modern",

                            menubar: false,
                            statusbar: false,
                            convert_fonts_to_spans: true,
                            paste_as_text: true,
                            relative_urls: false,
                            remove_script_host: false,
                            convert_urls: true,
                            body_class: "pageContent",
                            width: 676,
                            height: 250,
                            resize: "both",
                            selector: 'textarea',
                            image_dimensions: false,
                            image_advtab: false,
                            style_formats: [
                                {
                                    title: "Headers",
                                    items: [
                                        {
                                            title: "Header 2",
                                            format: "h2"
                                        },
                                        {
                                            title: "Header 3",
                                            format: "h3"
                                        },
                                        {
                                            title: "Header 4",
                                            format: "h4"
                                        },
                                        {
                                            title: "Header 5",
                                            format: "h5"
                                        },
                                        {
                                            title: "Header 6",
                                            format: "h6"
                                        }
                                    ]
                                },
                                {
                                    title: "Inline",
                                    items: [
                                        {
                                            title: "Bold",
                                            icon: "bold",
                                            format: "bold"
                                        },
                                        {
                                            title: "Italic",
                                            icon: "italic",
                                            format: "italic"
                                        },
                                        {
                                            title: "Underline",
                                            icon: "underline",
                                            format: "underline"
                                        }
                                    ]
                                },
                                {
                                    title: "Blocks",
                                    items: [
                                        {
                                            title: "Paragraph",
                                            format: "p"
                                        },
                                        {
                                            title: "Blockquote",
                                            format: "blockquote"
                                        }
                                    ]
                                }
                            ],
                            advlist_bullet_styles: 'Default',
                            advlist_number_styles: 'Default',
                            contextmenu: "link image inserttable subscript superscript | cell row column deletetable code"
                        }
                    },
                    simple: {
                        plugins: [
                            "advlist autolink lists link image charmap print preview anchor",
                            "searchreplace visualblocks code fullscreen",
                            "insertdatetime media table contextmenu paste moxiemanager"
                        ],
                        toolbar1: "bold italic | bullist numlist | link unlink",
                        other_config: {
                            external_plugins: {
                                "moxiemanager": "/core/js/moxiemanager/plugin.min.js"
                            },
                            content_css: "/core/css/tiny_mce.css",

                            // General options
                            theme: "modern",

                            menubar: false,
                            statusbar: false,
                            convert_fonts_to_spans: true,
                            paste_as_text: true,
                            relative_urls: false,
                            remove_script_host: false,
                            convert_urls: true,
                            body_class: "wysiwigContent",
                            width: 676,
                            height: 250,
                            resize: "both",
                            image_dimensions: false,
                            image_advtab: false,

                            style: "float:left",
                            advlist_bullet_styles: 'Default',
                            advlist_number_styles: 'Default',

                            contextmenu: "link image inserttable | cell row column deletetable code"
                        }
                    },
                    linkOnly: {
                        plugins: [
                            "advlist autolink lists link image charmap print preview anchor",
                            "searchreplace visualblocks code fullscreen",
                            "insertdatetime media table contextmenu paste moxiemanager"
                        ],
                        toolbar1: "bold italic | bullist | link unlink",
                        other_config: {
                            external_plugins: {
                                "moxiemanager": "/core/js/moxiemanager/plugin.min.js"
                            },
                            content_css: "/core/css/tiny_mce.css",

                            // General options
                            theme: "modern",

                            menubar: false,
                            statusbar: false,
                            convert_fonts_to_spans: true,
                            paste_as_text: true,
                            relative_urls: false,
                            remove_script_host: false,
                            convert_urls: true,
                            body_class: "wysiwigContent",
                            width: 676,
                            height: 250,
                            resize: "both",
                            image_dimensions: false,
                            image_advtab: false,

                            style: "float:left",

                            contextmenu: "link | code"

                        }
                    }
                }
            }
        },
    }
</script>
