1.安裝tinymce包

npm install tinymce -S 
npm install @tinymce/tinymce-vue -S

2.從node_modules/tinymce目錄中將skins和plugins檔案複製出來，在static目錄建立了一個tinymce資料夾，然後將複製出來的檔案放在tinymce裡。

langs為下載的語言包

3.元件中引入tinymc

import tinymce from 'tinymce';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/themes/silver';
import 
 
'tinymce/plugins/paste';
import 'tinymce/plugins/image';
import 'tinymce/plugins/link';
import 'tinymce/plugins/code';
import 'tinymce/plugins/table';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/colorpicker';
import 'tinymce/plugins/textcolor';
import 'tinymce/icons/default'

4.配置int

//powerpaste外掛為tinymce的收費外掛，下載之後放入static/tinymce/plugins資料夾
//該外掛作用為複製word文件時批量上傳圖片，不需要的可以不要

props: {
        //傳入一個value，使元件支援v-model繫結
        value: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        plugins: {
            type: [String, Array],
            
 
default:'lists image table wordcount powerpaste code'//外掛
        },
        toolbar: {
            type: [String, Array],
            //選單
            default:'undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat'
        }
    },
    data() {
        return {
            //初始化配置
            init: {
               language_url: 'tinymce/langs/zh_CN.js', //如果語言包不存在，指定一個語言包路徑
                language: 'zh_CN', //語言
                skin_url: 'tinymce/skins/ui/oxide',
                content_css: 'tinymce/skins/content/default/content.css',
                height: '500px',
                selector: 'textarea',  // change this value according to your HTML
                plugins: this.plugins, //外掛
                //以下為powerpaste外掛配置
                convert_urls: false,
                external_plugins: {
                    powerpaste: `/tinymce/plugins/powerpaste/plugin.min.js` // 注意這裡路徑一定要寫對！！！一定要寫對  然後在puligins裡新增
                },
                end_container_on_empty_block: true,
                powerpaste_word_import: 'propmt',// 引數可以是propmt, merge, clear，效果自行切換對比
                powerpaste_html_import: 'propmt',// propmt, merge, clear
                powerpaste_allow_local_images: true,
                paste_data_images: true,
                //以上為powerpaste外掛配置
                toolbar: this.toolbar, //工具欄
                branding: false, //技術支援(Powered by Tiny || 由Tiny驅動)
                menubar: true, //選單欄
                theme: 'silver', //主題
                //此處為圖片上傳處理函式，這個直接用了base64的圖片形式上傳圖片，
                //如需ajax上傳可參考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
                images_upload_handler: (blobInfo, success, failure) => {
                    console.log(blobInfo, success, failure)
                    
                }
            },
           
        };
    },