在vue 中 使用 tinymce編輯器

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

近期一個項目中需要用到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了

這里只是簡單的使用，具體可以查看官方文檔