vue中使用tinymce及插件powerpaste的使用

<template>
    <div class="tinymce-editor" style="height: calc(100% - 56px);">
        <editor v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick" id="mytextarea"></editor>
    </div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/lists' // 列表插件
import 'tinymce/plugins/code' // 源代码插件
import 'tinymce/plugins/pagebreak' // 分页符插件
import 'tinymce/plugins/charmap' // 特殊符号插件
import 'tinymce/plugins/emoticons' // 表情插件
import 'tinymce/plugins/save' // 保存插件
import 'tinymce/plugins/preview' // 预览插件
// import 'tinymce/plugins/print' // 打印
import 'tinymce/plugins/image' // 上传图片插件
import 'tinymce/plugins/media' // 视频插件
import 'tinymce/plugins/link' // 链接插件
import 'tinymce/plugins/anchor' // 锚点插件
import 'tinymce/plugins/codesample' // 代码插件
import 'tinymce/plugins/table' // 表格插件
import 'tinymce/plugins/searchreplace' // 查找、替换插件
import 'tinymce/plugins/hr' // 水平分割线插件
import 'tinymce/plugins/insertdatetime' // 时间日期插件
// import 'tinymce/plugins/paste' // 粘体插件
import 'tinymce/plugins/wordcount' // 字数统计插件
import 'tinymce/plugins/fullscreen' // 全屏插件
import 'tinymce/plugins/help' // 帮助插件
export default {
    components: {
        Editor,
    },
    props: {
        //传入一个value，使组件支持v-model绑定
        value: {
            type: String,
            default: '',
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        plugins: {
            type: [String, Array],
            default:
                'lists code pagebreak charmap emoticons save preview print image media link powerpaste ' +
                'anchor codesample table wordcount fullscreen help searchreplace hr insertdatetime',
        },
        toolbar: {
            type: [String, Array],
            default:
                '| formatselect fontselect fontsizeselect ' +
                '| undo redo ' +
                '| code bold italic underline strikethrough ' +
                '| alignleft aligncenter alignright alignjustify ' +
                '| outdent indent numlist bullist insertdatetime ' +
                '| table forecolor backcolor removeformat ' +
                '| hr searchreplace pagebreak charmap ' +
                '| fullscreen ' +
                '| link anchor codesample ',
        },
    },
    data() {
        return {
            //初始化配置
            init: {
                language_url: '/tinymce/zh-Hans.js',
                language: 'zh-Hans',
                skin_url: '/skins/ui/oxide',
                content_css: '/skins/content/default/content.css',
                height: '100%',
                plugins: this.plugins,
                toolbar: this.toolbar,
                menubar: true,
                placeholder: '请输入内容',
                branding: false, // 隐藏右下角技术支持
                fontsize_formats:
                    '12px 14px 16px 18px 24px 36px 48px 56px 72px',
                paste_data_images: true, // 是否允许黏贴图片
                font_formats:
                    '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
                resize: true,
                zIndex: 11101,
                theme: 'silver', //主题
                insertdatetime_formats: [
                    '%H点%M分',
                    '%Y年%m月%d日',
                    '%Y年%m月%d日 %H点%M分',
                    '%Y-%m-%d %H:%M',
                ], // 时间日期格式化
                contextmenu: false, // 禁用富文本的右键菜单，使用浏览器自带的右键菜单
                // 添加扩展插件
                external_plugins: {
                    powerpaste: '/powerpaste/plugin.min.js',
                },
                powerpaste_word_import: 'propmt', // 参数可以是propmt, merge, clear，效果自行切换对比
                powerpaste_html_import: 'propmt', // propmt, merge, clear
                powerpaste_allow_local_images: true,
            },
            myValue: this.value,
        }
    },
    mounted() {
        tinymce.init({})
    },
    methods: {
        //添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
        //需要什么事件可以自己增加
        onClick(e) {
            this.$emit('onClick', e, tinymce)
        },
    },
    watch: {
        value(newValue) {
            this.myValue = newValue
        },
        myValue(newValue) {
            this.$emit('hangdleEditor', newValue)
        },
    },
}
</script>
<style scoped>
</style>

<template>
    <div style="height: calc(100%)">
        <Tinymce id="textAreaContent" class="editor" :value="content" v-on:hangdleEditor="hangdleEditor" />
    </div>
</template>
<script>
import Tinymce from '@/public/Tinymce.vue'
export default {
    data() {
        return {
            content: '',
        }
    },
    mounted() {
    },
    methods: {
        hangdleEditor(val) {
            this.content = val
        },
    },
    components: {
        Tinymce,
    },
}
</script>
<style scoped lang="less">
.cont {
    height: calc(100% - 60px);
    overflow: auto;
    .back {
        width: 96px;
        height: 32px;
        line-height: 32px;
        background: #ffffff;
        border-radius: 16px;
        font-size: 18px;
        font-weight: 500;
        color: #333333;
        text-align: center;
        cursor: pointer;
        margin-bottom: 24px;
    }
}
</style>