vue項目使用tinymce 適用於5.0版本

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)
                    
                }
            },
           
        };
    },