<template>
    <div style="width: 100%; height: 100%" ref="container"></div>
</template>

<script>
import "./tinymce/js/tinymce/tinymce.min.js"
import "./tinymce/js/tinymce/themes/silver/theme.min.js"
import "./tinymce/js/tinymce/models/dom/model.min.js"
import "./tinymce/js/tinymce/icons/default/icons.min.js"
import "./tinymce/js/tinymce/skins/ui/oxide/skin.min.css"
import "./tinymce/js/tinymce/skins/ui/oxide/content.min.css"
import "./tinymce/js/tinymce/skins/content/default/content.min.css"
export default {
    props: {
        tinymceOption: {
            type: Object,
            default: () => { }
        },
        menu: {
            type: Array,
            default: () => []
        },
        // 富文本框层级
        tinymceIndex: {
            type: String | Number,
            default: 3000
        },
        // 值绑定
        value: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            editor: null
        }
    },
    watch: {
        value: {
            handler(content) {
                this.editor && this.editor.setContent(content)
            },
            immediate: true
        },
    },
    async mounted() {
        // 按需引入字体
        require("./tinymce/js/tinymce/langs/" + ( this.tinymceOption.language || "zh_CN" ) + ".js")
        // 按需引入插件
        if (this.tinymceOption.plugins) {
            this.tinymceOption.plugins.split(" ").forEach(name => {
                // 判断该插件是否被注册过，已经注册的插件不需要重复执行
                const plugin = tinymce.PluginManager.get(name)
                if(plugin) return;

                // 自定义插件
                if (name == 'tjdata-tinymce-plugins-search') {
                    tinymce.PluginManager.add(name, editor => {
                        const defaultSelectionToolbar = this.menu.map(item => item.type).join(" ")
                        editor.options.register('quickbars_selection_toolbar', {
                            processor: value => ({ value: value.trim(), valid: true }),
                            default: defaultSelectionToolbar
                        })

                        editor.ui.registry.addContextToolbar('textselection', {
                            predicate: node => !editor.selection.isCollapsed(),
                            items: editor.options.get("quickbars_selection_toolbar"),
                            position: 'selection',
                            scope: 'node'
                        })
                        this.menu.forEach((item, index) => {
                            editor.ui.registry.addButton(item.type, { text: item.text, icon: item.icon, onAction: () => item.onAction(editor, item, index) })
                        })
                    })
                    return;
                }
                require("./tinymce/js/tinymce/plugins/" + name + "/plugin.min.js")
            })
        }
        const self = this
        await tinymce.init({
            target: this.$refs.container,
            language: 'zh_CN',
            toolbar_sticky: true, // 粘性工具栏 粘性工具栏（或停靠工具栏），在向下滚动网页直到不再可见编辑器时，将工具栏和菜单停靠在屏幕顶部。
            branding: false, // 隐藏右下角技术支持
            elementpath: false,   // 隐藏底栏的元素路径
            promotion: false,  // 隐藏 Upgrade 按钮
            content_style:  `
                @font-face {
                    font-family: 'fzdbsjt';
                    src: url(${require("./tinymce/js/tinymce/fonts/方正大标宋简体.ttf")}) format('truetype');
                }
                @font-face {
                    font-family: 'fzxbsjt';
                    src: url(${require("./tinymce/js/tinymce/fonts/方正小标宋简体.ttf")}) format('truetype');
                }
                @font-face {
                    font-family: 'fs_gb2312';
                    src: url(${require("./tinymce/js/tinymce/fonts/仿宋_GB2312.ttf")}) format('truetype');
                }
                @font-face {
                    font-family: 'jt_gb2312';
                    src: url(${require("./tinymce/js/tinymce/fonts/楷体_GB2312.ttf")}) format('truetype');
                }
            `,
            ...this.tinymceOption,
            setup(editor) {
                self.editor = editor
                editor.on('input keyup Change Undo Redo ExecCommand NodeChange', () => {
                    self.$emit('input', editor.getContent())
                })
            }
        })
        document.querySelector(".tox.tox-silver-sink.tox-tinymce-aux").style.zIndex = this.tinymceIndex
    }
}
</script>

<style>
@font-face {
    font-family: 'fzdbsjt';
    src: url('./tinymce/js/tinymce/fonts/方正大标宋简体.ttf') format('truetype');
}
@font-face {
    font-family: 'fzxbsjt';
    src: url('./tinymce/js/tinymce/fonts/方正小标宋简体.ttf') format('truetype');
}
@font-face {
    font-family: 'fs_gb2312';
    src: url('./tinymce/js/tinymce/fonts/仿宋_GB2312.ttf') format('truetype');
}
@font-face {
    font-family: 'jt_gb2312';
    src: url('./tinymce/js/tinymce/fonts/楷体_GB2312.ttf') format('truetype');
}
.tox.tox-silver-sink.tox-tinymce-aux [data-alloy-placement="southeast"] .tox-pop__dialog {
    background-color: #474646;
}

.tox.tox-silver-sink.tox-tinymce-aux [data-alloy-placement="southeast"] .tox-pop.tox-pop--top::before {
    border-color: transparent transparent #474646 transparent;
}

.tox.tox-silver-sink.tox-tinymce-aux [data-alloy-placement="southeast"] .tox-pop.tox-pop--top::after {
    border-color: transparent transparent #474646 transparent;
}

.tox.tox-silver-sink.tox-tinymce-aux [data-alloy-placement="southeast"] .tox-pop.tox-pop--top::after,
.tox.tox-silver-sink.tox-tinymce-aux [data-alloy-placement="southeast"] .tox-pop.tox-pop--top::before {
    top: 1px;
}

.tox.tox-silver-sink.tox-tinymce-aux [data-alloy-placement="southeast"] .tox-tbtn {
    color: #d7d7d7;
}

.tox.tox-silver-sink.tox-tinymce-aux [data-alloy-placement="southeast"] .tox-tbtn:hover,
.tox.tox-silver-sink.tox-tinymce-aux [data-alloy-placement="southeast"] .tox-tbtn:focus,
.tox.tox-silver-sink.tox-tinymce-aux [data-alloy-placement="southeast"] .tox-tbtn:active {
    color: #222f3e;
    background: #a6ccf7;
}

.tox.tox-silver-sink.tox-tinymce-aux [data-alloy-placement="southeast"] .tox-tbtn:hover svg,
.tox.tox-silver-sink.tox-tinymce-aux [data-alloy-placement="southeast"] .tox-tbtn:focus svg,
.tox.tox-silver-sink.tox-tinymce-aux [data-alloy-placement="southeast"] .tox-tbtn:active svg {
    fill: #222f3e;
}

.tox.tox-silver-sink.tox-tinymce-aux [data-alloy-placement="southeast"] .tox-tbtn svg {
    fill: #d7d7d7;
}</style>
