<template>
    <tinymce-editor :init="init" style="width:800px;">
    </tinymce-editor>
</template>
<script>
import Editor from "@tinymce/tinymce-vue";
import tinymce from "tinymce/tinymce";
import "tinymce/themes/silver";
import "tinymce/plugins/advlist";
import "tinymce/plugins/autolink";
import "tinymce/plugins/lists";
import "tinymce/plugins/link";
import "tinymce/plugins/image";
import "tinymce/plugins/charmap";
import "tinymce/plugins/print";
import "tinymce/plugins/preview";
import "tinymce/plugins/anchor";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/code";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/media";
import "tinymce/plugins/table";
import "tinymce/plugins/paste";
import "tinymce/plugins/code";
import "tinymce/plugins/help";
import "tinymce/plugins/imagetools";

require("./zh_CN");
export default {
    props: ["value", "disabled"],
    created() {
        this.content = this.value || "";
    },
    data() {
        return {
            init: {
                language: "zh_CN",
            },
            editor: null,
            content: ""
        };
    },
    methods: {
        load() {
            console.log(1111);
        }
    },
    watch: {
        value(val) {
            if (this.editor) {
                this.editor.setContent(val);
            }
            this.content = val;
        },
        content(val) {
            this.$emit("input", val);
        },
        disabled(val) {
            if (val) {
                this.destroyEditor();
            } else {
                this.$nextTick(() => {
                    this.initEditor();
                });
            }
        }
    },
    components: {
        "tinymce-editor": Editor // <- Important part
    }
};
</script>
<style lang="less" scoped>
.preview {
    height: 300px;
    overflow: auto;
    border: 1px solid #ebebeb;
    background-color: #fbfdff;
    border-radius: 4px;
}
</style>
