在網上看了很多案例，大部分使用起來都會報錯，可能是版本太低了。

近期一個專案中需要用到tinymce 整合了網上的一些攻略，終於成功了，現在分享一下，

我使用的是5.3.2版本,

1. 安裝tinymce-vue

npm install @tinymce/tinymce-vue -S

2. 安裝tinymce

npm install tinymce -S

3.下載tinymce完成後在node_modules 中找到 tinymce目錄，將其複製到static目錄下面，

4. 下載中文語言包

inymce提供了很多的語言包，這裡我們下載中文語言包，下載完後，將其解壓到static\tinymce目錄下面，最終目錄結構形式如下

好了 準備工作已做完，上vue

5.

<template>
    <div>
        <editor 
        :init="init" 
        v-model="content" 
        :tinymce-script-src="tinymceScriptSrc" 
        @onInit="onReady" />
    </div>
</template>

<script>
    import Editor from '@tinymce/tinymce-vue'
    export 
 
default {
        components: {
            Editor
        },
        name: 'CkEditor',
        data() {
            return {
                content: '這是tinymce',
                tinymceScriptSrc: '/static/tinymce/tinymce.min.js', //本地的tinymce檔案地址
                init: {
                    height: 500,
                    resize: 
 
false, // 調整編輯器大小工具 true（僅允許改變高度）, false（完全不讓你動）, 'both'（寬高都能改變，注意引號）
                    statusbar: true, // 顯示隱藏狀態列 狀態列指的是編輯器最底下、左側顯示dom資訊、右側顯示Tiny版權連結和調整大小的那一條。預設是顯示的，設為false可將其隱藏。
                    branding: false, // 隱藏右下角技術支援
                    toolbar: 'code paste help fullscreen image undo redo',
                    elementpath: false, //禁用編輯器底部的狀態列
                    statusbar: false, // 隱藏編輯器底部的狀態列
                    paste_data_images: true, // 允許貼上影象
                    language: 'zh_CN',
                    language_url: '/static/tinymce/langs/zh_CN.js',
                    theme: 'silver',
                    theme_url: '/static/tinymce/themes/silver/theme.min.js',
                    base_url: '/static/tinymce',
                    suffix: '.min',
                    plugins: 'image paste code',
                }
            }
        },
        methods: {
            onReady(e) {
                //  獲取tinymce物件 可以使用此物件呼叫 各種api。具體看tinymce官網
                this.editor = e.target
            }
        }
    }

</script>

ok了

這裡只是簡單的使用，具體可以檢視官方文件